js仿小米手機上下滑動效果
更新時間：2017年02月05日 11:42:44 作者：秋天1014童話
這篇文章主要為大家詳細(xì)介紹了JavaScript仿小米手機上下滑動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js上下滑動效果的具體代碼，供大家參考，具體內(nèi)容如下
<!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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中const、var和let區(qū)別淺析
在JavaScript中有三種聲明變量的方式：var、let、const。但是有朋友不清楚這三種聲明變量的區(qū)別，下面腳本之家小編給大家詳細(xì)介紹下js中const、var和let的區(qū)別，感興趣的朋友一起看看吧2016-10-10
javascript 調(diào)用其他頁面的js函數(shù)或變量的腳本
web開發(fā)的時候，有時候需要使用其他頁面上寫好的javasript函數(shù)、變量。如彈出窗口需要使用父窗口中的函數(shù)，框架1需要使用框架2中的函數(shù)。2008-05-05
接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應(yīng)該是抽象的，需要由具體的類去實現(xiàn)，然后第三方就可以通過這組抽象方法調(diào)用，讓具體的類執(zhí)行具體的方法2022-10-10
audio是音頻組件,用于播放一個基于http協(xié)議的音頻資源,這篇文章主要給大家介紹了關(guān)于微信小程序audio組件在ios端無法播放的解決辦法,需要的朋友可以參考下2021-07-07
JavaScript中的Window.open()用法示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中Window.open()用法的相關(guān)資料,今天在項目中用到了彈出子窗口,就想到了用JavaScript實現(xiàn)的兩種方法,其中一個就是window.open(),需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序獲取用戶信息及手機號，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
本文為大家詳細(xì)介紹下使用js如何監(jiān)聽鍵盤事件，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-07-07
這篇文章主要介紹了js實現(xiàn)頭像圖片切割縮放及無刷新上傳圖片的方法,涉及javascript結(jié)合php實現(xiàn)文件無刷新上傳等相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
JS實現(xiàn)動態(tài)增加和刪除li標(biāo)簽行的實例代碼
下面小編就為大家?guī)硪黄狫S實現(xiàn)動態(tài)增加和刪除li標(biāo)簽行的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
發(fā)現(xiàn)只讀文本框有一個缺陷,當(dāng)鼠標(biāo)焦點在文本框里面的時候按回退鍵(backSpace), 會退回到前一個頁面2010-04-04