html js文字左右滾動插件

本文轉載自查看原文 2016-08-28 12:25 1472 前端

自己寫過很多插件，但都是直接嵌入在了工程里，從來沒有拿出來單獨封裝成一個文件過，這是第一次，希望是一個良好的開端。

一個文字過長而可以左右滾動的插件

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS實現文字左右滾動 jquery文字左右滾動 Taro -- 文字左右滾動公告效果 JS+CSS實現左右文字滾動頁碼中的數字和文字左右交替顯示 ScrollPic.js——圖片左右滾動插件 js實現文字無間斷左右滾動和圖片左右滾動 jquery.flexslider.js帶左右箭頭且帶按鈕可滾動的圖片插件文字的無縫上下、左右滾動 iOS UIButton 圖片文字左右互移位置對調解決方案