html js文字左右滾動插件

時間 2019-12-09

標籤 html 文字左右滾動插件欄目 HTML 简体版

原文原文鏈接

本身寫過不少插件，但都是直接嵌入在了工程裏，歷來沒有拿出來單獨封裝成一個文件過，這是第一次，但願是一個良好的開端。css

一個文字過長而能夠左右滾動的插件html

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