php滚动显示停顿,使用jquery实现的循环连续可停顿滚动实例

使用jquery实现的循环连续可停顿滚动，并应用于滚动图片，滚动层。记得一定要有jquery库哦~

一、单行滚动

无标题文档

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;}

• 这是公告标题的第一行
• 这是公告标题的第二行
• 这是公告标题的第三行
• 这是公告标题的第四行
• 这是公告标题的第五行
• 这是公告标题的第六行
• 这是公告标题的第七行
• 这是公告标题的第八行

二、多行滚动

无标题文档

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;}

多行滚动演示：

• 这是公告标题的第一行
• 这是公告标题的第二行
• 这是公告标题的第三行
• 这是公告标题的第四行
• 这是公告标题的第五行
• 这是公告标题的第六行
• 这是公告标题的第七行
• 这是公告标题的第八行

三、可控制向前向后的多行滚动

无标题文档

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;}

多行滚动演示：

• 这是公告标题的第一行
• 这是公告标题的第二行
• 这是公告标题的第三行
• 这是公告标题的第四行
• 这是公告标题的第五行
• 这是公告标题的第六行
• 这是公告标题的第七行
• 这是公告标题的第八行

向前 向后

本文原创发布php中文网，转载请注明出处，感谢您的尊重！