首页 > 代码库 > html js文字左右滚动插件
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文字左右滚动插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。