以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果。1、单行滚动效果
无标题文档
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
百度 www.baidu.com
脚本之家 www.jb51.net
这是公告标题的第三行
这是公告标题的第四行
这是公告标题的第五行
这是公告标题的第六行
这是公告标题的第七行
这是公告标题的第八行
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]二,多行滚动效果
无标题文档
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
多行滚动演示:
百度 www.baidu.com
脚本之家 www.jb51.net
这是公告标题的第三行
这是公告标题的第四行
这是公告标题的第五行
这是公告标题的第六行
这是公告标题的第七行
这是公告标题的第八行
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]三、可控制向前向后的多行滚动
无标题文档
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
多行滚动演示:
这是公告标题的第一行
这是公告标题的第二行
这是公告标题的第三行
这是公告标题的第四行
这是公告标题的第五行
这是公告标题的第六行
这是公告标题的第七行
这是公告标题的第八行
向前 向后
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
推荐阅读
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
前段时间写了一个 js数据验证、js email验证、js url验证、js长度验证、js数字验证等 弹出对话框形式的但是,现在不太流行那种很不友好的方式,于是重写了一个,封装得更加好的,更友好的层形式共享给大家,如果大家使用>>>详细阅读
本文标题:jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
地址:http://www.17bianji.com/kaifa2/JS/26369.html
1/2 1