div+css+js实现类似marquee的无缝滚动代码示例
导读:
程序圈朋友,marquee无缝滚动想必大家都有见过,本文介绍了div+css+js,实现下类似的滚动且兼容firefox,喜欢的朋友加收藏。
用marquee实现首尾相连循环滚动效果代码:
<marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"
scrollamount="3" width="100" onmouseover="this.stop();" onmouseout="this.start();">
这里是要滚动的内容
</marquee>
用div+css+js实现首尾相连循环滚动效果代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox
</title>
<style type="text/css">
#scrollobj { white-space: nowrap; overflow: hidden; width: 500px; }
</style>
</head>
<body>
<div id="scrollobj" onmouseover="javascript:_stop();" onmouseout="javascript:_start();">
这里是要滚动的内容
</div>
<script language="javascript" type="text/javascript">
< !--
function scroll(obj) {
/*往左*/
var tmp = (obj.scrollLeft)++;
//当滚动条到达右边顶端时
if (obj.scrollLeft == tmp) {
obj.innerHTML += obj.innerHTML;
}
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (obj.scrollLeft >= obj.firstChild.offsetWidth) {
obj.scrollLeft = 0;
}
/*往上*/
//var tmp = (obj.scrollTop)++;
//if (obj.scrollTop == tmp) {
// obj.innerHTML += obj.innerHTML;
//}
//if (obj.scrollTop >= obj.firstChild.offsetWidth) {
// obj.scrollTop = 0;
//}
}
var _timer = setInterval("scroll(document.getElementById('scrollobj'))", 20);
function _stop() {
if (_timer != null) {
clearInterval(_timer);
}
}
function _start() {
_timer = setInterval("_scroll(document.getElementById('scrollobj'))", 20);
}
//-->
</script>
</body>
</html>
相关推荐
jquery插件Marquee.js实现无缝滚动效果代码分享
本文介绍胃jquery插件Marquee.js实现无缝滚动效果代码。Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果,配制代码如下:{ yScroll: "top" //…
2022-05-22 21:40:09 | 分类:默认 | 作者:myerob | 阅读:163 | 标签:jquery 插件 Marquee.js 实现 无缝 滚动 效果 | 收藏
CSS中设置height:100%无效的原因分析和解决方法
我们知道在把盒子宽度自适应为浏览器窗口宽度,只需设置width:100%就可轻松解决问题,但是让盒子的高度自适应浏览窗口的高度并非那么容易,下面举个例子:代码如下:<!-- 高度实际为字体大小 …
2022-10-30 12:24:34 | 分类:HTML,CSS | 作者:myerob | 阅读:1874 | 标签:CSS 设置 height:100% 无效 原因分析 解决方法 | 收藏
jQuery 滚动条插件nicescroll 使用方法、常见配置和事件回调使用说明
nicescroll是一款基于jQuery的滚动条插件,使用简单,功能强大,较mCustomScrollbar而言:资源文件少,只要一个jquery.nicescroll.min.js即可,无须css…
2022-12-05 22:16:17 | 分类:JS | 作者:myerob | 阅读:214 | 标签:jQuery nicescroll | 收藏
滚动条插件 NiceScroll 使用详解
有时为了保持页面风格的统一,我们需要修改滚动条的样式。虽然我们可以通过 CSS 设置滚动条各部分的颜色样式,但这种方式不支持老版本的浏览器。而且不同的浏览器下,CSS 滚动条属性的写法也不一样,如果各…
2022-12-05 22:23:19 | 分类:JS | 作者:myerob | 阅读:378 | 标签:滚动条插件 NiceScroll 使用详解 | 收藏