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

javascript preload&lazy load

May 13 Javascript

jQuery实现的导航条切换可显示隐藏

Oct 22 Javascript

javascript实现rgb颜色转换成16进制格式

Jul 10 Javascript

jQuery继承extend用法详解

Oct 10 Javascript

JavaScript中最常见的三个面试题解析

Mar 04 Javascript

web.js.字符串与正则表达式操作

May 13 Javascript

React教程之Props验证的具体用法（Props Validation）

Sep 04 Javascript

基于JavaScript实现报警器提示音效果

Oct 27 Javascript

web前端vue实现插值文本和输出原始html

Jan 19 Javascript

JS函数节流和防抖之间的区分和实现详解

Jan 11 Javascript

JS中的算法与数据结构之常见排序（Sort）算法详解

Aug 16 Javascript

Vue 实例中使用$refs的注意事项

Jan 29 Vue.js

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

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与ASP

2006/10/09 PHP

php代码调试利器firephp安装与使用方法分析

2018/08/21 PHP

PHP获取数据库表中的数据插入新的表再原删除数据方法

2018/10/12 PHP

yii2.0框架实现上传excel文件后导入到数据库的方法示例

2020/04/13 PHP

firefox中JS读取XML文件

2006/12/21 Javascript

最近项目写了一些js，水平有待提高

2009/01/31 Javascript

JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码

2012/02/02 Javascript

Chosen 基于jquery的选择框插件使用方法

2012/05/30 Javascript

从阶乘函数对比Javascript和C#的异同

2012/05/31 Javascript

jquery 日期控件datepicker属性详细解析

2013/11/08 Javascript

在百度知道团队中快速审批新成员的js脚本

2014/02/02 Javascript

Javascript基础教程之函数对象和属性

2015/01/18 Javascript

js实现跨域的4种实用方法原理分析

2015/10/29 Javascript

微信小程序 toast 详解及实例代码

2016/11/09 Javascript

Angularjs渲染的 using 指令的星级评分系统示例

2017/11/09 Javascript

javascript实现Emrips反质数枚举的示例代码

2017/12/06 Javascript

javascript使用正则实现去掉字符串前面的所有0

2018/07/23 Javascript

浅谈Vue.use的使用

2018/08/29 Javascript

JavaScript的词法结构精华篇

2018/10/17 Javascript

简单了解Javscript中兄弟ifream的方法调用

2019/06/17 Javascript

vue-cli中实现响应式布局的方法

2021/03/02 Vue.js

[02:38]DOTA2亚洲邀请赛 IG战队巡礼

2015/02/03 DOTA

Python OS模块常用函数说明

2015/05/23 Python

Python素数检测实例分析

2015/06/15 Python

Python爬虫DOTA排行榜爬取实例(分享)

2017/06/13 Python

Python3 单行多行万能正则匹配方法

2019/01/07 Python

基于Python中random.sample()的替代方案

2020/05/23 Python

德国高性价比网上药店：medpex

2017/07/09 全球购物

业绩考核岗位职责

2014/02/01 职场文书

歌唱比赛主持词

2014/03/18 职场文书

餐厅筹备计划书

2014/04/25 职场文书

介绍信范文

2015/01/31 职场文书

2015年保卫科工作总结

2015/05/14 职场文书

python3 实现mysql数据库连接池的示例代码

2021/04/17 Python

何时使用Map来代替普通的JS对象

2021/04/29 Javascript

java获取一个文本文件的编码(格式)信息

2022/09/23 Java/Android