仿QQ空間長圖滾動效果

時間 2020-01-29

標籤空間滾動效果欄目騰訊简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{padding:0; margin:0;}
img{border:0;}
.boxWrap{width:440px; height:500px; border:2px solid #ccc; position:absolute; top:50%; left:50%; margin-top:-250px; margin-left:-220px; overflow:hidden;}
.imgDiv{background:url(psb.jpg) 0 0 no-repeat; width:440px; height:3523px; margin-top:0;}
.btns{width:440px; height:250px; position:absolute; left:0; display:block; filter:alpha(opacity=0); opacity:0;}
.up{top:0;}
.down{bottom:0;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
    $(function(){
     var f=0;//第一次載入
  var scrollobj1,scrollobj2,scrollobj3;
  var current_mTop=0;
  var min_mTop=$(".boxWrap").height()-$(".imgDiv").height();//注意margin-top是負數
  $(".boxWrap").mouseover(function(){//第一次載入的時候，鼠標無論移到哪圖片都是向下滾動
      if(f==0){
    scrollobj1=setInterval(function(){
     current_mTop--;
     $(".imgDiv").css("margin-top",current_mTop);
    },10);
   }
  }).mouseout(function(){
   clearInterval(scrollobj1);
   f=1;//不是第一次載入
  });
  $(".btns").mouseover(function(){
      if($(this).hasClass("down")&&f==1){
       scrollobj2=setInterval(function(){
        current_mTop==min_mTop?current_mTop:current_mTop--;
     $(".imgDiv").css("margin-top",current_mTop);
    },10);
   }else if($(this).hasClass("up")&&f==1){
       clearInterval(scrollobj2);
    scrollobj3=setInterval(function(){
        current_mTop==0?current_mTop:current_mTop++;
     $(".imgDiv").css("margin-top",current_mTop);
    },10);
   }
  }).mouseout(function(){
      clearInterval(scrollobj2);
   clearInterval(scrollobj3);
  })
 })
</script>
</head>
<body>
<div class="boxWrap">
    <div class="imgDiv"></div>
 <span class="btns up"></span>
 <span class="btns down"></span>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。