DIV+CSS+JS不间断横向滚动实现代码
更新时间：2013年03月19日 14:39:11 作者：
不间断横向滚动想必大家在很多场合都有见过吧，本文也使用DIV+CSS+JS实现一个，感兴趣的你可以参考下哈，希望对你学习有所帮助
DIV+CSS+JS实现不间断横向滚动代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>横向不间断滚动DIV CSS代码-DIVCSS5</title>
</head>
<body>
<style>
.scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div img {width:120px;height:49px;border: 0;margin: auto 8px; }
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/* 设置ul和li横排 */
</style>
<script language="javascript">
function ScrollImgLeft(){
var speed=20
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar)}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
<h2 align="center"><a href="http://www.divcss5.com/">DIVCSS5</a>演示说明：向左滚动</h2>
<div style="text-align:center">
<div class="sqBorder">
<!--#####滚动区域#####-->
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="div css" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="divcss" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="CSS" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="divcss5" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->
</div>
<script type="text/javascript">ScrollImgLeft();</script>
</div>
<!--//向左滚动代码结束-->
</body></html>
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>横向不间断滚动DIV CSS代码-DIVCSS5</title>
</head>
<body>
<style>
.scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div img {width:120px;height:49px;border: 0;margin: auto 8px; }
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/* 设置ul和li横排 */
</style>
<script language="javascript">
function ScrollImgLeft(){
var speed=20
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar)}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
<h2 align="center"><a href="http://www.divcss5.com/">DIVCSS5</a>演示说明：向左滚动</h2>
<div style="text-align:center">
<div class="sqBorder">
<!--#####滚动区域#####-->
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="div css" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="divcss" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="CSS" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="divcss5" /></a></li>
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->
</div>
<script type="text/javascript">ScrollImgLeft();</script>
</div>
<!--//向左滚动代码结束-->
</body></html>
您可能感兴趣的文章:
- div+css布局的图片连续滚动js实现代码
- div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
- js DIV滚动条随机位置的设置技巧
- JS实现div内部的文字或图片自动循环滚动代码
- 分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码
- javascript用DIV模拟弹出窗口_窗体滚动跟随
- Javascript实现DIV滚动自动滚动到底部的代码
- js+div实现图片滚动效果代码
- js固定DIV高度,超出部分自动添加滚动条的简单方法
- js+div实现文字滚动和图片切换效果代码
- 基于JavaScript实现div层跟随滚动条滑动
- js防止DIV布局滚动时闪动的解决方法
- JS实现的DIV块来回滚动效果示例
相关文章
这篇文章主要介绍了从setTimeout看js函数执行过程,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了微信小程序实现身份证取景框拍摄，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
一直让我困扰的是，我不知道如何去让这个效果 自动播放，或者费了很多周折。这可能叫初始化。2010-05-05
拖拽是前端实现中比较常用的一种效果, HTML5 提供了较为强大的拖拽 API 支持,今天我们来实现一个简单的拖拽效果,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了javascrip+HTML5 Canvas绘制转盘抽奖的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
本文给大家介绍js事件详解，涉及到事件流，事件处理，事件对象等方面的知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
Angular组件拿不到@Input输入属性问题探究解决方法
最近在工作中实现一个feature的时候，碰到一个小问题：Angular组件拿不到@Input输入属性的问题，尽管对这些问题都比较了解，但是找问题是需要一个过程的，所以还是把这个问题总结记录了下2023-01-01
这篇文章主要介绍了细述Javascript的加法运算符的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
本文主要介绍了js前端URL含有特殊字符的转码的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
本文给大家分享JS中用childNodes获取子元素换行会产生一个子元素的实例代码，需要的朋友参考下2016-12-12
最新评论