仿QQ空間長圖效果簡易版--母親節感恩

本文轉載自查看原文 2014-05-12 01:08 2764 代碼小結/ JavaScript&Jquery

母親節最火的兩件事

1.NBA 杜蘭特在獲MVP催淚致辭獻給母親：她才是真的MVP。

2.QQ空間長圖

--------------------------------------------------------------------------------------------

今天的demo就是模擬 QQ空間這個效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html> <head> <title> qq長圖 </title>
    <script>
  var iSpeed=5;
  var timer=null;
window.onload=function  () {
      var oParent=document.getElementById('divParent');
      var oChild=document.getElementById('divChild');
      var oImg=document.getElementById('img1');
      var imgHeight=oImg.offsetHeight;//圖片的總高度
      var  parentZone=oParent.offsetHeight; 
      var halfPos=parseInt(parentZone/2,10);
      oParent.onmousemove=function(ev){
       var oEvent=ev||event;
       var disY=oEvent.clientY - oParent.offsetTop;;//鼠標的有效位置
       clearInterval(timer);
         timer=setInterval(function(){
          if(disY<halfPos){ //向上移動
            if(oChild.offsetTop<0){ //如果圖片移動到頂部 就繼續運動
               oChild.style.marginTop=oChild.offsetTop+iSpeed+'px';
            }
            else{
               clearInterval(timer);
                 oChild.style.marginTop=0; //如果到了頂部
            }
       }
       else{ //向下移動
           if(Math.abs(oChild.offsetTop)<imgHeight-oParent.offsetHeight){
               oChild.style.marginTop=oChild.offsetTop-iSpeed+'px';
            }
            else{
               clearInterval(timer);
               oChild.style.marginTop=-imgHeight+oParent.offsetHeight+'px';
            }
            
       }
        
       },35);
      
     }

      oParent.onmouseout=function(){
       clearInterval(timer);
      }
 }
    </script > </head>

<body>
<div id="divParent" style="position:absolute;width:462px;border:1px solid #abcdef;height:500px;overflow:hidden;cursor:pointer;"> 
  <div id="divChild" style="position:relative;margin-top:0;">
  <img src="mmhappy.jpg" border="0" id="img1"/ > </div>
</div>

</body>
</html>

查看具體演示效

2個小時后雷霆vs快船第四場 cctv5

最后祝天下母親身體健康，萬事如意

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 2021年母親節是幾月幾日?母親節的來歷簡介 25個美麗的母親節桌面壁紙 JS仿QQ空間鼠標停在長圖片時候圖片自動上下滾動效果 java版仿qq簡易聊天程序 python簡易版微信或QQ轟炸寫了一個簡單的計算父親節母親節等日期的方法如何用純 CSS 為母親節創作一顆像素畫風格的愛心仿QQ空間根據位置彈出PopupWindow顯示更多操作效果 js簡易版煙花簡易版jQuery——mQuery