javascript实现无缝上下滚动特效
作者：lijiao 发布时间：2024-05-11 09:35:08
标签：javascript,滚动
本文实例讲解了javascript实现无缝上下滚动的代码，分享给大家供大家参考，具体内容如下
js实现上下无缝滚动的原理是这样的：
1、首先给容器设定高度或宽度，然后overflow:hidden；
2、容器高度设定后，内容超出则被隐藏。
3、改变容器的scrollTop（上下滚动）属性的值，让内容上下移动一个节点的位置（滚动的原理）；
4、到滚动的高度scrollTop大于或等于要滚动节点的高度时，设置scrollTop=0，并把把子节点树中的第一个移动到最后，重新开始滚动，无间断循环滚动效果就出现了。
效果图如下：
代码如下：
<div id="colee" style="overflow:hidden;height:100px;width:410px;border:1px solid red;">
<div id="colee1">
<p>php</p>
<p>java</p>
<p>ruby</p>
<p>python</p>
<p>www.phpddt.com</p>
</div>
<div id="colee2"></div>
</div>
<script>
//速度设置
var speed=1;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
0
投稿猜你喜欢
- 什么是Dynamic HTML 今天我们以问答的形式来讲述什麽是Dynamic Html。问：亲爱的网猴，我经常看到讲述有关“Dynamic
import模块时有错误红线的解决 前情提要概念：在一个文件中代码越长越不容易维护，为了编写可维护的代码，我们把很多函数分组，分别- 使用drop函数删除dataframe的某列或某行数据：drop(labels, axis=0, level=None, inplace=F
- PyQt5是基于Digia公司强大的图形程式框架Qt5的python接口，由一组python模块构成。PyQt5本身拥有超过620个类和60
- 上一篇博客介绍了 如何使用Python，OpenCV上下左右（或任意组合）平移图像。这篇博客将介绍如何使用OpenCV旋转图像任意角度。并演
- 一、使用我使用的是python3,可以自行搜索下载二、安装phone模块pip install phone三、测试代码如下：from pho
- 概述前段时间突然发现，我之前对git stash的使用都是错误的。具体说来，我是这么使用的：在远端有新的提交，需要git pull来拉取合并
- 软件版本：python 3.7.2selenium 3.141.0pycharm 2018.3.5具体实现流程如下，废话不多说，直接上代码：
- 描述Bootstrap Button（按钮）JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态，也可以为组件创建按钮组，比
- 身边的人竟然不玩“跳一跳了”，都迷上了一个叫“冲顶大会”的东西，考了很多各学科的冷知识，文学、数学、地理、生物、动漫、八卦…小编网上找到一些
- --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2'
- 备忘一下python中的字典如何遍历,没有什么太多技术含量.仅供作为初学者的我参考.#!/usr/bin/env python# codin
- 本篇文档旨在介绍如何安装配置基于2台服务器的MySQL集群。并且实现任意一台服务器出现问题或宕机时MySQL依然能够继续运行。注意！虽然这是
- 正在编写的程序用的很多Windows下的操作，查了很多资料。看到剪切板的操作时，想起以前想要做的一个小程序，当时也没做，现在正好顺手写完。功
- 本文实例讲述了Python实现的摇骰子猜大小功能小游戏。分享给大家供大家参考，具体如下：最近学习Python的随机数，逻辑判断，循环的用法，
- Python是面向对象(OOP)的语言, 而且在OOP这条路上比Java走得更彻底, 因为在Python里, 一切皆对象, 包括int, f
- 混淆矩阵 混淆矩阵(Confusion Matrix)是机器学习中用来总结分类模型预测结果的一
- 最近刚接触了公司的服务器，使用的是Windows 2003 server + IIS 6.0 服务器，在使用无组件上传文件时产生这个错误时：
- python中eval函数的用法十分的灵活，这里主要介绍一下它的原理和一些使用的场合。下面是从python的官方文档中的解释： &
- Python+matplotlib进行鼠标交互，实现动态标注，数据可视化显示，鼠标划过时画一条竖线并使用标签来显示当前值。Python3.6
