横向滚动、纵向滚动

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. 老男孩Day2作业：购物车程序

    作业需求: 用户入口: 1.商品信息存在文件里 2.已购商品,余额记录.第一次启动程序时需要记录工资,第二次启动程序时谈出上次余额 3.允许用户根据商品编号购买商品 4.用户选择商品后,检测是否够,够 ...

  2. P4338 [ZJOI2018]历史 LCT+树形DP

    \(\color{#0066ff}{ 题目描述 }\) 这个世界有 n 个城市,这 n 个城市被恰好 \(n-1\) 条双向道路联通,即任意两个城市都可以 互相到达.同时城市 1 坐落在世界的中心,占 ...

  3. ubuntu14 上无法使用vim命令的解决方法

    在ubuntu14.10终端输入vim: The program 'vim' can be found in the following packages: * vim * vim-gnome * v ...

  4. centos6.4安装过程中无法出现图形化界面

    今天在VMware9.0安装centos6.4的时候,前面的步骤都没问题,到跳过媒体检查这一步后,就发现和之前的不一样了,这次安装不是图形界面,导致后面的安装不方便 一开始以为是centos的版本不一 ...

  5. KindEditor的参考文献

    转自:http://www.cnblogs.com/wupeiqi/articles/6307554.html

  6. Go语言基础之9--指针类型详解

    一. 变量和内存地址 每个变量都有内存地址,可以说通过变量来操作对应大小的内存 注意:通过&符号可以获取变量的内存地址 通过下面例子来理解下: 实例1-1 package main impor ...

  7. 将tomcat的protocol改为APR模式,以提高性能

    以下是我修改的内容,以及对tomcat可以修改的参数 scm APR模式启动步骤:   1:将附件中的压缩包,在/usr/local 下解压   2:修改../bin/catalina.sh  ,在其 ...

  8. c# yield关键字原理

    https://www.cnblogs.com/blueberryzzz/p/8678700.html c# yield关键字原理详解 1.yield实现的功能yield return:先看下面的代码 ...

  9. DRF接入Oauth2.0认证[微博登录]报错21322重定向地址不匹配

    DRF接入Oauth2.0认证[微博登录]报错21322重定向地址不匹配 主题自带了微博登陆接口,很简单的去新浪微博开放平台创建了网页应用,然后把APP ID和 AppSecret填好后,以为大功告成 ...

  10. Python import搜索路径相关

    import搜索路径 在当前目录下搜索该模块 在环境变量 PYTHONPATH 中指定的路径列表中依次搜索 在 Python 安装路径的 lib 库中搜索 查看当前的搜索路径 import sys p ...