html js文字左右滚动插件

Posted on 2016-08-28 12:25  Magin  阅读(2072)  评论(0)  编辑  收藏  举报

自己写过很多插件，但都是直接嵌入在了工程里，从来没有拿出来单独封装成一个文件过，这是第一次，希望是一个良好的开端。

 

一个文字过长而可以左右滚动的插件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <style>
 8     div{
 9         width:200px;
10         overflow:hidden;
11     }
12     span{
13         display: inline-block;
14         word-break:keep-all;           /* 不换行 */
15         white-space:nowrap;          /* 不换行 */
16         width: auto;
17         text-align: right;
18     }
19 </style>
20 <body>
21     <div class="font-scroll"><span>剪影的你轮廓太好看，忍住眼泪才敢细看</span></div>
22     <div class="font-scroll"><span>剪影的你轮廓太好看，忍住眼泪才敢细看</span></div>
23     <div class="font-scroll"><span>剪影的你轮廓太好看，忍住眼泪才敢细看</span></div>
24 </body>
25 <script src="./jquery.min.js"></script>
26 <script src="./font-scroll.js"></script>
27 </html>
/**Magin 2016/8/28 */

$(function(){
    function fontLeft(e){
        $(e).children('span').css('magin-left','0px')
         $(e).children('span').animate({
                marginLeft:parseFloat($(e).css('width'))-parseFloat($(e).children('span').css('width'))-12
            },2000,"linear",function(){
                fontRight(e);
            })
    }
    function fontRight(e){
        $(e).children('span').css('magin-left',parseFloat($(e).css('width'))-parseFloat($(e).children('span').css('width')));
        $(e).children('span').animate({
                marginLeft:'12px'
            },2000,"linear",function(){
                fontLeft(e);
            })
    }
    $('.font-scroll').each(function(){if($(this).children('span').css('width')>$(this).css('width')){
        fontLeft(this)
        }
    })
})