admin 管理员组文章数量: 887021
2023年12月17日发(作者：access是什么意思呀)
声明：第一次写原创，本人初学，很多地方一知半解，本篇算是一个学习的笔记，欢迎批评指正，转载请注明。今天要做的效果是在网上经常能看到多幅图片想左无缝滚动，鼠标滑过动画暂停，鼠标滑出动画继续的效果。网上现成的代码和插件很多，拿来用有时候不大顺手，今天我就来学习一下它的原理。要实现这个效果：1、需要一个展示区，滚动的内容只有通过展示区才能被看到id=visual_area2、把滚动的内容横向排列的载体，我们姑且叫它画布，注意不能理解PS中的画布class=scroll_area3、看起来要滚动的内容id=scroll_content见上图，可以想象，#scroll_content，共有块要滚动的内容，就好像内容1,2,3,4手拉手通过可视区，如果让内容4滚动出可视区，再重新滚动，则会出现一段时间的空白，怎么处理呢，今天的例子中采取用复制滚动内容补位的方法,由于补位的内容同#scroll_content一模一样，肉眼看起来好像连续不断的滚动一样，为什么好多js滚动效果我们拿过来改成自己的css样式，出现跳动，就是这个原因。上面我提到了，“看起来要滚动的内容”，其实在本例中并不是#scroll_content在滚动，而是可视区滚动条的水平位置每隔一段时间设置加大一些，如每隔1000毫秒加大200像素，水平滚动条的位置最左是0，向右不断增加。下面看一个例子，例子中我用橙色区做可视区，css设置显示滚动条overflow:scroll而不是hidden，彩虹色部分做画布，在我们向右不断拖动滚动条时，画布看起来就向左滚动起来了。
本例中为了便于观察，我把补位的内容标注了一下。HTML结构：见下图：#visual_area滚动条的值超过#scroll_content宽度时候，滚动条的值设置为0，然后继续增加，如此循环往复，看起来就是一个连续的滚动，如果补位1的内容和内容1一样样的，对我们来说就没有跳动。CSS写法：
*{padding:0;margin:0}#visual_area{width:600px;height:150px;background:#333;margin:100pxauto;overflow:hidden;}#visual_areaul{background:#fff;float:left}#visual_areali{list-style:none;float:left;width:200px;height:150px;line-height:150px;text-align:center;}#visual_arealip{background:#ccc;width:198px;height:148px;border:1pxsolid#000}.scroll_area{width:4000px;height:150px}.scroll_area的宽度只要大一些，一定要超过#scroll_content和补位内容的宽度。Javascript写法:$(function(){varroll=function(){varo_place=$('#visual_area').scrollLeft();varn_place=o_place+200;if(n_place<$('#scroll_content').width()){$('#visual_area').scrollLeft(n_place);}else{$('#visual_area').scrollLeft(0);}}setInterval(roll,1000);})在详解1中，我制作一个最简单的无缝滚动效果，鼠标滑入滑出的处理在详解2中继续说明，因为我自己是个初学者，很多时候都是边学习边记录的。setInterval函数说明，本例中经过1000毫秒（时间间隔）向左滚动200像素（步长），是一个很慢速并且感觉有些跳的滚动，要实现比较细腻平滑的效果，时间间隔和步长尽量小一些，调整这两个数值会出现很多有趣的效果，有兴趣的可以试一试。需要说明的是：varo_place=$('#visual_area').scrollLeft();varn_place=o_place+200;为什么要这样做呢？setInterval函数在页面加载后的1秒后，获取可视区滚动条位置，滚动条位置设置为+200，所以执行一次roll函数滚动条位置加200，加了200之后的滚动条位置大于等于滚动内容的宽度就把滚动条位置归0.
作者：刘牧云日期：2015年12月11日
版权声明：本文标题：JQUERY实现滚动效果原理详解1 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1702794853h431199.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论