万户资源科技
万汇资源微信公众号

微信扫码有惊喜!

文字无缝滚动特效

lwting 2015-12-24 技术

       jQuery里 slide标签实现文字无缝滚动特效

<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"></script>
</head>

<body>

        <style type="text/css">
        /* css 重置 */
        *{margin:0; padding:0; list-style:none; }
        body{ background:#fff; font:normal 12px/22px 宋体;  }
        img{ border:0;  }
        a{ text-decoration:none; color:#333;  }
        a:hover{ color:#1974A1;  }
        /* 本例子css */
        .txtMarquee-top{ width:450px;  overflow:hidden; position:relative;  border:1px solid #ccc;   }
        .txtMarquee-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
        .txtMarquee-top .hd .prev,.txtMarquee-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
             cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
        .txtMarquee-top .hd .next{ background-position:0 -140px;  }
        .txtMarquee-top .hd .prevStop{ background-position:-60px -100px;  }
        .txtMarquee-top .hd .nextStop{ background-position:-60px -140px;  }
        .txtMarquee-top .bd{ padding:15px;  }
        .txtMarquee-top .infoList li{ height:24px; line-height:24px;   }
        .txtMarquee-top .infoList li .date{ float:right; color:#999;  }
        </style>

        <div class="txtMarquee-top">
            <div class="hd">
                <a class="next"></a>
                <a class="prev"></a>
            </div>
            <div class="bd">
                <ul class="infoList">
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语:会说中文就能说英语!</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语,上北外!</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
                </ul>
            </div>
        </div>

        <script type="text/javascript">
            jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:5,interTime:50});
        </script>

2015-12-24_200804.jpg

文章关键词
jQuery
文字滚动
qq qq tel
服务热线:

134-1954-9128