最新消息:

第57款插件:jquery.myscroll.js列表上下无缝滚动插件

高级页面 杨红伟 3566浏览 0评论

说明:此款插件只应用于列表形式的,因为在该插件有一个参数为rowHeight。

11

官方链接:无(从jsfoot.com上边进行下载的,然后我自己进行了包装)
JS下载http://www.ijquery.cn/js/jquery.myscroll.js
预览: http://www.ijquery.cn/demo/myscroll
打包下载:http://www.ijquery.cn/demo/myscroll/myscroll.zip
兼容浏览器:IE6+/Firefox/Chrome

参数:

speed:40,  //滚动速度,值越大速度越慢
rowHeight:24 //每行的高度

HTML代码:

[html]

<div>
<h2>jquery上下无缝滚动插件 列表溢出高度时 自动上下无缝滚动</h2>
<div>
<ul>
<li>
<em>01</em><p><a href="#">js图片左右无缝滚动用鼠标控制图片滚动</a></p><span>32万下载</span>
</li>
<li>
<em>02</em><p><a href="#">js无缝滚动制作js文字无缝滚动和js图片无缝滚动</a></p><span>32万下载</span>
</li>
<li>
<em>03</em><p><a href="#">jquery 滚动 kxbdSuperMarquee插件支持图片与文</a></p><span>32万下载</span>
</li>
<li>
<em>04</em><p><a href="#">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></p><span>32万下载</span>
</li>
<li>
<em>05</em><p><a href="#"> javascript滚动图片带按钮控制上下左右自动无缝滚动</a></p><span>32万下载</span>
</li>
<li>
<em>06</em><p><a href="#">jquery hover图片插件制作鼠标滑过标题单个展开图片效果</a></p><span>32万下载</span>
</li>
<li>
<em>07</em><p><a href="#">flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动</a></p><span>32万下载</span>
</li>
<li>
<em>08</em><p><a href="#">js lazyload实现网页图片延迟加载特效</a></p><span>32万下载</span>
</li>
<li>
<em>09</em><p><a href="#">FlippingBook电子杂志书去版权,翻页图片全部外调 站长珍藏版</a></p><span>32万下载</span>
</li>
<li>
<em>10</em><p><a href="#">门户网站jquery广告控制flash或图片顶部广告显示隐藏</a></p><span>32万下载</span>
</li>
</ul>
</div>

<h2>jquery上下无缝滚动插件 列表条数不够高度 不上下无缝滚动</h2>
<div>
<ul>
<li>
<em>01</em><p><a href="#">js图片左右无缝滚动用鼠标控制图片滚动</a></p><span>32万下载</span>
</li>
<li>
<em>02</em><p><a href="#">js无缝滚动制作js文字无缝滚动和js图片无缝滚动</a></p><span>32万下载</span>
</li>
<li>
<em>03</em><p><a href="#">jquery 滚动 kxbdSuperMarquee插件支持图片与文</a></p><span>32万下载</span>
</li>
<li>
<em>04</em><p><a href="#">javascript滚动图片插件支持单排图片上下滚</a></p><span>32万下载</span>
</li>
<li>
<em>05</em><p><a href="#"> javascript滚动图片带按钮控制上下左右自</a></p><span>32万下载</span>
</li>
</ul>
</div>
</div>

[/html]

JS代码:

[js]

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.myscroll.js"></script>
<script type="text/javascript">
$(function(){
$("div.ranklist").myScroll({
speed:40,
rowHeight:24
});
});
</script>

[/js]

CSS代码:

[css]

.demo{width:600px;margin:20px auto;border:solid 1px #ddd;padding:0 10px;}
.demo h2{font-size:14px;color:#333;height:30px;line-height:30px;padding:15px 0;color:#3366cc;}
/* ranklist */
.ranklist{height:200px;overflow:hidden;}
.ranklist li{height:16px;line-height:16px;overflow:hidden;position:relative;padding:0 70px 0 30px;margin:0 0 10px 0;text-align:left;}
.ranklist li em{background:url(mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;}
.ranklist li em{background-position:0 -16px;}
.ranklist li.top em{background-position:0 0;color:#fff;}
.ranklist li .num{position:absolute;right:0;top:0;color:#999;}

[/css]

 

 

 

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址