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 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 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
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
Python批量转换文件编码格式
2015/05/17 Python
详解K-means算法在Python中的实现
2017/12/05 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python中的协程深入理解
2019/06/10 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
Java工程师面试集锦之Spring框架
2013/06/16 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
家长通知书教师评语
2014/04/17 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
奥运会口号
2014/06/13 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL