<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
*{margin:0;padding:0}
#slide{position:absolute;height:300px;width:260px;color:#FA8E93;overflow:hidden;border:1px solid #ccc}
#slide p{height:34px;line-height:34px;overflow:hidden}
#slide span{float:right}
</style>
</head>
<body>

<div id="slide">
<div id="slide1">
<p><span>领取了烈焰双11礼包</span>1、dqx5***</p>
<p><span>领取了烈焰双11礼包</span>2、s376***</p>
<p><span>领取了街机三国双11礼包</span>3、sdk1***</p>
<p><span>领取了烈火战神双11礼包</span>4、说好〃不沋伤</p>
<p><span>领取了街机三国双11礼包</span>5、说好〃不沋伤</p>
<p><span>领取了烈焰双11礼包</span>6、gao6***</p>
<p><span>领取了街机三国双11礼包</span>7、ando***</p>
<p><span>领取了街机三国双11礼包</span>8、6813***</p>
<p><span>领取了烈焰双11礼包</span>9、lais***</p>
</div>
<div id=slide2></div>
</div>

<script>
var speed=40
var slide=document.getElementById("slide");
var slide2=document.getElementById("slide2");
var slide1=document.getElementById("slide1");
slide2.innerHTML=slide1.innerHTML
function Marquee(){
if(slide2.offsetTop-slide.scrollTop<=0)
slide.scrollTop-=slide1.offsetHeight
else{
slide.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
slide.onmouseover=function(){clearInterval(MyMar)}
slide.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>

</body>
</html>

js 向上滚屏的更多相关文章

  1. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  2. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  3. js touch触屏原理分析

    之前我们做过许多触屏的特效,那么,今天,我们来分析下js的触屏原理.事实上,大家百度一下js touch基本上可以找到这文章“指尖下的js ——多触式web前端开发之一:对于Touch的处理”,我想这 ...

  4. 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示

    移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js ...

  5. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  6. fullpage.js jq全屏滚动插件

    fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...

  7. fullpage.js最后一屏不满一屏时，滚动方式

    这两天公司网页改版用到fullpage.js这个滚屏插件,页面内容整屏的滚动,不成问题,各种设置在网上也都有文档.而我遇到的问题就是,页面内容不满屏的时候,和上面的内容放一块就太挤,单独放一屏就太空, ...

  8. 自己用js实现全屏滚动

    参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改 ...

  9. AnimatedModal.js – CSS3 全屏模态窗口

    AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现.您可以利用 Animate.css 中的转换或自行创建自己的过渡效果.支持 Firef ...

随机推荐

  1. 2020-06-25：B+树和B树有什么区别？

    福哥答案2020-06-25: B树:1.叶子节点和非叶子节点都存数据.2.数据无链指针.B+树:1.只有叶子节点存数据.2.数据有链指针.B树优势:1.靠近根节点的数据,访问速度快.B+树优势:1. ...

  2. C#LeetCode刷题之#455-分发饼干（Assign Cookies）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4034 访问.. 假设你是一位很棒的家长,想要给你的孩子们一些小饼 ...

  3. MongoDB学习1：认识文档数据库MongoDB

    1. 关于MongoDB 什么是MongoDB 一个以JSON为数据模型的文档数据库 为什么叫文档数据库 文档来自于"JSON Document",并非我们一般理解的pdf,wor ...

  4. 【笔记】 springCloud--Alibaba--服务注册和服务发现

    接着上一次的nacos初步讲解和安装 任意门:https://www.cnblogs.com/Yangbuyi/p/13479767.html 如果启动失败的话 上一篇也是讲解过的. 本文章开始服务注 ...

  5. 关于C#调用非托管DLL，报“内存已损坏的”坑，坑，坑

    因客户需求,与第三方对接,调用非托管DLL,之前正常对接的程序,却总是报“内存已损坏的异常”,程序进程直接死掉,折腾到这个点(2018-05-11 00:26),终于尘埃落定,直接上程序. 之前的程序 ...

  6. EXCEL 中数据 批量 填充进 word 中

    工具:Python3.7 需求描述:将EXCEL中 第二行 数据 填在 word 对应位置上,然后保存为 "姓名+任务.docx"文件. 再将EXCEL中 第三行 数据 填在 wo ...

  7. Java并发--final关键字

    一.final使用场景 final可以稀释变量,方法和类,用于便是修饰的内容一旦赋值之后不会再被改变,比如string类就是一个final类型的类. 二.final修饰变量 在Java中变量可以分为成 ...

  8. 「查缺补漏」巩固你的RocketMQ知识体系

    Windows安装部署 下载 地址:[https://www.apache.org/dyn/closer.cgi?path=rocketmq/4.5.2/rocketmq-all-4.5.2-bin- ...

  9. NeuroAttack: Undermining Spiking Neural Networks Security through Externally Triggered Bit-Flips

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! arXiv:2005.08041v1 [cs.CR] 16 May 2020 Abstract 由于机器学习系统被证明是有效的,因此它被广 ...

  10. 问卷星导入数据到SPSS，数据变成-3是什么原因？

    问卷星将数字“-3”表示为筛选或者跳转题:如果问卷中有设计筛选或者跳转,此时则会出现“-3”这个数字. 解决办法1 分析时首先进行筛选,然后再分析,便不会出现“-3”,而且一定需要这样进行.“筛选样本 ...