DIV+CSS图片不延续滚动jquery殊效一直从右往左迁移转变图片,横向不连气儿一直滚动CSS特效,运用JQ+DIV实现十分合用简单兼容各大涉猎器的图片不一连迁移转变殊效(CSS+JQ不连续转动图片殊效篇)。
DIV CSS+JQ不一连转动图片特效截图
始终不陆续图片迁移转变殊效的特点:
CSS5收拾整顿收集不间断从右往左转折jquery+DIV+CSS特效,鼠标经过不竭动弹图片刻(悬停时)图片中止转动,鼠标移开图文形式持续不一连转动运用DIV CSS+JQ实现图片转折特效。
1、HTML代码以下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>不连续图片滚动在线演示 CSS5</title>
- <link href="images/style.css" rel="stylesheet" type="text/css" />
- <!-- css5.com.cn -->
- <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 });
- // CSS5暗示:10px代表间距,第二个20代表动弹速度
- });
- </script>
- </head>
- <body>
- <div id="mrq">
- <!-- HTML注解 CSS5揭示:殊效DIV最先 -->
- <div id="Marquee_x">
- <ul>
- <li>
- <div> <a href="//www.css5.com.cn/" target="_blank"><img src="images/i1.jpg" /> <span>CSS5学习</span></a> </div>
- <div> <a href="//www.css5.com.cn/" target="_blank"><img src="images/i2.jpg" /> <span>CSS深造上CSS5</span></a> </div>
- <div><a href="#" target="_blank"><img src="images/i3.jpg" /> <span>案例演示</span></a></div>
- <div><a href="//www.css5.com.cn/jiqiao/" target="_blank"><img src="images/i4.jpg" /> <span>CSS才力</span></a></div>
- <div><a href="//www.css5.com.cn/texiao/" target="_blank"><img src="images/i5.jpg" /> <span>CSS特效</span></a></div>
- <div><a href="//www.css5.com.cn/jianrong/" target="_blank"><img src="images/i6.jpg" /> <span>CSS hack</span></a></div>
- <div><a href="//www.css5.com.cn/shili/" target="_blank"><img src="images/i7.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>
- <!-- CSS5暗指:殊效DIV竣事 -->
- </div>
- </body>
- </html>
以上HTML源代码,在只有一个LI标签内每一个DIV包裹一组图文数据,切记只重要应用一个ul li列表,一切动弹图片数据放到这组li列表标签内。此不一连转折特效可管制每组图文数据之间间距,可以或许管束图片迁移转变速度。
2、CSS代码:
- @charset "utf-8";
- /* CSS5-CSS初始化模板-css5.com.cn */
- body, div, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}
- /* CSS批注注明:\5B8B\4F53 代表 宋体,更多中文字体转 Unicode //www.css5.com.cn/jiqiao/325.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}
- #Marquee_x ul li div span{ display:block;}
按照需求修改CSS抵达自己所须要的机关目的,比如批改边框、margin、图片高度、图片宽度等
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c52374.shtml