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 异步操作之动态添加节点功能
May 24 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
如何基于jQuery实现五角星评分
Sep 02 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
织梦模板标记简介
2007/03/11 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
header跳转和include包含问题详解
2012/09/08 PHP
php递归实现无限分类的方法
2015/07/28 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
python调用摄像头的示例代码
2020/09/28 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
梅花魂教学反思
2014/04/25 职场文书
政治思想表现评语
2014/05/04 职场文书
捐书活动总结
2014/05/04 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python