zoukankan html css js c++ java

仿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

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

查看全文

相关阅读:
Elasticsearch源码加载到eclipse调试
 Elasticsearch基础教程
 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
 访问WEB-INF下的JSP （转载）
SqlServer的代理问题
 SqlServer进行程序跟踪
 git简单的修改
 Linux部署项目
 网址仓库
 Linux基础

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