自己写过很多插件，但都是直接嵌入在了工程里，从来没有拿出来单独封装成一个文件过，这是第一次，希望是一个良好的开端。
一个文字过长而可以左右滚动的插件
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)
}
})
})
时间： 2024-10-30 15:41:36