声明:第一次写原创,本人初学,很多地方一知半解,本篇算是一个学习的笔记,欢迎批评指正,转载请注明。

今天要做的效果是在网上经常能看到多幅图片向左无缝滚动,鼠标滑过动画暂停,鼠标滑出动画继续的效果。网上现成的代码和插件很多,拿来用有时候不大顺手,今天我就来学习一下它的原理。

要实现这个效果:
1、需要一个展示区,滚动的内容只有通过展示区才能被看到id=visual_area
2、把滚动的内容横向排列的载体,我们姑且叫它画布,注意不能理解PS中的画布class=scroll_area
3、看起来要滚动的内容id=scroll_content

见上图,可以想象#scroll_content,共有4块要滚动的内容,就好像内容1,2,3,4手拉手通过可视区,如果让内容4滚动出可视区,再重新滚动,则会出现一段时间的空白,怎么处理呢,今天的例子中采取用复制滚动内容补位的方法,由于补位的内容同#scroll_content一模一样,肉眼看起来好像连续不断的滚动一样,为什么好多js滚动效果我们拿过来改成自己的css样式,出现跳动,就是这个原因。

上面我提到了,“看起来要滚动的内容”,其实在本例中并不是#scroll_content在滚动,而是可视区滚动条的水平位置每隔一段时间设置加大一些,如每隔1000毫秒加大200像素,水平滚动条的位置最左是0,向右不断增加。

下面看一个例子,例子中我用橙色区做可视区,css设置显示滚动条overflow:scroll而不是 hidden,彩虹色部分做画布,在我们向右不断拖动滚动条时,画布看起来就向左滚动起来了。

本例中为了便于观察,我把补位的内容标注了一下。
HTML结构:

<div id="visual_area">
<div class="scroll_area">
<ul id="scroll_content">
<li><p>内容1</p></li>
<li><p>内容2</p></li>
<li><p>内容3</p></li>
</ul>
<ul>
<li><p>补位1</p></li>
<li><p>补位2</p></li>
<li><p>补位3</p></li>
</ul>
</div>
</div>

见下图:#visual_area滚动条的值超过#scroll_content宽度时候,滚动条的值设置为0,然后继续增加,如此循环往复,看起来就是一个连续的滚动,如果补位1的内容和内容1一样样的,对我们来说就没有跳动。

CSS写法:

* { padding:; margin: 0 }
#visual_area { width: 600px; height: 150px; background: #333; margin: 100px auto; overflow: hidden; }
#visual_area ul { background: #fff; float: left }
#visual_area li { list-style: none; float: left; width: 200px; height: 150px; line-height: 150px; text-align: center; }
#visual_area li p { background: #ccc; width: 198px; height: 148px; border: 1px solid #000 }
.scroll_area { width: 4000px; height: 150px }

.scroll_area的宽度只要大一些,一定要超过#scroll_content和补位内容的宽度。

Javascript写法:

$(function(){
var roll=function(){
var o_place=$('#visual_area').scrollLeft();
var n_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像素(步长),是一个很慢速并且感觉有些跳的滚动,要实现比较细腻平滑的效果,时间间隔和步长尽量小一些,调整这两个数值会出现很多有趣的效果,有兴趣的可以试一试。
需要说明的是:
 var o_place=$('#visual_area').scrollLeft();
 var n_place=o_place+200;

为什么要这样做呢?
setInterval函数在页面加载后的1秒后,获取可视区滚动条位置,滚动条位置设置为+200,所以执行一次roll函数滚动条位置加200,加了200之后的滚动条位置大于等于滚动内容的宽度就把滚动条位置归0.

作者: 刘牧云

日期: 2015年12月 11日

jQuery实现滚动效果详解1的更多相关文章

  1. js实现的新闻列表垂直滚动实现详解

    js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...

  2. 第15.29节 PyQt(Python+Qt)入门学习:containers容器类部件QScrollArea滚动区域详解

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 Scroll Area提供了一个呈现在其他部件上的可滚动区域视图,滚动区域用于显示框架内的 ...

  3. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  4. jQuery的deferred对象详解

    jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...

  5. jQuery的deferred对象详解(转载)

    本文转载自: jQuery的deferred对象详解(转载)

  6. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  7. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  8. jQuery的deferred对象详解(一)

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

  9. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

随机推荐

  1. 移动web开发框架

    纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族 ...

  2. lua语言三则特性

    pack和unpack 对于一个函数, 要将其入参转换为一个表, 则pack函数合适. 对于一个表要将其转换为 一个函数的入参, 则 lua原生提供的 unpack函数可以实现. do arrayDa ...

  3. 学习OpenCV——HOG+SVM

    #include "cv.h" #include "highgui.h" #include "stdafx.h" #include < ...

  4. 用oop分析场景,写出代码。房间里,有人、猫、老鼠在睡觉,然后猫醒了发出叫声,叫声惊醒了人,人从床上坐起来,惊醒了老鼠,老鼠开始逃跑。

    首先分析有哪些类: 应该有房子.动物类.人类.猫类.老鼠类. 房子不仅仅是一个容器,因为猫在房子里叫,惊醒了人和老鼠,所以猫叫是一个事件,通过这个事件触发人和老鼠的惊醒. 可以定义一个委托,利用委托绑 ...

  5. MVC 4 异步编程简化了

    MVC 3 异步编程好麻烦,需要使用异步控制器,一个Action需要拆成两个,很不方便.MVC3的好处是,只需要.NET Framework 4.0就能运行 MVC 4 之后只需要使用async和aw ...

  6. Dynamics AX 2012 R2 RemoteApp导出项目报错

        今天,Reinhard使用RemoteApp的方式登陆AX开发环境,对项目文件进行修改后,习惯性地将项目导出到Reinhard的电脑上,做个备份.但是导出时弹出错误提示框,报以下错误:     ...

  7. Mac下面的SecureCRT(附破解方案) 更新到最新的8.0.2

    继续更新到8.0.2的破解,整体的破解方案都发生了的变化首先还是去 http://macabc.com/detail.htm?app_id=24 下载最新的8.0.2介于很多小白说替换之后说文件损坏, ...

  8. php实现回复图文,图片,文字

      [代码]php代码: <?php /** 微信公众平台 开发者模式 默认用户输入任何文字,均返回同一个图文信息,链接地址为手机站; 可以根据变量$keyword,即用户输入的信息,进行判断, ...

  9. arraylist与linkedlist的区别与性能测试

    /** *arraylist和linkedlist的适用场合. **/ import java.util.List; import java.util.ArrayList; import java.u ...

  10. easyui datagrid 仿ext—右键

    var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* gri ...