您的位置:首页 > 网页特效 > 【 返回上一页

DIV+CSS图片不间断滚动jquery特效不停从右往左滚动图片特效

DIV+CSS图片不间断滚动jquery特效不停从右往左滚动图片,横向不间断不停滚动CSS特效,使用JQ+DIV实现非常实用简单兼容各大浏览器的图片不间断滚动特效(CSS+JQ不间断滚动图片特效篇)。


DIV CSS+JQ不间断滚动图片特效截图

不停不间断图片滚动特效的特点:
ThinkCSS整理收集不间断从右往左滚动jquery+DIV+CSS特效,鼠标经过不断滚动图片时(悬停时)图片停止滚动,鼠标移开图文内容继续不间断滚动使用DIV CSS+JQ实现图片滚动特效。

1、HTML代码如下:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>不间断图片滚动在线演示 ThinkCSS</title> 
  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
  7. <!-- www.thinkcss.com --> 
  8. <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
  9. <script src="jQuery-jcMarquee.js" type="text/javascript"></script> 
  10. <script> 
  11. $(function(){ 
  12.     $('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':20 }); 
  13.     // thinkcss提示:10px代表间距,第二个20代表滚动速度 
  14. }); 
  15. </script> 
  16. </head> 
  17. <body> 
  18. <div id="mrq"> 
  19. <!-- HTML注释 thinkcss提示:特效DIV开始 --> 
  20.     <div id="Marquee_x"> 
  21.         <ul> 
  22.             <li> 
  23.                 <div>
    <a href="http://www.thinkcss.com/" target="_blank"><img src="images/i1.jpg" />
    <span>thinkcss学习</span></a>
    </div> 
  24.                 <div>
    <a href="http://www.thinkcss.com/" target="_blank"><img src="images/i2.jpg" />
    <span>CSS学习上thinkcss</span></a>
    </div> 
  25.                 <div><a href="#" target="_blank"><img src="images/i3.jpg" />
    <span>案例演示</span></a></div> 
  26.                 <div><a href="http://www.thinkcss.com/jiqiao/" target="_blank"><img src="images/i4.jpg" />
    <span>CSS技巧</span></a></div> 
  27.                 <div><a href="http://www.thinkcss.com/texiao/" target="_blank"><img src="images/i5.jpg" />
    <span>CSS特效</span></a></div> 
  28.                 <div><a href="http://www.thinkcss.com/jianrong/" target="_blank"><img src="images/i6.jpg" />
    <span>CSS hack</span></a></div> 
  29.                 <div><a href="http://www.thinkcss.com/shili/" target="_blank"><img src="images/i7.jpg" />
    <span>DIV+CSS实例</span></a></div> 
  30.                 <div><a href="#" target="_blank"><img src="images/i8.jpg" />
    <span>滚动案例演示</span></a></div> 
  31.                 <div><a href="#" target="_blank"><img src="images/i9.jpg" />
    <span>演示内容</span></a></div> 
  32.             </li> 
  33.         </ul> 
  34.     </div> 
  35. <!-- thinkcss提示:特效DIV结束 --> 
  36. </div> 
  37.  
  38. </body> 
  39. </html> 

以上HTML源代码,在只有一个LI标签内每个DIV包裹一组图文数据,切记只需要使用一个ul li列表,所有滚动图片数据放到这组li列表标签内。此不间断滚动特效可控制每组图文数据之间间距,可以控制图片滚动速度。

2、CSS代码:

  1. @charset "utf-8"; 
  2. /* ThinkCSS-CSS初始化模板-www.thinkcss.com */ 
  3. body, div, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 
  4. /* CSS注释说明:\5B8B\4F53 代表 宋体,更多中文字体转 Unicode http://www.thinkcss.com/jiqiao/325.shtml */ 
  5. ol, ul ,li{list-style:none} 
  6. img {border: 0; vertical-align:middle} 
  7. body{color:#000000;background:#FFF; text-align:center} 
  8. .clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px} 
  9. a{color:#000000;text-decoration:none}  
  10. a:hover{color:#BA2636;text-decoration:underline} 
  11.  
  12. #mrq{width:925px; margin:20px auto;border:1px solid #000; padding:2px} 
  13. #Marquee_x { overflow:hidden; width: 925px }  
  14. #Marquee_x ul li ,#Marquee_x ul li div{ float:left;line-height:25px;overflow:hidden} /* 横向滚动必须让所有li左浮动 */ 
  15. #Marquee_x ul li div{ float:left;line-height:25px;height:131px; width:142px; overflow:hidden} 
  16. #Marquee_x ul li div img{ border:1px solid #DADADA; width:140px; height:105px; display:block} 
  17. #Marquee_x ul li div span{ display:block;} 

根据需求修改CSS达到自己所需要的布局目的,比如修改边框margin图片高度图片宽度

3、在线演示查看案例

4、不间断滚动图片特效打包下载

相关标签: 不间断滚动 图片滚动
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/texiao/656.shtml

日期:2014-02-24 17:44:42 来源:www.thinkcss.com 作者:ThinkCSS

热门点击