zoukankan      html  css  js  c++  java
  • (41)JS运动之右側中间悬浮框(对联悬浮框)


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #div1{
    	100px;
    	height:150px;
    	background:red;
    	position:absolute;
    	right:0;
    	bottom:0;
    }
    
    
    
    </style>
     
    
    <script>
    
    window.onscroll=function (){
    	var oDiv=document.getElementById('div1');
    	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//做兼容
    	startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));//使用parseInt是防止可能出现除2之后出现.5情况,导致悬浮框上下抖动。
    	
    };
    
    var timer=null;
    function startMove(iTarget)
    {
    	var oDiv=document.getElementById('div1');
    	clearInterval(timer);
    	timer=setInterval(function (){
    		var speed=(iTarget-oDiv.offsetTop)/4;
    		speed=speed>0?Math.ceil(speed):Math.floor(speed);
    		if(oDiv.offsetTop==iTarget)
    		{
    			clearInterval(timer);
    		}
    		else
    		{
    			document.getElementById('txt1').value=oDiv.offsetTop;
    			oDiv.style.top=oDiv.offsetTop+speed+'px';
    		}
    	
    	},30);
    }
    
    </script>
    </head>
    <body style="height:2000px;" >
        <input type="text" id="txt1" style="position:fixed; right:0; top:0;"/>
        <div id="div1"></div>
    
    </body>
    </html>

    效果图:


  • 相关阅读:
    Spark SQL+day04笔记
    Spark 环境搭建
    海量数据处理 算法总结2
    Scala面试题 看过1
    HTML-table、form表单标签的介绍
    Java-CSS美化网页元素
    Java-BOM与DOM对象
    java-CSS盒子模型、浮动、定位
    java-基础面试题(2)
    Java-io流
  • 原文地址:https://www.cnblogs.com/claireyuancy/p/7262491.html
Copyright © 2011-2022 走看看