javascript弹性运动

最新推荐文章于 2020-02-28 18:47:54 发布

tarajk05

最新推荐文章于 2020-02-28 18:47:54 发布

阅读量341

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/tarajk05/article/details/42706385

版权

html css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>网页标题</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css">
    	*{margin:0;padding: 0;}
    	#pro{width: 185px;background-color: black;position: relative;float: left;}
    	#outer{width: 100%;background-color:lightgreen;position: absolute;left:-185px;}
    	#anniu{width: 5px;height: 20px;background-color: gray;float: left;position: relative;border-radius: 5px;}
    	a{text-decoration: none;}
    </style>
    <script type="text/javascript">
    window.οnlοad=function(){
    	var anniu = document.getElementById("anniu");
    	var outer = document.getElementById("outer");
    	anniu.onmouseover = function(){
    		startMove(outer,0);
    	};
    };
    var iSpeed = 0;
    var left = 0;
function startMove(obj, iTarget)
{
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        iSpeed += (iTarget - obj.offsetLeft)/5;
        iSpeed *= 0.7;
        
        left += iSpeed;
        
        if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
            clearInterval(obj.timer);
            obj.style.left = iTarget + 'px';
        }else{
            obj.style.left = obj.offsetLeft + iSpeed + 'px';    
        }        
        
    }, 30);
}
    </script>
</head>
<body>
<div id="pro">
	<div id="outer">
		<span style="font-size:20px;color:white;text-align:center;display:block;margin:0 auto;">这是标题一</span>
		<span style="font-size:16px;color:white;text-align:center;display:block;margin:0 auto;">这是副标题</span>
		<span style="font-size:14px;color:white;text-align:center;display:block;margin:0 auto;">这是内容</span>
		<span style="font-size:12px;color:white;text-align:center;display:block;margin:0 auto;">这是主要内容<br>这是主要内容<br>这是主要内容<br>这是主要内容</span>
	</div>
</div>
<a href="javascript:;"><div id="anniu"></div></a>

<script type="text/javascript">
var height= document.documentElement.clientHeight;
var pro = document.getElementById("pro");
var outer = document.getElementById("outer");
var anniu = document.getElementById("anniu");
outer.style.top = (height-outer.offsetHeight)/2+"px";
anniu.style.top = (height-anniu.offsetHeight)/2+"px";
pro.style.height = height+"px";
</script>
</body>
</html>

tarajk05

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript弹性运动

示例代码：网页标题 *{margin:0;padding: 0;} #pro{width: 185px;background-color: black;position: relative;float: left;} #outer{width: 100%;background-color:lightg
复制链接

扫一扫