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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用jquery制作滚动到指定位置触发动画</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:100px; 
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">
/*var a,b,c;
a=$("#dh").offset().top;//元素相对于窗口的距离
b=$(window).scrollTop(); //监控窗口已滚动的距离;
c=$(document).height();//整个文档的高度
d=$(window).height();//浏览器窗口的高度
element  标签
cssname  动画
offset  相对于窗口的距离
*/
function scrollnumber(element,cssname,offset){
	var a,b,c,d;
	d=$(element).offset().top;
	a=eval(d + offset);
	b=$(window).scrollTop(); 
	c=$(window).height();
	if(b+c>a){
		$((element)).addClass((cssname));
	}
}

function scrollfun(){
	scrollnumber("#dh1",'xz',100);
	scrollnumber("#dh2",'xz',100);
	scrollnumber("#dh3",'xz',100);
	scrollnumber("#dh4",'xz',100);
}
	
$(document).ready(function(e) {
	scrollfun();
	$(window).scroll(function(){
		scrollfun();
	});
});
</script>

<div style="height:auto; background-color:#999; width:500px; margin: 0 auto;">
	<div class="com" style="height: 500px;background-color: darkgray;position: relative;">
		<div id="dh1" class="gs" >触发动画111</div>
	</div>
	<div style="height: 600px;background-color: cadetblue;" ></div>
	<div class="com" style="height: 500px;background-color: darkgray;position: relative;">
		<div id="dh2" class="gs" >触发动画222</div>
	</div>
	<div style="height: 600px;background-color: darkseagreen;" ></div>
	<div class="com" style="height: 500px;background-color: darkgray;position: relative;">
		<div id="dh3" class="gs" >触发动画333</div>
	</div>
	<div style="height: 600px;background-color: cadetblue;" ></div>
	<div class="com" style="height: 500px;background-color: darkgray;position: relative;">
		<div id="dh4" class="gs" >触发动画444</div>
	</div>
</div>
</body>
</html>



当知道滚动方向时可以使用下面的方法

<script src="js/lib/jquery.mousewheel.js"></script>

//向下滚动时
function addClass(ele){
    var winH=$(window).height()*0.5;//可视窗口的高度的一半,更改0.5可以调整滚动到底部、中部、顶部时候开始加载
    var top=$(window).scrollTop();//可视窗口的滚动高度
    var ele_t=$(ele).offset().top;//内容区的top
    var ele_h=$(ele).height();//内容区的高

    //判断条件,看草稿图1    if(top<ele_t-winH){
        $(ele).removeClass('on');
    }else if((top>ele_t-winH)&&(top<ele_t+ele_h)){
        $(ele).addClass('on');
    }else{
        $(ele).removeClass('on');
    }
}
//向上滚动时,看草稿图2function addClass2(ele){
    var winH=$(window).height()*0.5;//更改0.5可以调整滚动到底部、中部、顶部时候开始加载
    var top=$(window).scrollTop();//可视窗口的滚动高度
    var ele_t=$(ele).offset().top;//内容区的top
    var ele_h=$(ele).height();//内容区的高

    //判断条件
    if(top>ele_t+ele_h){
        $(ele).removeClass('on');
    }else if((top<ele_t+ele_h)&&(top>ele_t-winH*2)){
        $(ele).addClass('on');
    }else{
        $(ele).removeClass('on');
    }
}





                                    
展开阅读全文

Git 实用技巧

11-24
这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值