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 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery操作css样式
May 15 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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
PHP网站备份程序代码分享
2011/06/10 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python实现播放和录制声音的功能
2020/08/12 Python
QA工程师岗位职责
2013/11/20 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
创先争优演讲稿
2014/09/15 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
同意离婚答辩状
2015/05/22 职场文书
单位收入证明范本
2015/06/18 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android