js特效--》文字左右滚动

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);
});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值