您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 相册代码 >

    jQuery实现的仿堆糖图片自滚动瀑布流效果

    时间:2013-08-27 10:32 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    效果预览 进入下载地址列表

    jQuery实现的仿堆糖图片自滚动瀑布流效果

     

     

    1.引用样式文件css/lrtk.css

    2.引用jquery的库文件js/jquery.js

    3.引用效果的具体js代码文件js/lrtk.js

    4.将id为waterfall的DIV的内容复制到您的html文件

    5.图片流动速度,停留时间等参数可在lrtk.js里修改

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta content="text/html; charset=gb2312" http-equiv="Content-Type">
    <meta name="keywords" content="JS代码,仿堆糖图片自滚动瀑布流效果,JS广告代码,css垂直居中,div垂直居中,JS特效代码" />
    <meta name="description" content="此代码内容为仿堆糖图片自滚动瀑布流效果,属于站长常用代码,更多仿堆糖图片自滚动瀑布流效果代码请访问源码搜藏JS代码频道。" />
    <link rel=stylesheet type=text/css href="css/lrtk.css">
    <script type=text/javascript src="js/jquery.js"></script>
    <script type=text/javascript src="js/lrtk.js"></script>
    <title>仿堆糖图片自滚动瀑布流效果_源码搜藏</title>
    </head>
    <body>
    <!--代码开始-->
    <div id="content">
    <div id="waterfall" class="waterfall">
    <div class="dym-dl">
    <div class="dym"><img src="images/01.jpg" /></div>
    <div class="dym"><img src="images/02.jpg" /></div>
    <div class="dym"><img src="images/03.jpg" /></div>
    <div class="dym"><img src="images/04.jpg" /></div>
    <div class="dym"><img src="images/17.jpg" /></div>
    </div>
    <div class="dym-dl">
    <div class="dym"><img src="images/05.jpg" /></div>
    <div class="dym"><img src="images/06.jpg" /></div>
    <div class="dym"><img src="images/07.jpg" /></div>
    <div class="dym"><img src="images/08.jpg" /></div>
    </div>
    <div class="dym-dl">
    <div class="dym"><img src="images/09.jpg" /></div>
    <div class="dym"><img src="images/10.jpg" /></div>
    <div class="dym"><img src="images/11.jpg" /></div>
    <div class="dym"><img src="images/12.jpg" /></div>
    </div>
    <div class="dym-dl">
    <div class="dym"><img src="images/13.jpg" /></div>
    <div class="dym"><img src="images/14.jpg" /></div>
    <div class="dym"><img src="images/15.jpg" /></div>
    <div class="dym"><img src="images/16.jpg" /></div>
    </div>
    </div>
    </div>
    <!--代码结束-->
    <div style="text-align:center;margin:50px 0; font:normal 12px/2em '微软雅黑'">
        <p>来源:<a href="http://www.codesocang.com/" target="_blank">堆糖</a> 代码整理:<a href="http://www.codesocang.com/" target="_blank">源码搜藏</a> 感谢:<a href="http://www.iseedy.com/" target="_blank">爱看电影网</a></p>
        <p>*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p>
    </div>
    </body>
    </html>

     

     

     

     

     

    jQuery实现的仿堆糖图片自滚动瀑布流效果由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/xiangce/5496.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!