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 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
js原生map实现的方法总结
Jan 19 Javascript
js实现电灯开关效果
Jan 19 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
用Flash图形化数据(二)
2006/10/09 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python实现两个文件合并功能
2018/04/01 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
详解Python3 pandas.merge用法
2019/09/05 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
大学校园生活自我鉴定
2014/01/13 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
课例研修方案
2014/05/31 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
医院合作意向书范本
2015/05/08 职场文书
运动会宣传稿50字
2015/07/23 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android