横向滚动、纵向滚动

1. 解决滚动的空白

向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动

上下滚动实现无缝滚动
1. innerHTML
2. scrollTop
3. offsetHeight
4. setInterval()
5. clearInterval()

HTML:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>信息无缝滚动效果</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body> <div id="box">
<ul id="cont1">
<li><a href="#">111111111111</a></li>
<li><a href="#">222222222222</a></li>
<li><a href="#">333333333333</a></li>
<li><a href="#">444444444444</a></li>
<li><a href="#">555555555555</a></li>
<li><a href="#">666666666666</a></li>
<li><a href="#">777777777777</a></li>
<li><a href="#">888888888888</a></li>
<li><a href="#">999999999999</a></li>
</ul>
<ul id="cont2"></ul>
</div> <script src="script.js"></script> </body>
</html>

CSS:

* {
padding:;
margin:;
} body {
font-size: 12px;
line-height: 24px;
text-align: center;
} ul {
list-style: none;
} a img {
border: none;
} a {
color: #333333;
text-decoration: none;
} a:hover {
color: #ff0000;
} #box {
width: 335px;
height: 144px;
margin: 50px auto 0 auto;
overflow: hidden; /* 这个一定要加,超出的内容部分要隐藏,免得撑高中间部分 */
} /*#cont1 {
background: lightcoral;
} #cont2 {
background: lightblue;
}*/

JS:

var area = document.getElementById('box');
var cont1 = document.getElementById('cont1');
var cont2 = document.getElementById('cont2'); area.scrollTop = 0;
// 克隆cont1给cont2
cont2.innerHTML = cont1.innerHTML; function myScroll() {
if(area.scrollTop >= cont1.scrollHeight) {
area.scrollTop = 0;
}else {
area.scrollTop++;
}
} var time = 50;
var interval = setInterval('myScroll()', time); area.onmouseover = function () {
clearInterval(interval);
}; area.onmouseout = function () {
// 继续执行之前的定时器
interval = setInterval('myScroll()', time);
};

信息无缝滚动效果marquee的更多相关文章

  1. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  3. 滚动效果marquee的用户体验不好,很少被用到,一般用jquery替代

    滚动效果marquee的用户体验不好,很少被用到,一般用jquery替代

  4. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  5. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  6. javascript小例子:實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

  7. html模板实现银幕滚动效果<marquee>标签使用

    该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法: <marquee ...

  8. jq封装-无缝滚动效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. jQery无缝滚动效果

    思路: 赋值所有li,添加到ul末尾,重新计算ul宽度 每次移动一个固定的值,当超出一半时,将ul拉回原位 以下代码 <!DOCTYPE html> <html> <he ...

随机推荐

  1. loj#6229 这是一道简单的数学题

    \(\color{#0066ff}{ 题目描述 }\) 这是一道非常简单的数学题. 最近 LzyRapxLzyRapx 正在看 mathematics for computer science 这本书 ...

  2. redis启动后出现"WARNING you have Transparent Huge Pages (THP) support enabled in your kernel"问题

    问题描述:启动redis后出现:WARNING you have Transparent Huge Pages (THP) support enabled in your kernel. This w ...

  3. ie7,ie8 js中变量名和页面元素ID重名,报错

    js变量名和一个div的id重名,报错.不知所以然...做个标记

  4. 深浅copy 和 集合

    1 对于赋值运算,就是共同指向一个内存地址.将一个值赋予一个变量,那么它的内存地址同时也赋予了他,如果值是不可变类型,改变值,就会产生一个新值和新内存地址,如果值是可变类型那么内存地址不会变. s1 ...

  5. Experimental Educational Round: VolBIT Formulas Blitz J

    Description IT City company developing computer games invented a new way to reward its employees. Af ...

  6. oracle service name connect

    oracle service name connect dest_ip=100.100.100.100 dest_port= dest_dbname=server_name connect=" ...

  7. Doxygen生成美丽注释文档(1):初体验

    Chapter 1 - 准备工作 (Windows环境) 1.1 程序包下载 1. Doxygen * 源码: git clone https://github.com/doxygen/doxygen ...

  8. mapreduce统计总数

    现有某电商网站用户对商品的收藏数据,记录了用户收藏的商品id以及收藏日期,名为buyer_favorite1. buyer_favorite1包含:买家id,商品id,收藏日期这三个字段,数据以“\t ...

  9. hdfs namenode/datanode工作机制

    一. namenode工作机制 1. 客户端上传文件时,namenode先检查有没有同名的文件,如果有,则直接返回错误信息.如果没有,则根据要上传文件的大小以及block的大小,算出需要分成几个blo ...

  10. 搭建并行开发环境MPICH2

    平台信息 Description: CentOS Linux release 7.6.1810 (Core) 注意事项 安装BLAS之前需要: 安装 GCC/GFortran 环境 安装步骤 下载 m ...