自己写过很多插件,但都是直接嵌入在了工程里,从来没有拿出来单独封装成一个文件过,这是第一次,希望是一个良好的开端。
一个文字过长而可以左右滚动的插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
width:200px;
overflow:hidden;
}
span{
display: inline-block;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
width: auto;
text-align: right;
}
</style>
<body>
<div class="font-scroll"><span>剪影的你轮廓太好看,忍住眼泪才敢细看</span></div>
<div class="font-scroll"><span>剪影的你轮廓太好看,忍住眼泪才敢细看</span></div>
<div class="font-scroll"><span>剪影的你轮廓太好看,忍住眼泪才敢细看</span></div>
</body>
<script src="./jquery.min.js"></script>
<script src="./font-scroll.js"></script>
</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)
}
})
})