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

jquery的ajax请求全面了解

Mar 20 Javascript

基于jquery实现一张图片点击鼠标放大再点缩小

Sep 29 Javascript

Js实现双击鼠标自动滚动屏幕的示例代码

Dec 14 Javascript

js判断文本框剩余可输入字数的方法

Feb 04 Javascript

jQuery结合ajax实现动态加载文本内容

May 19 Javascript

javascript实现youku的视频代码自适应宽度

May 25 Javascript

用JS实现图片轮播效果代码（一）

Jun 26 Javascript

JavaScript 函数模式详解及示例

Sep 07 Javascript

基于JavaScript实现滑动门效果

Mar 16 Javascript

Node.js连接mongodb实例代码

Jun 06 Javascript

使用JavaScript获取Django模板指定键值数据

May 27 Javascript

Vue项目配置跨域访问和代理proxy设置方式

Sep 08 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

ipad(1) i5 10400(1) i7 6700(1) win10(43) 分析统计(1) Tomcat(18) 速龙(1) i5 9400(1) 窗口函数(3) win11(40)

You might like

PHP中常用数组处理方法实例分析

2008/08/30 PHP

CodeIgniter CLI模式简介

2014/06/17 PHP

php实现中文转数字

2016/02/18 PHP

CI操作cookie的方法分析(基于helper类库)

2016/03/28 PHP

利用php_imagick实现复古效果的方法

2016/10/18 PHP

javascript 播放器控制

2007/01/22 Javascript

JavaScript类和继承 this属性使用说明

2010/09/03 Javascript

B/S模式项目中常用的javascript汇总

2013/12/17 Javascript

node.js中的buffer.Buffer.isEncoding方法使用说明

2014/12/14 Javascript

jQuery Easyui 验证两次密码输入是否相等

2016/05/13 Javascript

设计模式中的facade外观模式在JavaScript开发中的运用

2016/05/18 Javascript

IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

2016/10/25 Javascript

angularjs 表单密码验证自定义指令实现代码

2016/10/27 Javascript

浅谈Vue.js 1.x 和 2.x 实例的生命周期

2017/07/25 Javascript

JavaScript高级函数应用之分时函数实例分析

2018/08/03 Javascript

微信小程序学习笔记之目录结构、基本配置图文详解

2019/03/28 Javascript

详解微信小程序自定义组件的实现及数据交互

2019/07/22 Javascript

angularjs1.X 重构controller 的方法小结

2019/08/15 Javascript

浅谈bootstrap layer.open中end的使用方法

2019/09/12 Javascript

vuex(vue状态管理)的特殊应用案例分享

2020/03/03 Javascript

Python多进程通信Queue、Pipe、Value、Array实例

2014/11/21 Python

Python基于回溯法子集树模板解决数字组合问题实例

2017/09/02 Python

Python中协程用法代码详解

2018/02/10 Python

python批量导入数据进Elasticsearch的实例

2018/05/30 Python

使用memory_profiler监测python代码运行时内存消耗方法

2018/12/03 Python

python使用PIL实现多张图片垂直合并

2019/01/15 Python

python 实现从高分辨图像上抠取图像块

2020/01/02 Python

Python3.x+pyqtgraph实现数据可视化教程

2020/03/14 Python

整个世界的设计师家具在哈恩：Designathome

2019/03/25 全球购物

俄罗斯名牌服装网上商店：UNIQUE FABRIC

2019/07/25 全球购物

ddl，dml和dcl的含义

2016/05/08 面试题

学生励志演讲稿

2014/01/06 职场文书

学期评语大全

2014/04/30 职场文书

小学生我的梦想演讲稿

2014/08/21 职场文书

2014年小班保育员工作总结

2014/12/23 职场文书

关于MybatisPlus配置双数据库驱动连接数据库问题

2022/01/22 Java/Android