仿QQ空间长图效果简易版--母亲节感恩

手机网站

母亲节最火的两件事

 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

最后祝天下母亲身体健康，万事如意

posted @ 2014-05-12 01:08  哈哈2222  阅读(3026)  评论(12)  编辑  收藏  举报