Febird's Sky

Search & Research & Find
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

LightBox2.0 JavaScript 图片特效

Posted on 2007-12-04 19:30  febird  阅读(1018)  评论(0)    收藏  举报

此脚本为迄今为止我觉得算比较清爽的Web图片浏览脚本了,你只要将这个JS包含到页面,然后在你需要使用这个浏览特效的图片标签里面添加一个属性即可 你还可以将他们组成一个集合,在浏览的时候可以按“NEXT”来浏览同样一个集合中的下一张图片。 可以根据图片大小来调整页面,淡入淡出效果,页面美观,当网页下载比较慢的时候,可以不实现特效,直接在一个新页面打开该图片。 先在相应的JS中配置一下路径什么的,再使用如下代码:

      <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />    

      <script src="js/prototype.js" type="text/javascript"></script>

      <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>

      <script src="js/lightbox.js" type="text/javascript"></script>

     

     

   <a href="images/image-1.jpg" rel="lightbox[test]"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

   <a href="images/image-2.jpg" rel="lightbox[test]"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

   <a href="images/image-3.jpg" rel="lightbox[test]"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

附件点击下载