为了账号安全,请及时绑定邮箱和手机立即绑定

lightbox弹出层导致顶部滚动、图片抖动、去掉横线

标签:
JQuery

jQuery弹出层插件lightbox

相信用这个插件的朋友会遇到一些问题:

1.顶部滚动
顶部菜单fixed固定,但是点击用了lightbox的图片 点击预览时菜单会向右滚动;仔细查看发现预览层弹出时滚动条隐藏了;解决方法:

在 lightbox.css 中去掉隐藏属性:

https://img1.sycdn.imooc.com//5d5e45ba0001752304250173.png

滚动条隐藏.png

2.图片抖动
预览层弹出和收起时图片的动画抖动显得有点卡顿;解决方法:

在 lightbox.js 中找到:
"transition-duration",e+"ms"进入时间 和 "transition-duration",i+"ms"收起时间;

https://img1.sycdn.imooc.com//5d5e45bd0001662703680393.png

然后改成你想要的时间,比如:
进入时间:"transition-duration","200ms"
收起时间:"transition-duration","150ms"

3.弹出窗底部有个横线

https://img1.sycdn.imooc.com//5d5e45c00001965804470268.png

线1.png

在 lightbox.css 中找到:
fancybox-caption{padding:30px 0;border-top:1px solid hsla(0,0%,100%,.4);

https://img1.sycdn.imooc.com//5d5e45ca0001e64b07510152.png

线.png

把border-top出掉即可

演示网站cuanyair.com(头部幻灯片部分)



作者:车文烨
链接:https://www.jianshu.com/p/33dd77eaeb7a

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消