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

2024-09-27 16:43:02

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

下面分享一个小技巧，根据锚点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>

Jquery中的offset()和position()深入剖析

先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父元素的偏移. 返回的对象包含两个整形属性:top 和 left.为精确计算结果,请在补白.边框和填充属性上使用像素单位.此方法只对可见元素有效. 真的就这么简单吗?实践出真知. 先来看看在jquery框架源码里面,是怎么获得position()的: 复制代码代码如下: // Get *real*
jQuery中offset()方法用法实例

本文实例讲述了jQuery中offset()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: 复制代码代码如下: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta char
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft

复制代码代码如下: <!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> <title>jQuery的位置
jQuery中offsetParent()方法用法实例

本文实例讲述了jQuery中offsetParent()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素. 所谓采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素. 此方法仅对可见元素有效. 语法结构: 复制代码代码如下: $(selector).offsetParent() 代码实例: 复制代码代码如下: <!DOCTYPE html> <html>
浅谈jQuery的offset()方法及示例分享

offset()方法的定义和用法: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <style type="te
jquery用offset()方法获得元素的xy坐标

获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin :0;padding:0;) var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left;
jquery offset函数应用实例

我们有时候需要实现这样一种功能:点击一个按钮,然后在按钮的下方显示一个div.当按钮位于角落时,div的位置设定就需要调整,不然,div将显示不完全. 我打算使用offset()方法实现此功能,但要先弄清楚他的功能. offset()的top是指元素与document的上边的距离,而不是浏览器当前窗体的上边缘,如图1. 图1:document高度超过window,浏览器出现滚动条,滚动滚动条,提交按钮的offset不变. 图2:document中的div有滚动条,提交按钮的offset随div的
js实现jquery的offset()方法实例

本文实例讲述了js实现jquery的offset()方法.分享给大家供大家参考.具体分析如下: 用过jQuery的offset()的同学都知道offset().top或offset().left很方便地取得元素相对于整个页面的偏移. 而在js里,没有这样直接的方法,节点的属性offsetTop可以获得该节点相对于父节点的相对偏移,但不能直接获得其绝对偏移,我们可用节点逐层递归向上来相加offsetTop来获得绝对偏移. 复制代码代码如下: function getOffset(Node, of
Jquery中offset()和position()的区别分析

本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. 例如: <!DOCTYPE html> <html> <head> <style> p { margin-left
jquery根据锚点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
jQuery实现锚点向下平滑滚动特效示例

实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; }); 简单实例代码: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.
jQuery实现获取元素索引值index的方法

本文实例讲述了jQuery实现获取元素索引值index的方法.分享给大家供大家参考,具体如下: <!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">
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

本文实例讲述了jQuery实现的给图片点赞+1动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&
基于jquery fly插件实现加入购物车抛物线动画效果

先给大家展示下效果图: 在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jquery fly插件实现加入购物车抛物线动画效果. 使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能一.插件下载插件官方:https://github.com/amibug/fly 二.载入jQuery库文件和jquery.fly.min.js插件 <scr
jQuery实现锚点scoll效果实例分析

本文实例讲述了jQuery实现锚点scoll效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash
jquery 仿锚点跳转到页面指定位置的实例

js 仿锚点跳转到页面指定位置,用的是 offset() 方法 $(document).ready(function(){ var target_top = $("#qa5").offset().top; //$("html,body").animate({scrollTop: target_top}, 1000); //带滑动效果的跳转 $("html,body").scrollTop(target_top); }); jQuery: offs
基于jquery实现百度新闻导航菜单滑动动画

本文实例为大家分享jquery实现百度新闻导航菜单滑动动画,供大家参考,具体内容如下思路与步骤 1.利用UL创建简单横向导航: <!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/199
jQuery鼠标悬停内容动画切换效果

效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>jQuery鼠标悬停内容动画切换效果</title> <style> * { margin: 0; padding: 0; list-style: no
jquery获取img的src值的简单实例

简简单单的一句话,如下: <img id="test" src="1.jpg" alt="test" /> 引用的jquery如下: <script type="text/javascript" language="javascript" src="~/Js/jquery-1.2.6.js"></script> <script type=&quo

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

相关推荐

随机推荐