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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
JavaScript 动态改变图片大小
Jun 11 Javascript
JQuery 文本框使用小结
May 22 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
DIV始终居中的js代码
Feb 17 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 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
虫族 ZERG 概述
2020/03/14 星际争霸
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
Python匹配中文的正则表达式
2016/05/11 Python
Python import与from import使用及区别介绍
2018/09/06 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
Python几种常见算法汇总
2020/06/02 Python
python支持多继承吗
2020/06/19 Python
python打开文件的方式有哪些
2020/06/29 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
民事和解协议书格式
2014/11/29 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle