讓網站圖片從右往左不間斷滾動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空間新浪微博騰訊微博人人網微信
產品服務

欣網網絡的小伙伴們隨時為您待命

2019十大信誉棋牌评测网 期货配资合法吗 新快3计划软件 足球竞彩半全场* 南洋股份东方财富股吧 陕西丫丫麻将苹果 福州麻将下载 靶场射击多少钱 甘肃十一选五玩法 吉林十一选五开奖结 02年世界杯 fps射击游戏 期货配资软件 股票融资融券实盘操作 金韵期货 武汉晃晃麻将技巧 四川熊猫麻将官方网版