信鸽网

jquery根据锚点offset值实现动画切换

  作者：bea

锚点相信大家都使用过吧！点击后僵硬的切换是不是很不爽呢？ 下面分享一个小技巧，根据锚点offset值来实现动画切换 <!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"><

锚点相信大家都使用过吧！点击后僵硬的切换是不是很不爽呢？


下面分享一个小技巧，根据锚点offset值来实现动画切换




<!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>无标题文档</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>




有用  |  无用

猜你喜欢

您可能感兴趣的文章: