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

2019-09-08 郑州网站建设  

DIV+CSS图片不延续滚动jquery殊效一直从右往左迁移转变图片,横向不连气儿一直滚动CSS特效,运用JQ+DIV实现十分合用简单兼容各大涉猎器的图片不一连迁移转变殊效(CSS+JQ不连续转动图片殊效篇)。

css不停不间断滚动特效效果图


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>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1194.html转载请标明出处,谢谢合作!
标签:
  • 图片
  • jQuery
  • 滚动
  • 特效
  • 不间断
  • 不停
  • 从右
  • 往左