html代码
<div class="content_left"> <div class="content_shop_announcement"> <div class="content_shop_announcement_img">商品公告</div> <div class="content_shop_announcement_text"> 欢迎光临手机网,我们的宗旨:诚信经营、服务客户! <br/> <br/> <div class="content_shop_announcement_div"> 咨询电话:010-11111111111 010-22222222222 </div> </div> </div> </div>
css代码
.content .content_left{ width: 200px; height: auto; } .content .content_left .content_shop_announcement{ position: relative; top: 5px; width: 200px; height: 150px; border: 1px solid powderblue; background-color: powderblue; box-shadow: 0px 0px 3px powderblue; } .content .content_left .content_shop_announcement .content_shop_announcement_img{ width: 100%; height: 30px; color: darkcyan; text-align: center; position: relative; padding-top: 5px; background-color: deepskyblue; } .content .content_left .content_shop_announcement .content_shop_announcement_text{ width: 180px; height:95px; background-color:white; color: black; font-size:10px; padding: 10px; overflow: hidden ; } .content .content_left .content_shop_announcement .content_shop_announcement_div{ width: 300px; height: 15px; position: relative; left: 180px; color: red; }
js代码
/** * js特效--》文字滚动类 * @param obj * @constructor */ function Rolling(obj){ var direction="left"; //文字滚动的方向 this.obj=obj; var scrollingSpeed; //文字每次滚动多少px var element; //需要滚动的元素 } Rolling.prototype={ constructor:Rolling, //初始化 init:function(){ if(this.obj["direction"]!="undefined"){ this.direction=this.obj["direction"]; } if(this.obj["scrollingSpeed"]!="undefined"){ this.scrollingSpeed=this.obj["scrollingSpeed"]; } if(this.obj["element"]!="undefined"){ this.element=this.obj["element"]; } this.scrollingSpeed=10; }, //元素滚动 moveDiv:function(){ this.init(); switch (this.direction){ case "left": this.leftMove(); break; } } //向左移动 ,leftMove:function(){ var left=parseInt(this.element.css("left")); left=left-this.scrollingSpeed; if(left<-230){ this.element.css({"left":180+"px"}); }else{ this.element.css({"left":left+"px"}); } },rightMove:function(){ },topMove:function(){ },bottomMove:function(){ } }调用代码
var div=$(".content_shop_announcement_div"); var rolling=new Rolling({"direction":"left","color":"red","element":div}); var time=setInterval(function(){ rolling.moveDiv(); },300); div.mouseover(function(){ clearInterval(time); }).mouseout(function(){ time=setInterval(function(){ rolling.moveDiv(); },300); });