html js文字左右滚动插件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html js文字左右滚动插件相关的知识，希望对你有一定的参考价值。
自己写过很多插件，但都是直接嵌入在了工程里，从来没有拿出来单独封装成一个文件过，这是第一次，希望是一个良好的开端。
一个文字过长而可以左右滚动的插件
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) } }) })
以上是关于html js文字左右滚动插件的主要内容，如果未能解决你的问题，请参考以下文章