利用jquery制作滾動到指定位置觸發(fā)動畫
更新時間：2016年03月26日 10:12:46 作者：260kk
本文只是一個簡單的演示程序，大家可以根據(jù)自己的需求進行修改，以達(dá)到自己想要實現(xiàn)的功能。
利用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(); //監(jiān)控窗口已滾動的距離;
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" >觸發(fā)動畫</div>
</div>
<div class="xs"></div>
</body>
</html>
相關(guān)文章
javascript trim函數(shù)在IE下不能用的解決方法
trim 函數(shù)在firefox 下面使用沒有問題，但是在IE下就報錯，下面是可行的解決方法，大家可以看看2014-09-09
這篇文章主要介紹了jQuery如何分別獲取選中的復(fù)選框值,需要的朋友可以參考下2014-06-06
Jquery中的$.each獲取各種返回類型數(shù)據(jù)的使用方法
each()方法能使DOM循環(huán)結(jié)構(gòu)簡潔，不容易出錯。each()函數(shù)封裝了十分強大的遍歷功能，使用也很方便，它可以遍歷一維數(shù)組、多維數(shù)組、DOM, JSON 等等，在javaScript開發(fā)過程中使用$each可以大大的減輕我們的工作量。2015-05-05
jQuery彈層插件jquery.fancybox.js用法實例
這篇文章主要介紹了jQuery彈層插件jquery.fancybox.js用法,結(jié)合實例形式分析了jQuery彈出層插件jquery.fancybox.js的功能、用法與相關(guān)注意事項,需要的朋友可以參考下2016-01-01
select中所有option選項如何刪除，本文使用jquery簡單實現(xiàn)下，有此需求的朋友可以參考下，希望對大家有所幫助2013-08-08
JQuery的重要性對一個coder來說應(yīng)該是不言而喻的， 多少次在應(yīng)聘的時候被問及是否會JQuery；多少次在寫腳本的時候因為瀏覽器的不兼容而吐血；多少次因為需要用腳本做一個簡單的效果而寫到手抽筋。JQuery出現(xiàn)后，很多問題都被輕易解決了。2010-07-07
這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
在頁面的指定位置實現(xiàn)的圖片自動的左右輪流切換展示效果，當(dāng)點擊圖片左下的標(biāo)簽(或中間的小圓點)切換到對應(yīng)的圖片。接下來通過本文給大家分享用jQuery實現(xiàn)圓點圖片輪播效果實例代碼，需要的朋友參考下2017-03-03
為促進大家交流與學(xué)習(xí)，開源此插件。在此感謝非老大開源！不多說了，先圖片后代碼。2010-10-10
JQuery 進入頁面默認(rèn)給已賦值的復(fù)選框打鉤
這篇文章主要介紹了JQuery 進入頁面默認(rèn)給已賦值的復(fù)選框打鉤的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-03-03