关于广告滚动条的css和js（老男孩儿随笔）

开题废话一段，此js是我跟群里的单鱼要的，感觉不错，上来分享一下，如果有疑问可以到群（115180614）里一起探讨一下，js的有单鱼大神（dota大神，嘎嘎）哦。

下面贴代码。。。。

 

    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript">
        $( function () {
             var _wrap = $('.gonggao ul');
             var _interval = 2000;
             var _moving;
            _wrap.hover( function () {
                clearInterval(_moving);
            },  function () {
                _moving = setInterval( function () {
                     var _field = _wrap.find('li:first');
                     var _h = _field.width();
                     // animate() 方法执行 CSS 属性集的自定义动画
                    _field.animate({ marginLeft: -_h + 'px' }, 600,  function () {
                        _field.css('marginLeft', 0).appendTo(_wrap);
                    })
                }, _interval);
            }).trigger('mouseleave');
        });

    </script>
    <style type="text/css">
        .gonggao
        {
            height: 32px;
            overflow: hidden;
            }
        .gonggao ul {list-style:none;} 
        .gonggao ul li {  float:left; font-size:14px; } 

    </style>

View Code

 

<div  class= " gonggao ">
        <ul >
            <li><a href= " Default.aspx " target= " _blank ">xt****获得奖品v3v户外70L户外背...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 08****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">zj****获得奖品诗梦丹 羽丝绒被 保暖...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">kf****获得奖品BANGDI 邦蒂 手...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">A萨****获得奖品诗梦丹 羽丝绒被 保暖...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 67****获得奖品韩国进口魔法森林ton...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 67****获得奖品韩国进口魔法森林ton...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">cz****获得奖品iles男士羽绒服防风...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">sq****获得奖品CLICK秋冬针织加厚...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 09****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 15****获得奖品CLICK秋冬针织加厚...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">M美****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 11****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">3n****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">jy****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">jy****获得奖品Aichiw 爱奇屋 ...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">jy****获得奖品Paiter百特智能快...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">w9****获得奖品EURO-DePRO欧...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">wh****获得奖品Paiter百特智能快...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">w4****获得奖品韩国进口魔法森林ton...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">xu****获得奖品悠豆6000毫安移动电源一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">qb****获得奖品Tectop探拓者户外...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">lu****获得奖品BANGDI 邦蒂 手...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">qa****获得奖品v3v户外70L户外背...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">wa****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 67****获得奖品韩国进口魔法森林ton...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">yu****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">jz****获得奖品BANGDI 邦蒂 手...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">笑笑****获得奖品韩国进口魔法森林ton...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">笑笑****获得奖品韩国进口魔法森林ton...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">jz****获得奖品925银镀18K金镶嵌...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">wu****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">2c****获得奖品CLICK秋冬针织加厚...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">c4****获得奖品EURO-DePRO欧...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">BC****获得奖品Golf 高尔夫  10...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">aq****获得奖品EURO-DePRO欧...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">L罗****获得奖品韩国进口魔法森林ton...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">bl****获得奖品CLICK秋冬针织加厚...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 18****获得奖品Pivoful 浦诺菲...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">la****获得奖品Eupa 灿坤蒸气电熨斗一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">ti****获得奖品TEYIN特茵折叠复合...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">笑笑****获得奖品CLICK秋冬针织加厚...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 17****获得奖品BANGDI 邦蒂 手...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 19****获得奖品Welhome惠家He...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 19****获得奖品福瑞康 高精度传感系统...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 20****获得奖品BANGDI 邦蒂 手...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 12****获得奖品Welhome惠家He...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 52****获得奖品Welhome惠家He...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 10****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">d0****获得奖品iles男士羽绒服防风...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 65****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 66****获得奖品Welhome惠家He...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 11****获得奖品港版奶粉雅培皇牌恩美力...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">3j****获得奖品EURO-DePRO欧...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">xi****获得奖品Paiter百特智能快...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 47****获得奖品Golf 高尔夫  10...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 63****获得奖品EURO-DePRO欧...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">笑笑****获得奖品韩国进口魔法森林ton...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">jz****获得奖品南极人男士立领冬装薄款...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">优雅****获得奖品EURO-DePRO欧...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 50****获得奖品Golf 高尔夫  10...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">ti****获得奖品TEYIN特茵折叠复合...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">3b****获得奖品雪精灵抽屉式全棉8件套...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">1b****获得奖品Aichiw 爱奇屋 ...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">6豆****获得奖品Aichiw 爱奇屋 ...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 86****获得奖品Paiter百特智能快...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">su****获得奖品天蜗可调光 阿波罗太空...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">li****获得奖品TEYIN特茵折叠复合...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 18****获得奖品南极人男士立领冬装薄款...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">zu****获得奖品EKS 易健氏 人体电...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 54****获得奖品TEYIN特茵折叠复合...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">弓俊****获得奖品罗曼风情短靴/雪地靴/...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">lu****获得奖品高妃(GAOFEI)纯...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 22****获得奖品韩国进口魔法森林ton...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">1d****获得奖品CEDEKE汽车家居空...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">cs****获得奖品Golf 高尔夫  10...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">高小****获得奖品CEDEKE汽车家居空...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">fy****获得奖品CLICK秋冬针织加厚...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">li****获得奖品EURO-DePRO欧...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 43****获得奖品CEDEKE汽车家居空...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">su****获得奖品CEDEKE汽车家居空...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">yu****获得奖品TEYIN特茵折叠复合...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">yu****获得奖品TEYIN特茵折叠复合...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">浅浅****获得奖品TEYIN特茵折叠复合...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">zh****获得奖品TEYIN特茵折叠复合...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">oc****获得奖品TEYIN特茵折叠复合...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">gu****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">dq****获得奖品高妃(GAOFEI)纯...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">xu****获得奖品天蜗可调光 阿波罗太空...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">zh****获得奖品EURO-DePRO欧...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">dq****获得奖品高妃(GAOFEI)纯...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">A0****获得奖品CEDEKE汽车家居空...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">A0****获得奖品CEDEKE汽车家居空...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">ca****获得奖品英国进口Bomb Co...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">凤凰****获得奖品韩国进口魔法森林ton...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">Zc****获得奖品英国进口Bomb Co...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">高高****获得奖品CEDEKE汽车家居空...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">oc****获得奖品Pivoful 浦诺菲...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">yu****获得奖品Pivoful 浦诺菲...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">wo****获得奖品杜蕾斯durex避孕套...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">心灵****获得奖品红米 28纳米四核1....一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">yu****获得奖品CLICK秋冬针织加厚...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">Fa****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">gi****获得奖品Aichiw 爱奇屋 ...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">Di****获得奖品Povos奔腾电吹风P...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">Ci****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">小燕****获得奖品杜蕾斯durex避孕套...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">小燕****获得奖品锦和家橄榄枝毛巾2条装一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">高兴****获得奖品Paiter百特智能快...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">wi****获得奖品Pivoful 浦诺菲...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">高兴****获得奖品贝得赫 薰衣草养生枕一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">徐依****获得奖品CLICK秋冬针织加厚...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">李娇****获得奖品景德镇彩瓷四件套陶瓷把...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">fr****获得奖品v3v白金级超保暖鸭绒...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">li****获得奖品Aichiw 爱奇屋 ...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 18****获得奖品CLICK秋冬针织加厚...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank "> 68****获得奖品Golf 高尔夫  10...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">ch****获得奖品谷韵米乳益智型铁罐（每...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">fa****获得奖品谷韵米乳益智型铁罐（每...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">se****获得奖品谷韵米乳益智型铁罐（每...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">se****获得奖品iPad mini  7...一件----------</a></li>
            <li><a href= " Default.aspx " target= " _blank ">se****获得奖品MAL麦勒防水电磁炉一件----------</a></li>
        </ul>
    </div>

View Code

 

 

转载于:https://www.cnblogs.com/theMaxBear/p/3510627.html