JS实现排行榜文字向上滚动轮播效果


Posted in Javascript onNovember 26, 2019

最近在一个抽奖活动中需要在页面上对中奖名单做排行榜的轮播,故根据下面的简单列子修改实现了滚动效果。

效果图(文字向上轮播):

JS实现排行榜文字向上滚动轮播效果

demo如下:

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
    <meta name="keywords" content="关键字1,关键字2" />    
    <meta name="Description" content="描述信息" />
    <title>循环滚动</title>
    <!--CSS/JS-->
    <style type="text/css">
      *{margin:0;padding:0;}
      ul,li{list-style:none;display:block;}
      #scrollBox{height:150px;width:300px;margin:100px auto;background:#f09;overflow:hidden;}
      #scrollBox #con1,#con2{width:280px;float:left;}
      #scrollBox li{height:15px;line-height:15px;text-align:center;}

    </style>

  </head>
 <body>
    <!--div-->
  <div id="scrollBox">
    <ul id="con1">
      <li>李华 中了10块钱<li>
      <li>Leo 中了一个手机<li>
      <li>刘明 中了一块毛巾<li>
      <li>ll 中了保温杯<li>
      <li>nice 中了100块钱红包<li>
      <li>108 中了20元优惠券<li>
      <li>ok 中了100块钱<li>
      </ul>
    <ul id="con2"></ul>
  </div>
  <script type="text/javascript">      
        var area =document.getElementById('scrollBox');
        var con1 = document.getElementById('con1');
        var con2 = document.getElementById('con2');
        con2.innerHTML=con1.innerHTML;
        function scrollUp(){
        if(area.scrollTop>=con1.offsetHeight){
          area.scrollTop=0;
        }else{
          area.scrollTop++
        }
        }        
        var time = 50;
        var mytimer=setInterval(scrollUp,time);
        area.οnmοuseοver=function(){
          clearInterval(mytimer);
        }
        area.οnmοuseοut=function(){
          mytimer=setInterval(scrollUp,time);
        }
    </script>
 </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
vue实现pdf文档在线预览功能
Nov 26 #Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 #Javascript
使用Vue生成动态表单
Nov 26 #Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 #Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 #Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 #Javascript
vue element-ui读取pdf文件的方法
Nov 26 #Javascript
You might like
咖啡的化学
2021/03/03 咖啡文化
PHP中GET变量的使用
2006/10/09 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python表达式的优先级详解
2020/02/18 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
django实现日志按日期分割
2020/05/21 Python
同学聚会老师邀请函
2014/01/28 职场文书
学生会竞聘书范文
2014/03/31 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
导游词书写之黄山
2019/08/06 职场文书
mysql sock 文件解析及作用讲解
2022/07/15 MySQL