Heim >Web-Frontend >js-Tutorial >jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery

jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery

WBOY
WBOYOriginal
2016-05-16 17:44:211357Durchsuche

原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现。后来又喜欢上了jquery,下面写的内容希望对初学者有些帮助,高手勿喷,但欢迎指导,感激不尽。

原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果。然后通过整个大容器滚动条的左右或者上下的移动来实现滚动。下面附上一张手绘的图,来简要阐述下原理。首先,我们的目的是实现框1中的内容水平向左滚动(向右滚动,上下滚动的原理其实大致是一样的,只要知道其中一种,其他都不是问题。)。那么我们在页面加载的时候就用js动态将框2中的内容(html内容)赋值成和框1的内容一样。然后随着滚动条的渐渐地往右移动,来实现向左的效果。说了这么多。等会就附上代码(配有注释)。
jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery 
1.html代码

复制代码 代码如下:




juqery实现marquee的效果










jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery
jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery
jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery
jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery
jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery
jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery
jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery






Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn