代码: 文字滚动,简版
2016-05-31 10:42
316 查看
.offset()返回的是相对于document的位置
.position()返回的是相对于父元素的位置
文字滚动(文字滚屏)小效果:
改写成对象型:
..
.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>
..
相关文章推荐
- VC++ 兼容性 资料收集
- 李洪强-C语言3-数组
- 学会阅读Java字节码
- PHP并发IO编程之路
- PHP header使用
- 李洪强-C语言2-字符串
- QTreeView中finditems查找子项
- 注解
- Spring对Hibernate事务管理
- 李洪强-C语言1-指针
- MyEclipse10.6 myeclipse2013下添加jadClipse反编译插件
- Python学习之基础总结--2
- Python3 几个常见问题
- python3下安装Django
- Python 多进程 多线程
- spring-mybatis多数据源配置出错
- OC语言1-前期准备
- Java集合之整体结构
- C++文件读写详解(ofstream,ifstream,fstream)
- C++this指针