jQuery滚动停顿滚动效果

最新推荐文章于 2022-08-14 22:32:19 发布

原创最新推荐文章于 2022-08-14 22:32:19 发布 · 730 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #旅游 #function #timer #xhtml #html

JavaScript And jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文提供了一个使用jQuery实现的滚动效果示例代码，该效果在滚动过程中带有停顿，使得整体视觉感受更加舒适。代码中详细展示了如何设置定时滚动，并在鼠标悬停时暂停滚动。

jQuery滚动效果，带停顿的，比起不间断滚动看上去更舒服点。

代码如下，复制保存成HTML文件可直接看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery滚动停顿滚动效果</title>  <mce:script type="text/javascript" src="http://123.juntoo.com/public/home/js/jquery.js" mce_src="http://123.juntoo.com/public/home/js/jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="scrollDiv" style="width:200px; height:100px; overflow:hidden; border:1px solid #060"> <ul> <li style="height:24px">·<a href="http://123.juntoo.com/" mce_href="http://123.juntoo.com/" target="_blank" title="旅游网站导航">旅游网站导航</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/guoneihangkonggongsi/" mce_href="http://123.juntoo.com/html/guoneihangkonggongsi/" target="_blank" title="国内航空公司">国内航空公司</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/geditechan/" mce_href="http://123.juntoo.com/html/geditechan/" target="_blank" title="全国各地特产介绍">全国各地特产介绍</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/lvyoujingdian/index.htm" mce_href="http://123.juntoo.com/html/lvyoujingdian/index.htm" target="_blank" title="旅游景点">旅游景点</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/zhutilvyou/index.htm" mce_href="http://123.juntoo.com/html/zhutilvyou/index.htm" target="_blank" title="主题旅游">主题旅游</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/guoneihangkonggongsi/" mce_href="http://123.juntoo.com/html/guoneihangkonggongsi/" target="_blank" title="国内航空公司">国内航空公司</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/lvyoujingdian/index.htm" mce_href="http://123.juntoo.com/html/lvyoujingdian/index.htm" target="_blank" title="旅游景点">旅游景点</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/geditechan/" mce_href="http://123.juntoo.com/html/geditechan/" target="_blank" title="全国各地特产介绍">全国各地特产介绍</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/" mce_href="http://123.juntoo.com/" target="_blank" title="旅游网站导航">旅游网站导航</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/geditechan/" mce_href="http://123.juntoo.com/html/geditechan/" target="_blank" title="全国各地特产介绍">全国各地特产介绍</a> </li> </ul> </div> </body> </html>