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 类定义的4种方法
Sep 12 Javascript
jquery 插件学习(六)
Aug 06 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
基于JS实现视频上传显示进度条
May 12 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 smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
JavaScript效率调优经验
2009/06/04 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
Node.js实现数据推送
2016/04/14 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
Node.js编写CLI的实例详解
2017/05/17 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
Python常用模块介绍
2014/11/21 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
Python类super()及私有属性原理解析
2020/06/15 Python
十八大闭幕感言
2014/01/22 职场文书
生产部岗位职责范文
2014/02/07 职场文书
教师自我反思材料
2014/02/14 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
加强作风建设工作总结
2014/10/23 职场文书