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

Javascript
javascript模仿msgbox提示效果代码
javascript table美化鼠标滑动单元格变色
告诉大家什么是JSON
json 定义
json跟xml的对比分析
jQuery实用技巧
JQuery实现自定义对话框的代码
强烈推荐240多个jQuery插件提供下载
豆瓣网的jquery代码实例
使用 JavaScript 创建可维护的幻灯片效果代码
动感超强的JS图片轮换特效
一个小型js框架myJSFrame附API使用帮助
Javascript入门学习第二篇 js类型
Javascript入门学习第三篇 js运算
Javascript入门学习第四篇 js对象和数组
jQuery基础教程笔记适合js新手
图片自动缩小 点击放大
非常不错的功能强大代码简单的管理菜单美化版
js 新浪的一个图片播放图片轮换效果代码
javascript import css实例代码

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 360 ::
收藏到网摘: 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