JQuery获取元素尺寸、位置及页面滚动事件应用示例


Posted in jQuery onMay 14, 2019

本文实例讲述了JQuery获取元素尺寸、位置及页面滚动事件应用。分享给大家供大家参考,具体如下:

获取元素尺寸

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
  $(function () {
   var $div=$('.box');
   //盒子内容的尺寸
   console.log($div.width());
   console.log($div.height());
   //盒子内容加上padding的尺寸
   console.log($div.innerWidth());
   console.log($div.innerHeight());
   //盒子的真实尺寸,内容尺寸加上padding加上brder
   console.log($div.outerWidth());
   console.log($div.outerHeight());
   //盒子的真实尺寸加上margin
   console.log($div.outerWidth(true));
   console.log($div.outerHeight(true));
  })
 </script>
 <style type="text/css">
  .box{
   width: 300px;
   height: 200px;
   padding: 20px;
   border: 10px solid #000;
   margin: 20px;
   background-color: gold;
  }
 </style>
</head>
<body>
 <div class="box">
  dd
 </div>
</body>
</html>

获取元素绝对位置

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
  $(function () {
   var $div=$('.box');
   //获取元素绝对位置
   var oPos=$div.offset();
   console.log(oPos);
   $div.click(function () {
    // alert(oPos.left);
    document.title=oPos.left+"|"+oPos.top;
   })
  })
 </script>
 <style type="text/css">
  .box{
   width: 200px;
   height: 200px;
   background-color: #f6b544;
   margin: 50px auto 0;
  }
 </style>
</head>
<body>
 <div class="box">
 </div>
</body>
</html>

主要就是offset()函数

加入购物车动画

设置一个按钮,一个购物车框,一个小方框(隐藏)。点击按钮之后,小方框的位置从按钮以animate动画的形式放到购物车框,购物车的数量加一:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
  $(function () {
   var $chart=$('.chart');
   var $count=$('.chart em');
   var $btn=$('.add');
   var $point=$('.points');
   var $w01=$btn.outerWidth();
   var $h01=$btn.outerHeight();
   $btn.click(function () {
    var oPos01=$btn.offset();
    var oPos02=$chart.offset();
    $point.css({left:oPos01.left+parseInt($w01/2)-8,top:oPos01.top+parseInt($w01/2)-8}).show();/*移动到购物车按钮上,然后show*/
    $point.animate({left:oPos02.left+parseInt($w01/2)-8,top:oPos02.top+parseInt($w01/2)-8},800,function () {
     $point.hide();
     var iNum=$count.html();/*读em里的信息*/
     $count.html(parseInt(iNum)+1);/*转换成int类型然后加一*/
    });
   })
  });
 </script>
 <style type="text/css">
  .chart{
   width: 150px;
   height: 50px;
   border: 2px solid #000;
   text-align: center;
   line-height: 50px;
   float: right;
   margin-right:100px ;
   margin-top: 100px;
  }
  .chart em{
   font-style: normal;
   color: red;
   font-weight: bold;
  }
  .add{
   width: 100px;
   height: 50px;
   border: 0;/*去掉边框*/
   background-color: green;
   color: #fff;
   float: left;
   margin-top: 300px;
   margin-left: 300px;
  }
  .points{
   width: 16px;
   height: 16px;
   background-color: red;
   position: fixed;/*固定定位,就是相对于页面位置的定位*/
   left: 0;
   top: 0;
   display: none;/*把小红点藏起来*/
   z-index: 999;/*这样设置小红点就能盖住其他元素*/
  }
 </style>
</head>
<body>
 <div class="chart">购物车<em>0</em></div>
 <input type="button" name="" value="加入购物车" class="add">
 <div class="points"></div>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun 测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
JQuery animate动画应用示例
May 14 #jQuery
jquery实现选项卡切换代码实例
May 14 #jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 #jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
JQuery事件委托原理与用法实例分析
May 13 #jQuery
You might like
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
Terran建筑一览
2020/03/14 星际争霸
php设计模式  Command(命令模式)
2011/06/17 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
Js经典案例的实例代码
2018/05/10 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python实现针对中文排序的方法
2017/05/09 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Python八皇后问题解答过程详解
2019/07/29 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
深入了解Python在HDA中的应用
2019/09/05 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
Pycharm调试程序技巧小结
2020/08/08 Python
python绘制趋势图的示例
2020/09/17 Python
毕业生自我鉴定
2013/12/04 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
职业女性的职业规划
2014/03/04 职场文书
公司办公室岗位职责
2014/03/19 职场文书
贫困证明怎么写
2015/06/16 职场文书
Flask response响应的具体使用
2021/07/15 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis