在页面上看到过很多的滚动效果

日期:2020-05-15编辑作者:北京pk赛车网站-web前端

在页面上看到过很多的滚动效果,比如向上、下、左、右滚动。不同的产品用到不同的效果,今天介绍下jQuery无缝间歇向上滚动的方法。不多说,干货拿起:

首先看HTML代码,如下:

.renav{width:200px;height:150px;line-height:21px;overflow:hidden;background:#FFFFFF;}.renavli{height:21px;}Web前端之家Web前端之家Web前端之家1Web前端之家2Web前端之家3Web前端之家4Web前端之家Web前端之家

然后看下JS代码,如下:

${var$this=$;varscrollTimer;$this.hover{clearInterval;},function(){scrollTimer=setInterval{scrollNews.trigger;});functionscrollNews{var$self=obj.find;varlineHeight=$self.find.height();$self.animate({"margin-top":-lineHeight+"px"},600,function(){$self.css({"margin-top":"0px"}).find.appendTo}

我们新建一个文件,然后把代码复制进去即可了,别忘了调用下jQuery库文件。这里特别要强调的,列表的内容高度要比我们外框架的高度要高,否则会出现闪动的问题。

本文由北京pk赛车官网下载发布于北京pk赛车网站-web前端,转载请注明出处:在页面上看到过很多的滚动效果

关键词:

于是就得使用一下方法来处理

近期做了写移动端的视觉差动画页面,并且还要求是响应式的,这个对于前端是要求非常高的,但是我们发现在横屏...

详细>>

说到移动和PC端中的hover处理问题

最近都忙死了,好久都没更新博客了。今天还是想提下移动端的问题:hover选择器。 说到移动和PC端中的hover处理问题,...

详细>>

只不过当网页内容高度小于等于clientHeight

几天前和兄弟一同商量了一下横向和竖向图片滚动的代码,很提神,因为解决了多少个小问题首先个:for{ document.ge...

详细>>

促使了WIN7称为了主流

一款产品的好坏,取决于很多因素,但是我想说的是,如果你不了解市场行情,比如大家都在用什么浏览器,多大电...

详细>>