仿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;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

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

相关阅读:
【Linux】5.5 Shell运算符
【Linux】5.4 Shell数组
【Linux】5.3 Shell字符串
【Linux】5.2 Shell变量
【Linux】5.1 Shell简介
【Linux】3.11 包管理工具(RPM和YUM)
【Linux】3.10 进程管理(重点)
【Linux】3.9 网络配置
【Linux】3.8 Linux磁盘分区、挂载
【Linux】3.7 定时任务调度

原文地址：https://www.cnblogs.com/zjflove/p/3722653.html