发布时间：2025-12-10 19:42:32 浏览次数：3
灯箱效果lightbox.js的使用示例灯箱效果想必大家都很熟悉，平常用的也会比较多。今天研究了下反响比较好的jquery插件lightbox.js，虽然界面效果不错，但是也有缺点兼容性：各大浏览器和ie6+不足：1由于我们使用时是直接在css里写data-lightbox属性调用它，所以如果需要修改自定义参数，只能修改源码2没有考虑窗口缩放事件具体示例： demo *
灯箱效果想必大家都很熟悉，平常用的也会比较多。
今天研究了下反应比较好的jquery插件lightbox.js，虽然界面效果不错，但是也有缺点
兼容性：各大浏览器和ie6+
不足：
1由于我们使用时是直接在html里写data-lightbox属性调用它，所以如果需要修改自定义参数，只能修改源码
2没有考虑窗口缩放事件
具体示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo</title><link rel="stylesheet" href="css/lightbox.css"><script src="js/jquery-1.11.3.min.js"></script><script src="js/lightbox.js"></script></head><style>* {padding: 0; margin: 0;}</style><body><!--单个图片--><a href="images/p1.jpg" data-lightbox="e1" data-title="Click the right half of the image to move forward."><img src="images/p1.jpg" width="100"></a>希望我今天分享的这篇文章可以帮到您。
<span style="white-space:pre"></span><!--多张图片--><a href="images/p2.jpg" data-lightbox="e2" data-title="Click the right half of the image to move forward."><img src="images/p2.jpg" width="100"></a><a href="images/p3.jpg" data-lightbox="e2" data-title="Click the right half of the image to move forward."><img src="images/p3.jpg" width="100"></a><a href="images/p4.jpg" data-lightbox="e2" data-title="Click the right half of the image to move forward."><img src="images/p4.jpg" width="100"></a><script></script></body></html>
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流