JavaScript实现垂直向上无缝滚动特效代码


Posted in Javascript onNovember 23, 2016

JavaScript实现垂直向上无缝滚动特效代码

一、循环向上滚动的文字,如上面的滚动效果

二、实现的思路

1、建立三个层dome、dome1、dome2
2、垂直滚动的文字在dome1上
3、通过层的滚动来实现文字滚动

三、源代码

<html>
<head>
<title>循环向上滚动的文字</title>
<link href="css/scrollTop.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="domes">
<div class="dome_top">近7日畅销榜</div>
<div id="dome">
<div id="dome1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/scrollTop_1.jpg" alt="scroll" /></td>
<td><div class="title">社交疯狂项语</div>
<font class="price">¥57.00</font> 折扣:52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_2.jpg" alt="scroll" /> </td>
<td><div class="title">傲慢与偏见</div>
<font class="price">¥20.00</font> 折扣:25折</td>
</tr>
<tr>
<td><img src="images/scrollTop_3.jpg" alt="scroll" /></td>
<td><div class="title">玻璃鞋全集(50集34VCD)</div>
<font class="price">¥300.00</font> 折扣:52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_4.jpg" alt="scroll" /></td>
<td><div class="title">澳大利亚:假日之旅</div>
<font class="price">¥53.00</font> 折扣:51折</td>
</tr>
<tr>
<td><img src="images/scrollTop_5.jpg" alt="scroll" /> </td>
<td><div class="title">浪漫地中海:假日之旅</div>
<font class="price">¥80.00</font> 折扣:52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_6.jpg" alt="scroll" /></td>
<td><div class="title">老人与海</div>
<font class="price">¥57.00</font> 折扣:52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_7.jpg" alt="scroll" /></td>
<td><div class="title">欧陆风情:假日之旅</div>
<font class="price">¥53.00</font> 折扣:52折</td>
</tr>
</table>
</div>
<div id="dome2"></div>
</div>
</div>
<script src="js/scrollTop.js" type="text/javascript"></script>
</body>
</html>

四、设置id为dome的层的div源代码

#dome{
overflow:hidden; /*溢出的部分不显示*/
height:180px;
padding:5px;
}

五、实现循环向上滚动的JavaScript代码

function $(element){
return document.getElementById(element);
}
var dome=$("dome");
var dome1=$("dome1");
var dome2=$("dome2");
var speed=50; //设置向上滚动速度
dome2.innerHTML=dome1.innerHTML //复制dome1为dome2
function moveTop(){
if(dome2.offsetTop-dome.scrollTop<=0) //当滚动至dome1与dome2交界时
dome.scrollTop-=dome1.offsetHeight //dome跳到最顶端
else{
dome.scrollTop++
}
}
var MyMar=setInterval(moveTop,speed) //设置定时器
dome.onmouseover=function() {clearInterval(MyMar)} //鼠标移上时清除定时器达到滚动停止的目的
dome.onmouseout=function() {MyMar=setInterval(moveTop,speed)} //鼠标移开时重设定时器,继续滚动

以上这篇JavaScript实现垂直向上无缝滚动特效代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript模板入门介绍
Sep 26 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
JavaScript将数组转换为链表的方法
Feb 16 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 Javascript
分类解析jQuery选择器
Nov 23 #Javascript
概述jQuery的元素筛选
Nov 23 #Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 #Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 #Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 #Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 #Javascript
详解jQuery的Cookie插件
Nov 23 #Javascript
You might like
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
php之curl设置超时实例
2014/11/03 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
React组件生命周期详解
2017/07/03 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
python版本的读写锁操作方法
2016/04/25 Python
什么是python类属性
2020/06/10 Python
python2和python3哪个使用率高
2020/06/23 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
2014年五四青年节活动方案
2014/03/29 职场文书
认购协议书范本
2014/04/22 职场文书
党员群众路线承诺书
2014/05/20 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
学校捐书倡议书
2015/04/27 职场文书
小学教师见习总结
2015/06/23 职场文书
Java中的随机数Random
2022/03/17 Java/Android