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 相关文章推荐
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
javascript引用对象的方法
2007/01/11 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python实现中值滤波去噪方式
2019/12/18 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
python实现扫雷游戏的示例
2020/10/20 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
丧事主持词大全
2014/04/02 职场文书
经营目标责任书
2015/05/08 职场文书
新课程改革心得体会
2016/01/22 职场文书
多人股份制合作协议书
2016/03/19 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python