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 相关文章推荐
jQuery版仿Path菜单效果
Dec 15 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
无限树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
Oracle 常见问题解答
2006/10/09 PHP
php的header和asp中的redirect比较
2006/10/09 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
php探针不显示内存解决方法
2019/09/17 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Python中的作用域规则详解
2015/01/30 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
详解python之协程gevent模块
2018/06/14 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
社会治安综合治理管理责任书
2014/04/16 职场文书
公司开业主持词
2015/07/02 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
python中的装饰器该如何使用
2021/06/18 Python