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

前端技术 2023/09/06 JavaScript

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

下面分享一个小技巧，根据锚点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>

本文地址：https://www.stayed.cn/item/17416

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案