jquery根據(jù)錨點(diǎn)offset值實(shí)現(xiàn)動(dòng)畫(huà)切換
更新時(shí)間：2014年09月11日 17:05:28 投稿：whsnow
點(diǎn)擊后僵硬的切換是不是很不爽，下面為大家介紹的是根據(jù)錨點(diǎn)offset值來(lái)實(shí)現(xiàn)動(dòng)畫(huà)切換，喜歡的朋友不要錯(cuò)過(guò)
錨點(diǎn)相信大家都使用過(guò)吧！點(diǎn)擊后僵硬的切換是不是很不爽呢？
下面分享一個(gè)小技巧，根據(jù)錨點(diǎn)offset值來(lái)實(shí)現(xiàn)動(dòng)畫(huà)切換
<!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>無(wú)標(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>
您可能感興趣的文章:
- Jquery中的offset()和position()深入剖析
- jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- jquery offset函數(shù)應(yīng)用實(shí)例
- jquery用offset()方法獲得元素的xy坐標(biāo)
- js實(shí)現(xiàn)jquery的offset()方法實(shí)例
- jQuery中offset()方法用法實(shí)例
- jQuery中offsetParent()方法用法實(shí)例
- Jquery中offset()和position()的區(qū)別分析
- 淺談jQuery的offset()方法及示例分享
相關(guān)文章
uni-app實(shí)現(xiàn)數(shù)據(jù)上拉加載更多功能實(shí)例
數(shù)據(jù)列表在很多時(shí)候,經(jīng)常會(huì)用到,下面這篇文章主要給大家介紹了關(guān)于uni-app實(shí)現(xiàn)數(shù)據(jù)上拉加載更多功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
headjs實(shí)現(xiàn)網(wǎng)站并行加載但順序執(zhí)行JS
本文主要介紹如何使用head.js實(shí)現(xiàn)網(wǎng)站并行加載但順序執(zhí)行JS，提高網(wǎng)站加載速度。需要的朋友可以看下2016-11-11
如何在?xHTML?中驗(yàn)證?noscript+meta?refresh?標(biāo)簽
這篇文章主要介紹了如何在?xHTML?中驗(yàn)證?noscript+meta?refresh?標(biāo)簽,需要的朋友可以參考下2023-03-03
淺談JavaScript的幾種繼承實(shí)現(xiàn)方式
本文主要介紹了淺談JavaScript的幾種繼承實(shí)現(xiàn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。下面通過(guò)本文給大家介紹Bootstrap 輪播(Carousel)插件，非常不錯(cuò)，需要的朋友參考下吧2016-12-12
js學(xué)習(xí)總結(jié)_基于數(shù)據(jù)類(lèi)型檢測(cè)的四種方式(必看)
下面小編就為大家?guī)?lái)一篇js學(xué)習(xí)總結(jié)_基于數(shù)據(jù)類(lèi)型檢測(cè)的四種方式(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
TypeScript遍歷Array的方法(for,forEach,every)
本文主要介紹了TypeScript遍歷Array的方法(for,forEach,every)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了JavaScript阻止瀏覽器返回按鈕的方法,可實(shí)現(xiàn)通過(guò)javascript禁用掉返回按鈕的功能,需要的朋友可以參考下2015-03-03
ECharts是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù),涵蓋各行業(yè)圖表,滿足各種需求,下面這篇文章主要給大家介紹了關(guān)于echarts地圖輪播高亮的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要給大家介紹了關(guān)于js中join()方法的相關(guān)資料,join方法用于把數(shù)組中的所有元素放入一個(gè)字符串,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10