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 相关文章推荐
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
require.js中的define函数详解
Jul 10 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
js实现九宫格布局效果
May 28 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中的错误处理、异常处理机制分析
2012/05/07 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
python 实现Harris角点检测算法
2020/12/11 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
银行委托书范本
2014/09/28 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
管理人员岗位职责
2015/02/14 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
昆虫记读书笔记
2015/06/26 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js