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

母亲节最火的两件事

1.NBA 杜兰特在获MVP催泪致辞献给母亲：她才是真的MVP。

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

2.QQ空间长图

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

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

今天的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

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