右侧客服 运动案例 

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 3000px;
			}
			#box{
				width: 100px;
				height: 150px;
				background: red;
				position: absolute;
				right: 0;
				top: 50%;

			}
		</style>

　　

<div id="box"></div>

		<script src="js/move.js"></script>
		<script type="text/javascript">
			
			window.onscroll = function(){
				var box = document.getElementById("box");
				
				var screenHeight = document.documentElement.clientHeight || document.body.scrollTop;
				var boxHei = box.offsetHeight;
				var oTop =(screenHeight - boxHei)/2;
				
				var nowScroll = document.documentElement.scrollTop || document.body.scrollTop;
				
				var nowTop = parseInt(oTop+nowScroll);
				
				move(nowTop);
				
			}
				var time;
				function move(iTarget)
				{
					var box = document.getElementById("box");
					clearInterval(time);
					time = setInterval(function(){
						var speed = (iTarget - box.offsetTop)/6;
						speed = speed>0?Math.ceil(speed):Math.floor(speed);
						
						if(box.offsetTop == iTarget)
						{
							clearInterval(time);
						}else{
							box.style.top = box.offsetTop + speed + "px";
						}
					},30)
				}
			
				

		</script>

　　move.js

//一次改進版
//function move(obj, attr, end, start, stepNum) {
//
//	var speed = (end - start) / stepNum;
//	this.time = setInterval(function() {
//		start += speed;
//		if (start >= end && speed > 0) {
//			clearInterval(this.time);
//			start = end;
//		}
//		if (start <= end && speed < 0) {
//			clearInterval(this.time);
//			start = end;
//		}
//		obj.style[attr] = start + "px";
//	}, 10)
//}

function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr]
	}else{
		return getComputedStyle(obj)[attr];
	}
}

//二次改進版
function move(obj, attr, end,stepNum,fn) {
	var start = parseInt(getStyle(obj,attr));
	var speed = (end - start) / stepNum;
	clearInterval(obj.time);
	obj.time = setInterval(function() {
		start += speed;
		if (start >= end && speed > 0) {
			clearInterval(obj.time);
			start = end;
			if(fn){
				fn();
			}
			
		}
		if (start <= end && speed < 0) {
			clearInterval(obj.time);
			start = end;
			if(fn)
			{
				fn();
			}
			
		}
		obj.style[attr] = start + "px";
	}, 10)
}

　　

利用jq实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-2.2.1.js"></script>
	<style>
		#box{
			width:100px;
			height:100px;
			background-color:red;
			position:absolute;
			left: 0;
			top:50%;
			transform:translateY(-50px);
		}
	</style>
</head>
<body style="height:2000px">
	<div id="box">
		
	</div>

	<script>
		$(function(){
			var defaul = $('#box');
			var defaultTop = defaul.offset().top

			$(window).on('scroll',function(){src()});

			function src(){
				var offsetTop = defaultTop + $(window).scrollTop()+"px";
				defaul.animate({top:offsetTop},
				{
					duration:600,
					queue:false
				})
			}
		})
	</script>
</body>
</html>

　　

posted @ 2016-03-06 14:11  mingjixiaohui  阅读(189)  评论(0)    收藏  举报