编程 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 相关文章推荐

Prototype 学习工具函数学习($方法)

Jul 12 Javascript

自己写的兼容ie和ff的在线文本编辑器类似ewebeditor

Dec 12 Javascript

理解JAVASCRIPT中hasOwnProperty()的作用

Jun 05 Javascript

JavaScript中for..in循环陷阱介绍

Nov 12 Javascript

使用jquery动态加载js文件的方法

Dec 24 Javascript

基于jQuery实现的旋转彩圈实例

Jun 26 Javascript

如何用JavaScript实现动态修改CSS样式表

May 20 Javascript

jQuery实现智能判断固定导航条或侧边栏的方法

Sep 04 Javascript

vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

Nov 28 Javascript

js实现随机抽奖

Mar 19 Javascript

React 条件渲染最佳实践小结(7种)

Sep 27 Javascript

Html5生成验证码的示例代码

May 10 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使用header()输出图片缓存实例

2014/12/09 PHP

Javascript 自定义类型方法小结

2010/03/02 Javascript

基于JQuery的模拟苹果桌面Dock效果(稳定版)

2012/10/15 Javascript

caller和callee的区别介绍及演示结果

2013/03/10 Javascript

javaScript函数中执行C#代码中的函数方法总结

2013/08/07 Javascript

详解JS函数重载

2014/12/04 Javascript

几种tab切换详解

2017/02/03 Javascript

jstree单选功能的实现方法

2017/06/07 Javascript

jQuery实现锚点向下平滑滚动特效示例

2017/08/29 jQuery

nodejs发送http请求时遇到404长时间未响应的解决方法

2017/12/10 NodeJs

node.js博客项目开发手记

2018/03/16 Javascript

如何以Angular的姿势打开Font-Awesome详解

2018/04/22 Javascript

JS二级菜单不同实现方法分析【4种方法】

2018/12/21 Javascript

node错误处理与日志记录的实现

2018/12/24 Javascript

vue cli3.0 引入eslint 结合vscode使用

2019/05/27 Javascript

Layui之table中的radio在切换分页时无法记住选中状态的解决方法

2019/09/02 Javascript

详解小程序如何改变onLoad的执行时机

2019/11/01 Javascript

Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)

2020/03/06 Javascript

Python实现测试磁盘性能的方法

2015/03/12 Python

python使用win32com库播放mp3文件的方法

2015/05/30 Python

Python切片索引用法示例

2018/05/15 Python

Python实现多属性排序的方法

2018/12/05 Python

在django中图片上传的格式校验及大小方法

2019/07/28 Python

使用PyCharm进行远程开发和调试的实现

2019/11/04 Python

python可视化分析的实现(matplotlib、seaborn、ggplot2)

2021/02/03 Python

css3 box-shadow阴影(外阴影与外发光)图示讲解

2017/08/11 HTML / CSS

HTML5 Canvas API中drawImage()方法的使用实例

2016/03/25 HTML / CSS

MADE荷兰：提供原创设计师家具

2018/04/03 全球购物

班组长安全生产职责

2013/12/16 职场文书

入党思想汇报怎么写

2014/04/03 职场文书

2015届本科毕业生自我鉴定

2014/09/27 职场文书

群众路线党员个人剖析材料

2014/10/08 职场文书

2014年后勤管理工作总结

2014/12/01 职场文书

2016庆祝国庆67周年宣传语

2015/11/25 职场文书

浅谈JS的原型和原型链

2021/06/04 Javascript

Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶

2021/10/16 Python