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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery实现穿梭框效果
Jan 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使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
PHP最常用的正则表达式
2017/02/13 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
Javascript中的delete介绍
2012/09/02 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
在CMD命令行中运行python脚本的方法
2018/05/12 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python I/O与进程的详细讲解
2019/03/08 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
使用Python实现画一个中国地图
2019/11/23 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
opencv+python实现均值滤波
2020/02/19 Python
Python气泡提示与标签的实现
2020/04/01 Python
python中np是做什么的
2020/07/21 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
新大陆软件面试题
2016/11/24 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
《月光启蒙》教学反思
2014/03/01 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
交通事故协议书范本
2016/03/19 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python