信息无缝滚动效果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 ...
随机推荐
- Django 自定义模板标签 报错django.template.exceptions.TemplateSyntaxError: '####' is not a registered tag library. Must be one of:
我写代码遇到这个错误,但是发现程序没有写错,好像是程序有缓存,重新运行几次就好了. 自定义模板标签,可以不用写views,url直接通过自定义函数把变量传给模板. 具体实现: 1.在app下新建Pyt ...
- Linux系统centos中sudo命令不能用----提升权限
gyx is not in the sudoers file. This incident will be reported. 1.切换到root用户 su ,如果想要切换回去 exit 2.添加s ...
- springcloud系列八 整合Hystrix
feign本身是支持Hystrix的,所以不需要引入其他依赖: 我们可以看看feign这个项目的依赖,就是引入这个依赖的pom.xml 要想看这个很简单,点击那个依赖进去就可以了 点进去就可以看到 & ...
- 分布式通信框架RMI
1.RPC概念: Remote procedure call protocal,远程过程调用协议,一般用来实现部署在不同机器上的系统之间的方法调用, 使得程序能够像访问本地系统资源一样,通过网络传输去 ...
- git学习--更新本地仓库单独文件
命令: git checkout origin/dev .gitignore 从远端 dev 仓库,更新本地签出分支的 .gitignore 文件
- vmware正在使用中问题
解决方法:找到vmware目录下的.lck文件,将其删掉即可.
- Linux中apache服务
httpd访问控制生成共享文件vim var/www/html/cq/index.html编辑配置文件 vim /etc/httpd/conf/httpd.conf<Directory &quo ...
- google chrome浏览器自动填充解决方案
在chrome浏览器中,浏览器对于[1]type为password和text的.[2]带有name或者id属性的<input>标签会有自动填充表单功能,虽然会给用户记住密码带来一定的便利, ...
- 读书笔记：编程小白的第一本python入门书
书名:编程小白的第一本python入门书 作者:侯爵 出版社/出处:图灵社区 年份:2016年 封面: 感想: 本书短小精悍,精华部分在于给编程小白打了鸡血的同时输出了一种“高效学习法的思想”. 个人 ...
- 6-----BBS论坛
BBS论坛(六) 6.1.优化json数据的返回 (1)新建utils/restful.py # utils/restful.py from flask import jsonify class Ht ...