脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 锚点动画

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

 更新时间：2014年09月11日 17:05:28   投稿：whsnow  
点击后僵硬的切换是不是很不爽，下面为大家介绍的是根据锚点offset值来实现动画切换，喜欢的朋友不要错过

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

下面分享一个小技巧，根据锚点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>
您可能感兴趣的文章:

相关文章

  • Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失的示例代码

    Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失的示例代码

    这篇文章主要介绍了Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • JavaScript类的继承方法小结【组合继承分析】

    JavaScript类的继承方法小结【组合继承分析】

    这篇文章主要介绍了JavaScript类的继承方法,结合实例形式总结分析了JavaScript继承的概念、原理及组合继承相关实现技巧,需要的朋友可以参考下
    2018-07-07
  • 原生JS封装Ajax插件(同域、jsonp跨域)

    原生JS封装Ajax插件(同域、jsonp跨域)

    这篇文章主要为大家详细介绍了原生JS封装Ajax插件，为大家介绍不同域之间互相请求资源的跨域,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript获取页面元素的常用方法详解

    JavaScript获取页面元素的常用方法详解

    这篇文章主要介绍了JavaScript获取页面元素的常用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 详解JavaScript中Arguments对象用途

    详解JavaScript中Arguments对象用途

    本文主要介绍了详解JavaScript中Arguments对象用途，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • javascript中alert()与console.log()的区别

    javascript中alert()与console.log()的区别

    我们在做js调试的时候使用 alert 可以显示信息，调试程序，alert 弹出窗口会中断程序， 如果要在循环中显示信息，手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息，但很多功能支持都没有 console 好
    2015-08-08
  • Html+CSS+JS轮播图实现源码(手动轮播,自动轮播)

    Html+CSS+JS轮播图实现源码(手动轮播,自动轮播)

    今天做网站的时候需要用上JS轮播图代码,而且还要求是原生的JS代码,下面这篇文章主要给大家介绍了关于Html+CSS+JS轮播图实现的相关资料,文中介绍的方法包括手动轮播和自动轮播,需要的朋友可以参考下
    2023-06-06
  • Js中获取frames中的元素示例代码

    Js中获取frames中的元素示例代码

    本文为大家介绍下使用js获取父frame元素及获取子frame元素的实现代码，有需求的朋友可以参考下，希望对大家有所
    2013-07-07
  • JavaScript中map属性示例详解

    JavaScript中map属性示例详解

    Map对象在JavaScript中提供了一种灵活且高效的键值对存储方式,它具有许多实用的方法,如set()、get()、has()和delete()等,使得操作和管理键值对变得更加简单,这篇文章主要介绍了JS中map属性,需要的朋友可以参考下
    2024-08-08
  • Javascript验证用户输入URL地址是否为空及格式是否正确

    Javascript验证用户输入URL地址是否为空及格式是否正确

    这篇文章主要介绍了Javascript验证用户输入URL地址是否为空及格式是否正确,很实用，需要的朋友可以参考下
    2014-10-10

最新评论