您的位置:首页 > 编程语言

代码: 文字滚动,简版

2016-05-31 10:42 316 查看
.offset()返回的是相对于document的位置

.position()返回的是相对于父元素的位置

文字滚动(文字滚屏)小效果:

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
#demo{position:relative;width:120px;height:200px;border:1px solid #ececec;font-size:16px;line-height:20px;font-family:'微软雅黑';overflow:hidden;}
#demo11{position:absolute;width:6em;}
</style>
<br><br><br>
<div id="demo">
<div id="demo11">
1366****1111
1366****1111
1366****1111
1366****2222
1366****2222
1366****2222
1362****6666
1362****6666
1362****6666
1366****7777
1366****7777
1366****7777
1368****8888
1368****8888
1368****8888
</div>
</div>
<script>
$(function(){
function mar(){
//var H = $("#demo11").height()- $("#demo").height() +20;
var H = $("#demo11").height();
var top = $("#demo11").position().top;
top--;
if(top<(-1*H)){top=$("#demo").height();}
$("#demo11").css('top',top);
console.log('H:'+H+'---top:'+top+'---'+$("#demo11").position().top);
}
var timer=setInterval(mar,50);
$("#demo").mouseover(function(){
clearInterval(timer);
});
$("#demo").mouseout(function(){
timer=setInterval(mar,50);
});
});
</script>


改写成对象型:

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
#demo{position:relative;width:120px;height:200px;border:1px solid #ececec;font-size:16px;line-height:20px;font-family:'微软雅黑';overflow:hidden;}
#demo11{position:absolute;width:6em;}
</style>
<br><br><br>
<div id="demo">
<div id="demo11">
1366****1111
1366****1111
1366****1111
1366****2222
1366****2222
1366****2222
1362****6666
1362****6666
1362****6666
1366****7777
1366****7777
1366****7777
1368****8888
1368****8888
1368****8888
</div>
</div>
<script>
$(function(){
var txtMarquee = {
timer:null,
_box:null,
_boxH:null,
_txt:null,
_txtH:null,

init:function(_box,_txt){
txtMarquee._box = _box;
txtMarquee._txt = _txt;
txtMarquee._boxH = _box.height();
txtMarquee._txtH = _txt.height();
//txtMarquee._txtH = _txt.height() - _box.height() + 20;

txtMarquee.timer=setInterval(txtMarquee.mar,50);
_box.mouseover(function(){
clearInterval(txtMarquee.timer);
});
_box.mouseout(function(){
txtMarquee.timer=setInterval(txtMarquee.mar,50);
});
},
mar:function(){
var top = txtMarquee._txt.position().top;
top--;
if(top<(-1*txtMarquee._txtH)){top = txtMarquee._boxH;}
txtMarquee._txt.css('top',top);
//console.log('H:'+txtMarquee._txtH+',   top:'+top+'   ,  '+$("#demo11").position().top);
}
}
txtMarquee.init($("#demo"),$("#demo11"));
});
</script>


..
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: