<!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. nginx_笔记分享_配置篇

    参考http://www.howtocn.org/nginx:directiveindexhttp://blog.s135.com/ nginx 配置文档为 nginx.conf 比如我的配置文档 / ...

  2. 高级应用与部署 —— 主程序与web目录分离

    在网站部署中,考虑网站的安全行问题,可以将您的网站主程序与web目录分离,使主程序在web目录之外,从而提高网站的安全性. 分离方法 1.将phpcms v9中程序主框架目录phpcms移动至web目 ...

  3. Swift—下标-备

    看下面的示例代码是不是使用过: var studentList: String[]  = ["张三","李四","王五"] studentL ...

  4. 详解ios文件系统文件目录读写操作－备用

    iPhone文件读写系统操作教程是本文要介绍的内容,对于一个运行在iPhone得app,它只能访问自己根目录下得一些文件(所谓sandbox).一个app发布到iPhone上后,它得目录结构如下:  ...

  5. IE 将“通过域访问数据源”设置为启用(注册表)

    XP HKCU\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\1\1406 Vista+ HKCU\Softwar ...

  6. strings和nm命令

    strings和nm命令 strings 一.简介: 显示文件中的可打印字符 二.用法 strings [option(s)] [file(s)] 选项说明: -a – –all 扫描整个文件而不是只 ...

  7. Android软件的国际化

    软件的国际化指的就是:在不同语言的环境的操作系统下,显示不同的语言 2 其实实现软件的国际化很简单: 3 4 1.如果是对文字的国际化,只需要在res文件夹下面建立如下文件夹: 5 values-zh ...

  8. pyqt4制作透明无边框窗体

    用PyQt做了一个无边框登陆窗口,效果如下: 下面是代码: # -*- coding: utf-8 -*- from PyQt4 import QtGui ,Qt ,QtCore image=QtGu ...

  9. kvm cobbler无人值守批量安装操作系统

    kvm cobbler无人值守批量安装操作系统 cobbler:一个自动网络安装系统的工具,集成PEX.dhcp.dns.tftpd.sync等服务.可以供大家管理安装操作系统 kvm:Linux系统 ...

  10. 【Python基础】计算项目代码行数

    统计代码行数 # coding: utf-8 import os import sys import time def get_line_count(file_path): ""& ...