信息无缝滚动效果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 ...
随机推荐
- 分析mybatis和jdbc的作用,已经原理
从jdbc的操作数据库来看:主要分为几步: 1 注冊载入JDBC驱动程序: 2 得到连接对象 Connection 3 创建 Statement对象 4 运行sql语句 5 处理结果 6 关闭资源释放 ...
- Python: 安装 sklearn 包出现错误的解决方法
今天在安装 Python 的 sklearn 包时出现了 Cannot uninstall 'numpy' 和 Cannot uninstall 'scipy' 错误,下面记录了我尝试了很多网上的方法 ...
- CSS3中的vh、vw及其应用场景
需求:我们项目的需求是 一.vh vw vw和vh是相对于视口(viewport)的宽度和高度.由于现在移动设备的屏幕尺寸之差别,如果仍然根据屏幕的物理分辨率来设计网页,效果很难统一,因此html ...
- Solr学习笔记(1) —— Solr概述&Solr的安装
一.概述 使用Solr实现电商网站中商品信息搜索功能,可以根据关键字.分类.价格搜索商品信息,也可以根据价格进行排序. 1.1 实现方法 在一些大型门户网站.电子商务网站等都需要站内搜索功能,使用传统 ...
- C语言之对指针概念的初步探究
指针?什么是指针? 指针(pointer)是一个值为内存地址的变量(或数据对象). 接下来从变量的角度分析: 变量有两个属性,一个是地址,一个是值. 指针与普通变量的不同之处在于:指针变量的值是一个内 ...
- SharePoint 2013 设置 显示详细错误信息 修改位置总结
以80端口为例—— 1.修改:C:\inetpub\wwwroot\wss\VirtualDirectories\80\web.config文件配置 CallStack="false&quo ...
- 本地访问Vmware虚机Web网站
情况:公司是域环境,Vmware网络设置的是NAT连接模式,里外装的都是Windows,虚机网络IP地址是自动获取的. 查看: 1.虚机Ping本地的IP地址可以Ping通: 2.本地Ping虚机的I ...
- java mybatis学习一
1.引入maven包 和 导入 sqljdbc包 <dependency> <groupId>org.apache.ibatis</groupId> <art ...
- hive参数设置
-- 设置hive的计算引擎为spark set hive.execution.engine=spark; -- 修复分区 set hive.msck.path.validation=ignore; ...
- eclipse 离线安装STS插件
1.下载 eclipse Version: 2018-12 (4.10.0) 下载sts相应版本:https://spring.io/tools3/sts/all 2.安装 Help->Inst ...