博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第45款插件:waterfall.js瀑布流布局单排图片自动滚动
阅读量:7221 次
发布时间:2019-06-29

本文共 2267 字,大约阅读时间需要 7 分钟。

hot3.png

描述:jquery仿堆糖网瀑布流图片布局,设置单排图片上下对齐图片自动上下交替滚动效果。单排图片按左右顺序上下图片自动滚动。
图片展示:
兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:
JS下载:
预览:
打包下载:
参数说明:
down: true,
focus: "cur",
index: 0,
event: "click",
mouseleavedo: false,
async: false,
wait: 4000,
gap: 4000,
anidelay: 14000,
anitime: 1800,
autodelay: 3000
JS引用代码:
<script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ijquery.360sites.cn/js/waterfall.js"></script>
<script type="text/javascript">
$(function() {
$("#waterfall").waterfall("div.dym-dl", {index: 3})
});
</script>
HTML代码:
<div id="waterfall" class="waterfall">
<div class="dym-dl">
<div class="dym"><a href="#"><img src="images/01.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/02.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/03.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/04.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/17.jpg" /></a></div>
</div>
<div class="dym-dl">
<div class="dym"><a href="#"><img src="images/05.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/06.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/07.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/08.jpg" /></a></div>
</div>
<div class="dym-dl">
<div class="dym"><a href="#"><img src="images/09.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/10.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/11.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/12.jpg" /></a></div>
</div>
<div class="dym-dl">
<div class="dym"><a href="#"><img src="images/13.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/14.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/15.jpg" /></a></div>
<div class="dym"><a href="#"><img src="images/16.jpg" /></a></div>
</div>
</div>
CSS代码:
.waterfall{width:972px;}
.dym-dl{width:231px;height:520px;padding-right:12px;float:left;overflow:hidden;position:relative;}
.dym{border:1px solid #efeff0;background:#f7f7f7;height:auto;padding:14px;margin:0px 12px 12px 0px;float:left;overflow:hidden;display:inline;}
.dym img{max-width:200px;_width:200px;}

转载于:https://my.oschina.net/54programmer/blog/112158

你可能感兴趣的文章
golang 获取get参数
查看>>
服务器状态码
查看>>
非小型电子商务系统设计经验分享
查看>>
Video Target Tracking Based on Online Learning—深度学习在目标跟踪中的应用
查看>>
深度学习理论解释基础
查看>>
遗传算法
查看>>
将web网站移动化
查看>>
Application-Session-Cookie
查看>>
Perl的多进程框架(watcher-worker)
查看>>
phpMyAdmin 后台拿webshell
查看>>
Linux 关机 休眠, 关闭移动设备自动挂载 命令
查看>>
Html唤起手机APP,如果有就唤起,如果没有就跳到下载页。
查看>>
Java中File类如何扫描磁盘所有文件包括子目录及子目录文件
查看>>
VC++ 限制窗口的大小范围的方法
查看>>
结对开发-返回一个整数数组中最大子数组的和(首尾相接版)
查看>>
meanshift-聚类
查看>>
不要if else的编程
查看>>
rn.ShowDialog() == DialogResult.OK
查看>>
20160519
查看>>
SCU 3132(博弈)
查看>>