信息无缝滚动效果marquee
横向滚动、纵向滚动
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的更多相关文章
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- liMarquee演示12种不同的无缝滚动效果
很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...
- 滚动效果marquee的用户体验不好，很少被用到，一般用jquery替代
滚动效果marquee的用户体验不好,很少被用到,一般用jquery替代
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
- js 无缝滚动效果学习
<!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...
- javascript小例子：實現四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...
- html模板实现银幕滚动效果<marquee>标签使用
该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法: <marquee ...
- jq封装-无缝滚动效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jQery无缝滚动效果
思路: 赋值所有li,添加到ul末尾,重新计算ul宽度 每次移动一个固定的值,当超出一半时,将ul拉回原位 以下代码 <!DOCTYPE html> <html> <he ...
随机推荐
- 4、OpenCV Python 像素运算
__author__ = "WSX" import cv2 as cv import numpy as np #前提需要运算的图像大小和类型完全相同 #算术运算 加减乘除 #逻辑运 ...
- 查看ip常见命令...
1.获取ip Unix用户可以在命令提示符中输入ifconfig来获取. 使用Windows的用户,请尝试使用 ipconfig 命令.
- P2389 电脑班的裁员
题意:长度为n的序列,选出k个连续的字段,使和最大(有负数) 暴力只选正数且不考虑k的边界问题50(数据...) 正解从$O(n^3)到O(n)$不等,($O(n)$不会) DP 1.$O(n^3)$ ...
- 9.27下午考试(Nescafé 29杯模拟赛)
140pts(100+30+10)Rank3 前几天还考了一场,AK,没什么好总结的,所以就没写博客. 炸: T2,模拟退火突然不会了,写个状压dp,排序边的时候sort的N而不是M. 这个坑经常出! ...
- git学习中遇到的疑难杂症
GIT仓库如何恢复到前一次提交 一.通过使用Git版本恢复命令reset,可以回退版本 reset命令有3种方式: 1.git reset –mixed:此为默认方式,不带任何参数的git r ...
- 15.Servlet程序结构与部署
1.JavaEE应用程序结构 组成:Servlet JSP 工具类 第三方jar包,HTML页面(图片.Flash) 部署结构: JavaEE应用根目录下的资源都是允许客户端访问的(WEB-IN ...
- 用HTMLParser解析html时报错：No module named 'htmlentitydefs'
python3.6用HTMLParser解析html时报错 No module named 'htmlentitydefs'或No module named 'markupbase' 先上代码 fro ...
- Webstrom 中写Vue没有代码提示如何解决？
1. 如果你的Webstorm是2017版的,请更新到最新的2018,2018版本的webstorm自带了vue插件 找到 Help > About,查看你的Webstorm版本 2. 如果你的 ...
- redis的三种启动方式,个人常用第二种
redis的启动方式1.直接启动 进入redis根目录,执行命令: #加上‘&’号使redis以后台程序方式运行 1 ./redis-server & 2.通过指定配置文件启动 ...
- xshell如何传输文件-yum
1.安装 sudo yum install lrzsz -y 2.检查是否安装成功 #rpm -qa |grep lrzsz 出现如下,表示安装成功 3.上传文件的执行命令: #rz 就会打开本地选 ...