当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 基于jQuery图片平滑连续滚动插件

Javascript
innerHTML和innerText的用法
单击按钮复制定义好的内容到剪贴板
浏览器兼容性:停止事件冒泡和阻止浏览器的默认行为
javascript初学者:全面学习对象概念
10款图片展示Javascript代码
解决ajax跨域问题的实例
rails制作rss feed
javascript变量作用域在不同浏览器的处理
网页整理的JS技巧代码
js操作iframe的src的例子
Javascript利用循环绑定事件的例子
Javascript网页恶意代码
javascript恶意代码修改主页修复
JavaScript折叠式列表的网页制作
初学Javascript的总结
JavaScript编程实践中容易出错的地方
JavaScript容易犯错的九个陷阱
复制文章自动附加版权信息
MooTools教程(1):认识MooTools
MooTools教程(2):DOM选择器

Javascript 中的 基于jQuery图片平滑连续滚动插件


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 264 ::
收藏到网摘: n/a

彦磊基于jQuery图片平滑滚动插件(2009.04) 在IE6/IE7/Mozilla 5.0(Firefox 3.0.5)中测试通过 * 此插件要求运行在jQuery v1.3 或更高版本上
* 插件可以实现图片平滑向上或向左滚动
* 如果您需要更多的效果或在使用中本插件存在BUG,可以给在彦磊的博客上留言,彦磊将尽自己最大努力完善此插件
* 您留言前请先到:http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件 
* 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果
* 彦磊图片平滑滚动插件只是对jcarousellite插件的补充
*
*
* 技术支持:HTTP://HI.BAIDU.COM/DPXDQX
* 此为自由拷贝版本,您可以在此基础上添加任何功能
* 彦磊建议您将修改过的版本或发布地址发到彦磊博客上以共享,也建议您保留部分彦磊的信息
*
*
* 此插件没有象jcarousellite插件样对相关元素的CSS全自动设置,部分CSS样式需要您为设置
* 原因很简单:您需要考虑部分用户的浏览器不支持JAVASCRIPT或相关功能被禁用
* 您需要让您的页面元素布局在此时也能显示正确,因此必要的CSS设置还需要您自己来做。
*
* 使用前您一定要引入jQurey及本脚本,如
* <script type="text/javascript" src="js/jquery_last.js"></script>
* <script type="text/javascript" src="js/YlMarquee.js">
* 使用方法:
*
* 1、为您要设置滚动的对象设置容器,并命名class,如class="ylMarquee"
* 2、将您要滚动的对象置入<ul></ul>中,并添加li标签,li标签中可以是图片、文字或表格……
* 3、此版本需要您设置每个li列表的宽度或高度一至
* <div class="ylMarquee">
* <ul>
* <li><img src="image/1.jpg" alt="1"></li>
* <li><img src="image/2.jpg" alt="2"></li>
* <li><img src="image/3.jpg" alt="3"></li>
* </ul>
* </div>
* 4、设置ylMarquee的height或width样式——向上滚动必须设置height的大小,向左滚动必须设置width的大小,否则页面将显示不正常。
* 5、在页面中添加jQuery语句,调用此插件,并对相关参数进行设置,如:
* <script type="text/javascript">
* $(document).ready(function(){
* $(".stroll").jMarquee({
* visible:3,
* step:1,
* direction:"left"
* });
*});
* </script>
* 6、插件相关参数:
* visible:页面可见元素(图片)个数,默认为1,必须参数。
* step:滚动步长,整数,默认为1,增大此数可加快滚动速度,设为0,则不进行滚动。
* direction:滚动方向,有"left"(向左滚动)和"up"(向上滚动)两个参数,注意设置时一定要加英文的双引("")号或单引号('')。
*/
演示地址:http://img.ruanchen.com/"/upload/tech/20091012/20091012094956_e995f98d56967d946471af29d7bf99f1.js">/upload/tech/20091012/20091012094956_e995f98d56967d946471af29d7bf99f1.js