快捷導(dǎo)航

jquery根據(jù)錨點offset值實現(xiàn)動畫切換

更新時間：2014年09月11日 17:05:28 投稿：whsnow

點擊后僵硬的切換是不是很不爽，下面為大家介紹的是根據(jù)錨點offset值來實現(xiàn)動畫切換，喜歡的朋友不要錯過

錨點相信大家都使用過吧！點擊后僵硬的切換是不是很不爽呢？

下面分享一個小技巧，根據(jù)錨點offset值來實現(xiàn)動畫切換

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style>
*{ margin:0; padding:0;}
.main{ width:1000px; margin:0 auto; position:relative; }
.main img{ float:left;}

.bg{ position:absolute; width:100%; z-index:-5;}
.bg01{ height:885px;background:url(../images/b_01.jpg) no-repeat center;}
.bg02{ height:938px;background:url(../images/b_04.jpg) no-repeat center; }
.bg03{ height:946px;background:url(../images/b_02.jpg) no-repeat center; }
.bg04{ height:946px;background:url(../images/b_03.jpg) no-repeat center; }

.div_scoll{ position:fixed; width:50px; height:200px; right:100px; top:50%;}
a{ display:block; background:#3F6; color:#000; width:50px; height:50px; }
</style>
</head>

<body>
<div class="wrapper">
<div class="main">
<div id="tab_01" class="tab"><img src="images/m_01.jpg" alt="" /></div>
<div id="tab_02" class="tab"><img src="images/m_04.jpg" alt="" /></div>
<div id="tab_03" class="tab"><img src="images/m_02.jpg" alt="" /></div>
<div id="tab_04" class="tab"><img src="images/m_03.jpg" alt="" /></div>
</div> 
<div class="bg"> 
<div class="bg01" id="bg01"></div> 
<div class="bg02" id="bg02"></div> 
<div class="bg03" id="bg03"></div> 
<div class="bg04" id="bg04"></div> 
</div> 
</div>
<div class="div_scoll">
<a href="#bg01">圖1</a>
<a href="#bg02">圖2</a>
<a href="#bg03">圖3</a>
<a href="#bg04">圖4</a>
</div>
<script>
$(function(){
$(".div_scoll a").click(function(){
$("html,body").animate({ scrollTop:$($(this).attr("href")).offset().top + "px"},1000);
});
});

</script>
</body>
</html>

您可能感興趣的文章:

相關(guān)文章

JAVASCRIPT IE 與 FF中兼容問題小結(jié)
在不同瀏覽器中對于一些屬性的支持也不一樣，下面是對ie和firefox的一些小結(jié)。
2009-02-02
js下為表格內(nèi)部動態(tài)添加行的代碼
最近的一個項目中在保存表單數(shù)據(jù)時，要用到一個動態(tài)添加行的功能。平時動態(tài)添加行只是在表格的最下面添加，現(xiàn)在在表格中間動態(tài)添加行，而且表格內(nèi)部是包含并且單元格的，其實很簡單，下面貼出代碼。
2010-06-06
javascript數(shù)據(jù)結(jié)構(gòu)之多叉樹經(jīng)典操作示例【創(chuàng)建、添加、遍歷、移除等】
這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之多叉樹經(jīng)典操作,簡單描述了多叉樹的概念,并結(jié)合實例形式分析了javascript多叉樹的創(chuàng)建、添加、遍歷、移除等常見操作方法,需要的朋友可以參考下
2018-08-08
Javascript開發(fā)包大全整理
Javascript開發(fā)包大全整理...
2006-12-12
js實現(xiàn)省市級聯(lián)效果分享
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)省市級聯(lián)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
微信小程序?qū)崙?zhàn)篇之購物車的實現(xiàn)代碼示例
本篇文章主要介紹了微信小程序?qū)崙?zhàn)篇之購物車的實現(xiàn)代碼示例，詳細(xì)的介紹了購物車的功能實現(xiàn)，具有一定的參考價值，有興趣的可以了解一下
2017-11-11
如何使用js查找數(shù)組中符合條件的元素
這篇文章主要給大家介紹了關(guān)于如何使用js查找數(shù)組中符合條件的元素,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2023-04-04
Aptana調(diào)試javascript圖解教程
用Aptana軟件來調(diào)試javascript的方法，一般情況下大家都使用firefox瀏覽器+firebug來調(diào)試的。
2009-11-11
Javascript 判斷 object 的特定類轉(zhuǎn)載
Javascript 判斷 object 的特定類轉(zhuǎn)載...
2007-02-02
詳解微信小程序緩存--緩存時效性
這篇文章主要介紹了微信小程序緩存時效性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05