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中各种编码解码函数的区别和注意事项
Aug 19 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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 GD绘制24小时柱状图
2008/06/28 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP培训要多少钱
2017/06/06 PHP
JS模拟多线程
2007/02/07 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
再论Javascript的类继承
2011/03/05 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
Javascript缓存API
2016/06/14 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
python取代netcat过程分析
2018/02/10 Python
Python中的函数作用域
2018/05/07 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
环境建设实施方案
2014/03/14 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
作弊检讨书
2015/01/27 职场文书
入门学习Go的基本语法
2021/07/07 Golang
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang