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


發佈了28 篇原創文章 · 獲贊 2 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章