<!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>

div+css不间断滚动字幕的更多相关文章

  1. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  2. 横向不间断滚动DIV

    横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  3. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  4. HTML滚动字幕代码参数详解及Js间隔滚动代码

    html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...

  5. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  6. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  7. div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行   ...

  8. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  9. DIV+CSS命名规范-转载1

    命名规则说明: 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divc ...

随机推荐

  1. 关于常用却忘记的css，jQuery

    text-indent:35px;//首行缩进 line-height:12px;//行高,高度和外层高度一样就会居中 box-shadow:inset 0px 0px 2px #ccc; conte ...

  2. php函数整理

    php usleep() 函数延迟代码执行若干微秒. unpack() 函数从二进制字符串对数据进行解包. uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID. time_sleep_ ...

  3. CentOS 添加/绑定 IP

    美国VPS的独立IP相对于国内而言,是非常的便宜的.比如有些美国VPS,买5个独立IP才三美元左右一个月.当我们购买了多个独立IP时,如果你不想再联系客服而漫长的等待,那就自己手动配置吧. 一.进入/ ...

  4. String对象

    <script type="text/javascript"> /* var str1 = new String("hello"); var str ...

  5. Smarty 使用继承方式实现配置

    . 常用配置选项 在使用Smarty模板引擎之前,我们必须先学习如何配置Smarty的选项.而在Smarty的常见选项中,我们首先必须了解4个最基本的目录选项. 模板目录(template):本目录用 ...

  6. vmware-vdiskmanager

    vmware workstation可以用自带的程序vmware-vdiskmanager分成多个2G大小的文件. vmware-vdiskmanager -r Mavericks.vmdk -t 1 ...

  7. delphi7开发webservice部属在apache服务器中 转

    delphi7开发webservice部属在apache服务器中 delphi7 webservice apache 用Delphi7开发Web Service程序,并把服务程序放在apache We ...

  8. 我学hash_map(2)

    啊,转眼之间就来到了我学hash_map(2)了.我们也从hash_map转移到了unordered_map上来了,今天这个文章的目的就是要来分享一下使用这个hash_map,哦不,unordered ...

  9. cf509E Pretty Song

    E. Pretty Song time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  10. sicily 4433 DAG?

    题意:输入一个有向图,判断该图是否是有向无环图(Directed Acyclic Graph). 解法:还是深搜 #include<iostream> #include<memory ...