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操作表格排序实例分析
May 06 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
分类解析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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
通过自学python能找到工作吗
2020/06/21 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
亲属关系公证书样本
2015/01/23 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
自考生自我评价
2019/06/21 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
pycharm无法安装cv2模块问题
2022/05/20 Python