js-滚动字幕 (文字跑马灯效果 推送)

滚动字幕

这里写图片描述

自动滚动和滚动速度及设置鼠标悬停

js-滚动字幕 (文字跑马灯效果 推送)_第1张图片

添加内容

js-滚动字幕 (文字跑马灯效果 推送)_第2张图片

跑马灯时间

js-滚动字幕 (文字跑马灯效果 推送)_第3张图片

ready()方法

js-滚动字幕 (文字跑马灯效果 推送)_第4张图片

文字跑马灯插件liMarquee.js

HTML中引入jQuery.liMarquee.js和liMarquee.css



    
    
    
    文字跑马灯效果
    
    
    
    
    


    
百度 京东 哈气 妹子 美女
js属性设置说明 


$(function(){
    /**
     * 属性设置:
     * direction滚动的方向,left、right、up、down
     * scrollamount滚动的速度,数值,数值越小越慢
     * circular是否无缝滚动,true、false
     * drag是否禁止拖动,true、false
     * runshort内容不足是否滚动,true、false
     * hoverstop鼠标悬停是否停止滚动,true、false
     * inverthover反向,即鼠标悬停滚动
     * 自定义事件:pause、play、destroy、update
     *      eg:$dowebok.liMarquee('pause');
     */
    $(".content").liMarquee({
        direction: "left",//默认left
        scrollamount: 10,//默认
        circular: true,//默认true
        drag: false,//默认true
        runshort: false,//默认true
        hoverstop: true,//默认true
        inverthover: false,//默认true
    });
})
css文件:
.content{
    width: 150px;
    }

你可能感兴趣的:(js-滚动字幕 (文字跑马灯效果 推送))