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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
linux 后台运行node服务指令方法
May 23 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
JS图片懒加载技术实现过程解析
Jul 27 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python基类函数的重载与调用实例分析
2015/01/12 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
Django多个app urls配置代码实例
2020/11/26 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
什么是事务?事务有哪些性质?
2012/03/11 面试题
竞聘演讲稿范文
2014/01/12 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
2014年班级工作总结
2014/11/14 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
法制教育主题班会
2015/08/13 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB