js仿小米手機上下滑動效果
更新時間：2017年02月05日 11:42:44 作者：秋天1014童話
這篇文章主要為大家詳細介紹了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)文章
js 數(shù)組的for循環(huán)到底應(yīng)該怎么寫？
說實話，我是個比較喜歡懷疑權(quán)威的人，但是在有些權(quán)威的問題一直在我面前閃，閃啊閃，我就開始不懷疑他們了，因為有10000個人說這個東西是對的，我就會覺得它的確是對的吧。2010-05-05
前端圖片懶加載(lazyload)的實現(xiàn)方法(提高用戶體驗)
圖片懶加載又稱圖片延時加載、惰性加載，即在用戶需要使用圖片的時候加載，這樣可以減少請求，節(jié)省帶寬，提高頁面加載速度，相對的，也能減少服務(wù)器壓力,下面通過本文給大家分享圖片懶加載lazyload的實現(xiàn)方法，感興趣的朋友一起看看吧2017-08-08
JavaScript基礎(chǔ)之靜態(tài)方法和實例方法分析
這篇文章主要介紹了JavaScript基礎(chǔ)之靜態(tài)方法和實例方法,簡單分析了javascript靜態(tài)方法及實例方法的定義、使用相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-12-12
說明: 略作修改,主要是一些很初級的操作; 又很多相似的文章,不過這個很權(quán)威2008-08-08
這篇文章主要介紹了js運算符的一些特殊用法,需要的朋友可以參考下2018-07-07
JavaScript深入淺出__proto__和prototype
這篇文章主要介紹了JavaScript深入淺出__proto__和prototype，文章基于JavaScript的相關(guān)資料展開詳細的內(nèi)容介紹。具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
網(wǎng)絡(luò)請求axios與fetch的區(qū)別及使用示例
Fetch和Axios是兩個常用的JavaScript庫,用于處理數(shù)據(jù)請求,下面這篇文章主要給大家介紹了關(guān)于網(wǎng)絡(luò)請求axios與fetch的區(qū)別及使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了微信小程序開發(fā)實現(xiàn)消息推送，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
頁面的日期格式是：YYYY-MM-DD，而數(shù)據(jù)庫中的日期格式是：YYYYMMDD，兩者之間需要轉(zhuǎn)換一下，本文利用正則表達式去掉-2014-06-06
這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)帶動畫過渡的彈出框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08