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学习笔记(六) Date 日期类型
Jun 19 Javascript
php+js实现倒计时功能
Jun 02 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
什么是SOLID
Mar 24 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
摩卡咖啡
2021/03/03 咖啡文化
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php通用防注入程序 推荐
2011/02/26 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
php身份证号码检查类实例
2015/06/18 PHP
php实现微信支付之退款功能
2018/05/30 PHP
js模拟类继承小例子
2010/07/17 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
Fabric 应用案例
2016/08/28 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
人工神经网络算法知识点总结
2019/06/11 Python
python Canny边缘检测算法的实现
2020/04/24 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
挪威手表购物网站:Klokker
2016/09/19 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
新东网科技Java笔试题
2012/07/13 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
父亲节活动策划方案
2014/08/24 职场文书
北京青年观后感
2015/06/15 职场文书
特种设备安全管理制度
2015/08/06 职场文书