让网站图片从右往左不间断滚动DIV+CSS+jquery特效分享
作者:温州网站建设   发布时间:2016-10-25  浏览:

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

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

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>不间断图片滚动在线演示 DIVCSS5</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
<!-- www.divcss5.com --> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script src="jQuery-jcMarquee.js" type="text/javascript"></script> 
<script> 
$(function(){ 
    $('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':20 }); 
    // DIVCSS5提示:10px代表间距,第二个20代表滚动速度 
}); 
</script> 
</head> 
<body> 
<div id="mrq"> 
<!-- HTML注释 divcss5提示:特效DIV开始 --> 
    <div id="Marquee_x"> 
        <ul> 
            <li> 
                <div>
<a href="/uploadfile/201610/25/67172620999.jpg" />
<span>DIVCSS5学习</span></a>
</div> 
                <div>
<a href="/uploadfile/201610/25/AC172621433.jpg" />
<span>CSS学习上DIVCSS5</span></a>
</div> 
                <div><a href="#" target="_blank"><img src="images/i3.jpg" />
<span>案例演示</span></a></div> 
                <div><a href="/uploadfile/201610/25/29172622923.jpg" />
<span>CSS技巧</span></a></div> 
                <div><a href="/uploadfile/201610/25/B6172622991.jpg" />
<span>CSS特效</span></a></div> 
                <div><a href="/uploadfile/201610/25/4F172622882.jpg" />
<span>CSS hack</span></a></div> 
                <div><a href="/uploadfile/201610/25/A5172623512.jpg" />
<span>DIV+CSS实例</span></a></div> 
                <div><a href="#" target="_blank"><img src="images/i8.jpg" />
<span>滚动案例演示</span></a></div> 
                <div><a href="#" target="_blank"><img src="images/i9.jpg" />
<span>演示内容</span></a></div> 
            </li> 
        </ul> 
    </div> 
<!-- divcss5提示:特效DIV结束 --> 
</div> 
</body> 
</html> 
以上HTML源代码,在只有一个LI标签内每个DIV包裹一组图文数据,切记只需要使用一个ul li列表,所有滚动图片数据放到这组li列表标签内。此不间断滚动特效可控制每组图文数据之间间距,可以控制图片滚动速度。
 
css代码部分:
 
@charset "utf-8"; 
/* DIVCSS5-CSS初始化模板-www.divcss5.com */ 
body, div, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 
/* CSS注释说明:\5B8B\4F53 代表 宋体,更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */ 
ol, ul ,li{list-style:none} 
img {border: 0; vertical-align:middle} 
body{color:#000000;background:#FFF; text-align:center} 
.clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px} 
a{color:#000000;text-decoration:none}  
a:hover{color:#BA2636;text-decoration:underline} 
 
#mrq{width:925px; margin:20px auto;border:1px solid #000; padding:2px} 
#Marquee_x { overflow:hidden; width: 925px }  
#Marquee_x ul li ,#Marquee_x ul li div{ float:left;line-height:25px;overflow:hidden} /* 横向滚动必须让所有li左浮动 */ 
#Marquee_x ul li div{ float:left;line-height:25px;height:131px; width:142px; overflow:hidden} 
#Marquee_x ul li div img{ border:1px solid #DADADA; width:140px; height:105px; display:block} 
分享到:QQ空间新浪微博腾讯微博人人网微信
产品服务

欣网网络的小伙伴们随时为您待命