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 相关文章推荐
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
Angular4学习笔记router的简单使用
Mar 30 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
关于vue里页面的缓存详解
Nov 04 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小教程之实现链表
2014/06/09 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
jquery 插件学习(一)
2012/08/06 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
python实现socket端口重定向示例
2014/02/10 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python中关于字符串对象的一些基础知识
2015/04/08 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python读写docx文件的方法
2018/05/08 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python 数据类型强制转换的总结
2021/01/25 Python
意大利网上药房:Farmacia 33
2020/01/27 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
教学实验楼管理制度
2014/02/01 职场文书
篮球比赛口号
2014/06/10 职场文书
农民工讨薪标语
2014/06/26 职场文书
单位工作证明范文
2014/09/14 职场文书
交通安全教育主题班会
2015/08/12 职场文书