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仿微信聊天界面
May 06 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery AJAX应用实例总结
May 19 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 getsiteurl()函数
2009/09/05 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
PHP 断点续传实例详解
2017/11/11 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
python 切换root 执行命令的方法
2019/01/19 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python中uuid模块实例浅析
2020/12/29 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
矫正人员思想汇报
2014/01/08 职场文书
大学活动总结模板
2014/07/10 职场文书
环保志愿者活动方案
2014/08/14 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Redis入门教程详解
2021/08/30 Redis