原生js实现水平方向无缝滚动

前端之家收集整理的这篇文章主要介绍了原生js实现水平方向无缝滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

水平方向无缝滚动

滚动支持图片文字

原理 :

一个大的盒子中放置两个盒子,通过设置offsetWidth,scrollLeft的关系来实现,而且还用到定时器函数setInterval,当手指移动上去定义滚动,离开继续滚动。兼容各大浏览器。 HTML代码

CSS代码

Javascript代码

} var timer = setInterval(Marquee,speed); tab.onmou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ver = function(){ clearInterval(timer); }; tab.onmou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut = function(){ timer = setInterval(Marquee,speed); }

}

效果图:

效果就是一直滚动。

注意:内容的宽度必须大于容器的宽度,否则无法滚动,测试文字一般是使用ajax后台获取

原文链接:https://www.f2er.com/js/42676.html

猜你在找的JavaScript相关文章