利用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>
Javascript 相关文章推荐
javascript 二进制运算技巧解析
Nov 27 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 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
You might like
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP新手上路(五)
2006/10/09 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
js导航菜单(自写)简单大方
2013/03/28 Javascript
extjs render 用法介绍
2013/09/11 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
如何使用python写截屏小工具
2020/09/29 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
餐饮主管岗位职责
2013/12/10 职场文书
毕业生就业自荐书
2013/12/15 职场文书
汽车销售顾问求职自荐信
2014/01/01 职场文书
会计岗位职责模板
2014/03/12 职场文书
产品售后服务承诺书
2014/05/21 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
Python中文纠错的简单实现
2021/07/07 Python
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers