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


Posted in Javascript onSeptember 11, 2014

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

下面分享一个小技巧,根据锚点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>
Javascript 相关文章推荐
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 #Javascript
js通过location.search来获取页面传来的参数
Sep 11 #Javascript
Javascript中设置默认参数值示例
Sep 11 #Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 #Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 #Javascript
用js传递value默认值的示例代码
Sep 11 #Javascript
js图片实时加载提供网页打开速度
Sep 11 #Javascript
You might like
一段php加密解密的代码
2007/07/16 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
python删除文本中行数标签的方法
2018/05/31 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
python中几种自动微分库解析
2019/08/29 Python
详解Python3定时器任务代码
2019/09/23 Python
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
运动会入场词50字
2014/02/20 职场文书
关于感恩的作文
2019/08/26 职场文书
七年级作文之秋游
2019/10/21 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技