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 相关文章推荐
关于Javascript 的 prototype问题。
Jan 03 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
js实现加载更多功能实例
Oct 27 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
Js apply方法详解
Feb 16 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
python实现清屏的方法
2015/04/30 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
静态成员和非静态成员的区别
2012/05/12 面试题
中小学校园安全广播稿
2014/09/29 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
质量承诺书格式范文
2015/04/28 职场文书
民事答辩状范本
2015/05/21 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
vue里使用create, mounted调用方法
2022/04/26 Vue.js