html,js实现简单的跑马灯特效

 

html

	<div class="i-partner">
				<div class="i-l-list-title">
					<div>
						<span th:text="${@redisUtils.getLangValue('ME_INDEX_PAGE_partner')}">合作伙伴</span>
						<div class="w110"></div>
					</div>
				</div>
				<div class="w1000 split-line"></div>
				<div class="i-partner-div">
					<div class="i-partner-scroll">
						<ul>
							<li>
								<a target="_blank" shape="rect" href="http://www.china-shftz.gov.cn/Homepage.aspx"><div class="bg1 bg-size"></div></a>
								<a target="_blank" shape="rect" href="http://www.shclearing.com"><div class="bg2 bg-size"></div></a> 
								<a target="_blank" shape="rect" href="http://www.ftzwarrant.com/shdc_ftz_web"><div class="bg3 bg-size"></div></a>
								<a target="_blank" shape="rect" href="http://www.juneyao.com/"><div class="bg7 bg-size"></div></a>
								<a target="_blank" shape="rect" href="http://www.baosteelresources.com/baogang/new_web/html/home.php"><div class="bg8 bg-size"></div></a> 
								<a target="_blank" shape="rect" href="http://www.yantaiport.com.cn/gfgs/"><div class="bg9 bg-size"></div></a>
								<a target="_blank" shape="rect" href="http://www.shgt.com/"><div class="bg10 bg-size"></div></a>
								<a target="_blank" shape="rect" href="http://www.hoitung.com.hk/"><div class="bg11 bg-size"></div></a> 
							</li>
						</ul>
					</div>
				</div>
			</div>

 js

$(function(){
　　//合作伙伴滚动
   horizontalScoll('.i-partner-scroll');
}
//滚动-水平跑马灯
 function horizontalScoll(divBoxSelector){
     var obj_gun=$(divBoxSelector);
     var oldWidth=$(divBoxSelector+' li').get(0).offsetWidth;
     var iW=$(divBoxSelector).width();
     var speed=0;
     obj_gun.iTime=true;

     var oldHtml=$(divBoxSelector+' li').eq(0).html();
     var iddd=Math.ceil(iW/oldWidth)+1;


     for(var i=0; i<iddd;i++)
     {
         var $li=$('<li>');
         $li.html(oldHtml);
         $(divBoxSelector+' ul').append($li);
         /*console.log(iW/oldWidth)*/
     }

     $(divBoxSelector+' ul').css('width',oldWidth*(iddd+1));

     obj_gun.iTime=setInterval(obj_gunFn,10);

     obj_gun.hover(function(){
         clearInterval(obj_gun.iTime);
     },function(){
         obj_gun.iTime=setInterval(obj_gunFn,10);
     })
     function obj_gunFn(){
         if(speed==-oldWidth)
         {
             speed=0;
         }
         else{
             speed--;
         }
         $(divBoxSelector+' ul').css({'left':speed});
     }
 }

css

.i-partner {
    width: 1010px;
    height: 115px;
    margin: 15px auto;
}
.i-partner-div {
    width: 1010px;
    height: 110px;
    margin-top: 10px;
    text-align: center;
}
.i-partner-scroll {
    position: relative;
    overflow: hidden;
    z-index: 2;
    float: left;
    width: 1003px;
    height: 75px;
    line-height: 75px;
}

.i-partner-scroll ul {
    position: absolute;
　　 width: 99999999999999999px; /*足够长,ul才能排成一行*/
}

.i-partner-scroll div {
    float: left;
    width: 235px;
    height: 60px;
    position: relative;
    overflow: hidden;
    z-index: 2;
    line-height: 38px;
    margin: 5px 10px 8px 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: #666 0px 0px 3px;
    -moz-box-shadow: #666 0px 0px 3px;
    box-shadow: #666 0px 0px 3px;
    border: 1px solid gray;
}
.i-partner-div .bg1 {background: url(../img/index/fan_hh_1.png) center no-repeat;}
.i-partner-div .bg2 {background: url(../img/index/fan_hh_2.png) center no-repeat;}
.i-partner-div .bg3 {background: url(../img/index/fan_hh_3.png) center no-repeat;}
.i-partner-div .bg4 {background: url(../img/index/fan_hh_4.png) center no-repeat;}
.i-partner-div .bg5 {background: url(../img/index/fan_hh_5.png) center no-repeat;}
.i-partner-div .bg6 {background: url(../img/index/fan_hh_6.png) center no-repeat;}
.i-partner-div .bg7 {background: url(../img/index/JuneYao_com.png) center no-repeat;}
.i-partner-div .bg8 {background: url(../img/index/baowu_com.png) center no-repeat;}
.i-partner-div .bg9 {background: url(../img/index/yantai_com.png) center no-repeat;}
.i-partner-div .bg10 {background: url(../img/index/ouyeel_com.png) center no-repeat;}
.i-partner-div .bg11 {background: url(../img/index/zhaoShangJu_com.png) center no-repeat;}
.i-partner-div .bg-size{background-size: 245px 70px;}