js仿小米手机上下滑动效果


Posted in Javascript onFebruary 05, 2017

本文实例为大家分享了js上下滑动效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .box{
  width: 512px;
  height: 400px;
  margin:100px auto;
  overflow: hidden;
  position: relative;
  border: 1px solid red;
 }
 .box img{
  position: absolute;
  left: 0;
  top: 0;
 }
 .box div{
  width: 512px;
  height: 200px;
  position: absolute;
  left: 0;
 }
 .up{
  top:0;
 }
 .down{
  top: 200px;
 }
 </style>
 <script> 
 window.onload = function(){
 function $(id){ return document.getElementById(id);}
 var num = 0;
 var timer;
 var timer1;
 $("picup").onmouseover = function(){ //往下走
  timer = setInterval(function(){
  if(num>=0){
   clearInterval(timer);
  }else{
   num+=3;
   $("pic").style.top = num +"px";
  }
  },10);
 }
 $("picup").onmouseleave = function(){
  clearInterval(timer);
 }
 $("picdown").onmouseover = function(){ //往上走
  timer1 = setInterval(function(){
  if(num <= -1070){
   clearInterval(timer1);
  }else{
   num-=3;
   $("pic").style.top = num +"px";
  }
  },30);
 }
 $("picdown").onmouseleave = function(){
  clearInterval(timer1);
 }
 }
 </script>
</head>
<body>
 <div class="box">
 <img src="mi.png" alt="" id="pic">
 <div class="up" id="picup"></div>
 <div class="down" id="picdown"></div>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
Vue精简版风格概述
Jan 30 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
简单实现js无缝滚动效果
Feb 05 #Javascript
完美的js图片轮换效果
Feb 05 #Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 #Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 #Javascript
Vue.js学习示例分享
Feb 05 #Javascript
JavaScript定时器制作弹窗小广告
Feb 05 #Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 #Javascript
You might like
PHP的SQL注入过程分析
2012/01/06 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php遍历数组的方法分享
2012/03/22 PHP
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python中的字符串替换操作示例
2016/06/27 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python的继承知识点总结
2018/12/10 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Python实现分数序列求和
2020/02/25 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
办公室经理岗位职责
2014/01/01 职场文书
迟到检讨书1000字
2014/01/15 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
编写python程序的90条建议
2021/04/14 Python
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
nginx 配置指令之location使用详解
2022/05/25 Servers
Oracle锁表解决方法的详细记录
2022/06/05 Oracle
Java中的Kotlin 内部类原理
2022/06/16 Java/Android