编程 Javascript

DIV+CSS+JS不间断横向滚动实现代码

Posted in Javascript onMarch 19, 2013

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>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Mootools 1.2教程同时进行多个形变动画

Sep 15 Javascript

跟着JQuery API学Jquery 之二属性

Apr 09 Javascript

js简单实现用户注册信息的校验代码

Nov 15 Javascript

JavaScript中函数（Function）的apply与call理解

Jul 08 Javascript

asp知识整理笔记3（问答模式）

Sep 27 Javascript

jQuery 3.0十大新特性

Jul 06 Javascript

Javascript中的对象和原型(二)

Aug 12 Javascript

jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑

Nov 29 Javascript

jQuery输入框密码的显示隐藏【代码分享】

Apr 29 jQuery

详解使用angularjs的ng-options时如何设置默认值(初始值)

Jul 18 Javascript

如何选择适合你的JavaScript框架

Nov 20 Javascript

在vue项目实现一个ctrl+f的搜索功能

Feb 28 Javascript

下载文件个别浏览器文件名乱码解决办法

Mar 19 #Javascript

jQuery点击tr实现checkbox选中的方法

Mar 19 #Javascript

js多级树形弹出一个小窗口层(非常好用)实例代码

Mar 19 #Javascript

Javascript中valueOf与toString区别浅析

Mar 19 #Javascript

Javascript Throttle & Debounce应用介绍

Mar 19 #Javascript

JS 实现获取打开一个界面中输入的值

Mar 19 #Javascript

打开新窗口关闭当前页面不弹出关闭提示js代码

Mar 18 #Javascript

You might like

PHP的消息通信机制测试实例

2016/11/10 PHP

一段实现页面上的图片延时加载的js代码

2010/02/11 Javascript

IE6不能修改NAME问题的解决方法

2010/09/03 Javascript

利用Keydown事件阻止用户输入实现代码

2014/03/11 Javascript

jQuery中prev()方法用法实例

2015/01/08 Javascript

JQuery中绑定事件（bind()）和移除事件（unbind()）

2015/02/27 Javascript

javascript学习笔记整理（概述、变量、数据类型简介）

2015/10/25 Javascript

js创建jsonArray传输至后台及后台全面解析

2016/04/11 Javascript

Jquery实现的简单轮播效果【附实例】

2016/04/19 Javascript

全面解析Angular中$Apply()及$Digest()的区别

2016/08/04 Javascript

微信小程序 MINA文件结构

2016/10/17 Javascript

微信小程序教程之模板

2016/10/18 Javascript

Javascript设计模式之装饰者模式详解篇

2017/01/17 Javascript

vue 数组和对象不能直接赋值情况和解决方法(推荐)

2017/10/25 Javascript

Layui组件Table绑定行点击事件和获取行数据的方法

2018/08/19 Javascript

vue init webpack 建vue项目报错的解决方法

2018/09/29 Javascript

详解如何使用nvm管理Node.js多版本

2019/05/06 Javascript

Openlayers绘制地图标注

2020/09/28 Javascript

答题辅助python代码实现

2018/01/16 Python

python学习基础之循环import及import过程

2018/04/22 Python

一行代码让 Python 的运行速度提高100倍

2018/10/08 Python

详解程序意外中断自动重启shell脚本（以Python为例）

2019/07/26 Python

python使用opencv实现马赛克效果示例

2019/09/28 Python

HTML5中语义化 b 和 i 标签

2008/10/17 HTML / CSS

web字体加载方案优化小结

2019/11/29 HTML / CSS

关于canvas.toDataURL 在iOS运行失败的问题解决

2020/09/16 HTML / CSS

Melissa鞋英国官方网站：Nonnon

2019/05/01 全球购物

Sport-Thieme荷兰：购买体育用品

2019/08/25 全球购物

最新大学生自我评价

2013/09/24 职场文书

上学迟到的检讨书

2014/01/11 职场文书

《跨越百年的美丽》教学反思

2014/02/11 职场文书

先进党支部申报材料

2014/12/24 职场文书

2016幼儿园中班开学寄语

2015/12/03 职场文书

医院中层管理人员培训心得体会

2016/01/11 职场文书

告诉你创业计划书的8个实用技巧

2019/07/12 职场文书

python中字符串String及其常见操作指南(方法、函数)

2022/04/06 Python