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

js 省地市级联选择

Feb 07 Javascript

浅析JavaScript中的隐式类型转换

Dec 05 Javascript

ie8下修改input的type属性报错的解决方法

Sep 16 Javascript

js图片模糊切换显示特效的方法

Feb 17 Javascript

jQuery数据缓存用法分析

Feb 20 Javascript

js模拟支付宝密码输入框

Apr 11 Javascript

jQuery plugin animsition使用小结

Sep 14 jQuery

js正则表达式校验指定字符串的方法

Jul 23 Javascript

vue-cli项目修改文件热重载失效的解决方法

Sep 19 Javascript

关于Layui Table隐藏列问题

Sep 16 Javascript

JS数据类型判断的几种常用方法

Jul 07 Javascript

Moment的feature导致线上bug解决分析

Sep 23 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 session会话的安全性分析

2011/09/08 PHP

php cli模式下获取参数的方法

2017/05/05 PHP

PHP filesize函数用法浅析

2019/02/15 PHP

PHP实现发送微博消息功能完整示例

2019/12/04 PHP

关于document.cookie的使用javascript

2008/04/11 Javascript

利用Angularjs实现幻灯片效果

2016/09/07 Javascript

微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

2016/11/22 Javascript

将angular-ui的分页组件封装成指令的方法详解

2017/05/10 Javascript

基于JavaScript实现无限加载瀑布流

2017/07/21 Javascript

knockoutjs模板实现树形结构列表

2017/07/31 Javascript

ajax请求data遇到的问题分析

2018/01/18 Javascript

vue.js实现会动的简历(包含底部导航功能，编辑功能)

2019/04/08 Javascript

vue data对象重新赋值无效(未更改)的解决方式

2020/07/24 Javascript

[07:48]DOTA2上海特级锦标赛主赛事首日RECAP

2016/03/04 DOTA

python3.6 +tkinter GUI编程实现界面化的文本处理工具(推荐)

2017/12/20 Python

python3+PyQt5实现支持多线程的页面索引器应用程序

2018/04/20 Python

Anaconda2 5.2.0安装使用图文教程

2018/09/19 Python

Python Pandas 如何shuffle（打乱）数据

2019/07/30 Python

python爬虫正则表达式解析

2019/09/28 Python

python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例

2020/02/28 Python

windows下的pycharm安装及其设置中文菜单

2020/04/23 Python

完美解决Django2.0中models下的ForeignKey()问题

2020/05/19 Python

cookies应对python反爬虫知识点详解

2020/11/25 Python

德国最大的网上鞋店之一：Schuhe24.de

2017/06/10 全球购物

欧洲第一的摇滚和金属乐队服装网站：EMP

2017/10/26 全球购物

英国假睫毛购买网站：FalseEyelashes.co.uk

2018/05/23 全球购物

Does C# support multiple inheritance? (C#支持多重继承吗)

2012/01/04 面试题

2014年社区庆元旦活动方案

2014/03/08 职场文书

洗车工岗位职责

2014/03/15 职场文书

高一学生期末评语

2014/04/25 职场文书

中职生自荐信范文

2014/06/15 职场文书

金融专业毕业生自荐信

2014/06/26 职场文书

合作协议书模板

2014/10/10 职场文书

2014年会计主管工作总结

2014/12/20 职场文书

主持人大赛开场白

2015/05/29 职场文书

读书笔记怎么写

2015/07/01 职场文书