编程 Javascript

利用jquery制作滚动到指定位置触发动画

Posted in Javascript onMarch 26, 2016

利用CSS3的 animation 动画特性来完成的，对IE的兼容性不是太好，适用与手机端。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sas</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.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',500);
	}
	
/*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>

- Author -

260kk

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js不是基础的基础

Dec 24 Javascript

Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍

Dec 13 Javascript

使用node.js 制作网站前台后台

Nov 13 Javascript

实例讲解jquery与json的结合

Jan 07 Javascript

WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)

Jan 26 Javascript

jQuery获取多种input值的简单实现方法

Jun 20 Javascript

JavaScript中this的四个绑定规则总结

Sep 26 Javascript

jQuery结合jQuery.cookie.js插件实现换肤功能示例

Oct 14 jQuery

浅谈在react中如何实现扫码枪输入

Jul 04 Javascript

vue2.0 可折叠列表 v-for循环展示的实例

Sep 07 Javascript

15个顶级开源JavaScript框架和库

Oct 10 Javascript

vue.js实现双击放大预览功能

Jun 23 Javascript

jQuery常用的一些技巧汇总

Mar 26 #Javascript

javascript拖拽应用实例（二）

Mar 25 #Javascript

几种经典排序算法的JS实现方法

Mar 25 #Javascript

javascript拖拽应用实例

Mar 25 #Javascript

JavaScript学习笔记之创建对象

Mar 25 #Javascript

JS实现的颜色实时渐变效果完整实例

Mar 25 #Javascript

JavaScript学习笔记之ES6数组方法

Mar 25 #Javascript