摘要:使用jquery实现的循环连续可停顿滚动,并应用于滚动图片,滚动层。记得一定要有jquery库哦~一、单行滚动 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
使用jquery实现的循环连续可停顿滚动,并应用于滚动图片,滚动层。记得一定要有jquery库哦~
一、单行滚动html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
无标题文档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;}
-->
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;}
-->
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
- 这是公告标题的第一行
- 这是公告标题的第二行
- 这是公告标题的第三行
- 这是公告标题的第四行
- 这是公告标题的第五行
- 这是公告标题的第六行
- 这是公告标题的第七行
- 这是公告标题的第八行
二、多行滚动html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
无标题文档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;}
-->
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;}
-->
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
多行滚动演示:
- 这是公告标题的第一行
- 这是公告标题的第二行
- 这是公告标题的第三行
- 这是公告标题的第四行
- 这是公告标题的第五行
- 这是公告标题的第六行
- 这是公告标题的第七行
- 这是公告标题的第八行
三、可控制向前向后的多行滚动html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
无标题文档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;}
-->
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;}
-->
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
多行滚动演示:
- 这是公告标题的第一行
- 这是公告标题的第二行
- 这是公告标题的第三行
- 这是公告标题的第四行
- 这是公告标题的第五行
- 这是公告标题的第六行
- 这是公告标题的第七行
- 这是公告标题的第八行
向前 向后
更多关于使用jquery实现的循环连续可停顿滚动实例请关注PHP中文网(www.php.cn)其他文章!