jquery 滚动到指定位置触发动画

Posted 260kk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 滚动到指定位置触发动画相关的知识,希望对你有一定的参考价值。

jquery 滚动到指定位置触发动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sas</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
.gs{
position:relative;
top:800px; 
background-color:#099; 
left:150px; width:80px; 
}
.xz{

animation:roate 2s;
animation-fill-mode:forwards;
animation-direction:alternate;
	}

@keyframes roate{
	from { transform:rotate(0deg);
	width:100px;
    height:100px; }
	to{transform:rotate(360deg);
	width:200px;
    height:200px;
	}}
.xs{ width:50px; float: left; height:30px; background-color: #F90; position:fixed; left:700px; top:0px;}

</style>
</head>

<body>
<script type="text/javascript">
function gdjz(div,cssname,offset){
	var a,b,c,d;
	d=$(div).offset().top;
	a=eval(d + offset);
	b=$(window).scrollTop(); 
	c=$(window).height();
	if(b+c>a){
		$((div)).addClass((cssname));
		}
	}
	
$(document).ready(function(e) {
$(window).scroll(function(){
	gdjz("#dh",'xz',100);
	}
	
/*var a,b,c;
a=$("#dh").offset().top;//元素相对于窗口的距离
b=$(window).scrollTop(); //监控窗口已滚动的距离;
c=$(document).height();//整个文档的高度
d=$(window).height();//浏览器窗口的高度*/
	
/*if(d+b>a+100){
	$("#dh").addClass("xz");
	}
*/
	);
});
</script>
<div style="height:1800px; background-color:#999; width:500px; float:left;">
<div id="dh"  class="gs" >触发动画</div>
</div>
<div class="xs"></div>
</body>
</html>



以上是关于jquery 滚动到指定位置触发动画的主要内容,如果未能解决你的问题,请参考以下文章

如何用jquery实现页面滚动到指定位置后触发事件的效果?

如何用jquery实现页面滚动到指定位置后触发事件的效果

如何通过JQuery将DIV的滚动条滚动到指定的位置

滚动到位置的jQuery动画不起作用

JQuery 动画在 Chrome 中触发较晚

jQuery 滚动动画简单版