<!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. 【JAVA】java中int转成String位数不足前面补零例如：1->001

    String.format("%03d", 1); 0代表前面要补的字符3代表字符串长度d表示参数为整数类型 测试完数据:循环了100次 截取了一部分:

  2. C#算法设计排序篇之09-基数排序（附带动画演示程序）

    基数排序(Radix Sort) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/691 访问. 基数排序属于" ...

  3. C#LeetCode刷题之#720-词典中最长的单词（Longest Word in Dictionary）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4120 访问. 给出一个字符串数组words组成的一本英语词典.从 ...

  4. volatile的特性代码验证

    一 . 可见性(visibility) volatile关键字修饰的变量,如果值发生了改变,其他线程会立刻获取到,从而避免了出现脏读的情况. public class TestVolatile { p ...

  5. 一进“dos”就自动进入上次的目录

    这个原来在别的地方发过,但是后来发现有bug,处理windows下带有空格的长文件夹会出错.因为原来那个帖子已经不能编辑了,所以修改后写在这里. 这里的“dos”,就是windows下的命令行窗口,所 ...

  6. Nginx进程模型

    多进程模式 在开始介绍Nginx的进程模型之前先说明下:Nginx也支持Single Master单进程模式,但是这个模式效率较低,一般只用在开发环境.所以不是本文介绍的重点. Nginx默认采用多进 ...

  7. Redis的数据类型及使用场景

    1.redis 的数据类型 String 字符串 Hash 哈希 List 列表 Set 集合 ZSet(Sorted Set) 有序集合 2.使用场景 2.1 String 用户token 可以用r ...

  8. 第5篇scrum冲刺（5.25）

    一.站立会议 1.照片 2.工作安排 成员 昨天已完成的工作 今天的工作安排 困难 陈芝敏   线下模块(还剩下获取词的数据库)  研究云开发,更新了登录模块,把用户的信息传入数据库了  起初在云函数 ...

  9. 记录一次CDH集群邮件报警功能的设置

    1.通用的配置CDH邮件报警设置 进入cloudera manager service页面,选择配置 左侧菜单Alert Publisher 勾选[启用电子邮件警报] 邮件服务协议smtp,如果使用s ...

  10. 每天定时下载gfs资料shell脚本

    在数值天气预报应用中,经常需要下载一些输入资料,美国ncep的gfs资料是常用的一种分析场资料.业务运行,需要每天定时从ncep网站上下载,所以写了一个Shell脚本实现这一功能.脚本内容如下: #! ...