jquery计算出left和top,让一个div水平垂直居中的简单实例
实例如下:
if($("#cont1").css("position")!="fixed"){ $("#cont1").css("position","absolute"); var dw = $(window).width(); var ow = $("#cont1").outerWidth(); var dh = $(window).height(); var oh = $("#cont1").outerHeight(); var l = (dw - ow) / 2; var t = (dh - oh) / 2 > 0 ? (dh - oh) / 2 : 10; var lDiff = $("#cont1").offset().left - $("#cont1").position().left; var tDiff = $("#cont1").offset().top - $("#cont1").position().top; l = l + $(window).scrollLeft() - lDiff; t = t + $(window).scrollTop() - tDiff; $("#cont1").css("left",l + "px"); $("#cont1").css("top",t + "px"); }
以上这篇jquery计算出left和top,让一个div水平垂直居中的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
jquery计算鼠标和指定元素之间距离的方法
本文实例讲述了jquery计算鼠标和指定元素之间距离的方法.分享给大家供大家参考.具体实现方法如下: (function() { var mX, mY, distance, $distance = $('#distance span'), $element = $('#element'); function calculateDistance(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.o
-
jQuery计算textarea中文字数(剩余个数)的小程序
复制代码 代码如下: <div class="area"> <p> 还可以输入<b class="num">140</b>字</p> <textarea class="chackTextarea"></textarea> </div> <script type="text/java
-
jQuery实现购物车多物品数量的加减+总价计算
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现购物
-
用Jquery选择器计算table中的某一列某一行的合计
利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便.下面以计算行合计为例: 核心算法: $('#tableId tr').each(function() { $(this).find('td:eq(columnIndex)').each(function() { totalAmount += parseFloat($(this).text()); }) }); 下面是案例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
-
jQuery中scrollLeft()方法用法实例
本文实例讲述了jQuery中scrollLeft()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量. 语法结构一: 当scrollLeft()方法没有参数的时候就是获取匹配元素相对滚动条左侧的偏移量. 复制代码 代码如下: $(selector).scrollLeft() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&quo
-
jQuery居中元素scrollleft计算方法示例
本文实例讲述了jQuery居中元素scrollleft计算方法.分享给大家供大家参考,具体如下: 如果需要将某个元素 在可以滚动元素(scroll)中设置为居中计算方法为: 需要的scrollleft + 普通居中时候的offsetLeft = 当前的scrollleft+当前元素的offsetLeft = 固定的当前元素在整个滚动条中距离左边的位置 DEMO示例: <!DOCTYPE html> <html lang="en"> <head> &l
-
基于jQuery的计算文本框字数的代码
一.功能: 1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数; 2.当超过规定的字数后,点击确定,会让输入框闪动 二.功能分析 1.重点是用什么事件? 标准浏览器用oninput,而IE则使用onpropertychange ,这两个事件的发生条件,是文本框的值发生改变. 2.字数的计算. 2.1一个中文算两个,一个符号或数字,英文,算一个.(如果是规定140个字,乘以2,那么就是280个) 2.2需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数; 3.闪动背
-
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery的位置
-
一个简单的jQuery计算器实现了连续计算功能
一个简单的jQuery计算器,只是实现了一个连续计算的功能 <!DOCTYPE html> <html> <head> <meta charset="utf8"/> <title>Javascript计算器</title> </head> <body> <table> <tr> <td colspan="4"><input id=
-
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将
-
jQuery 计算iframe 窗口大小的方法
复制代码 代码如下: <iframe id="aaax" src="" scrolling="no" frameborder="0" style="display:none"></iframe> <script language="javascript" type="text/javascript"> $(function () {
随机推荐
- mysql数据库索引损坏及修复经验分享
- jquery实现的点击翻书效果代码
- JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
- PHP中__get()和__set()的用法实例详解
- php三元运算符知识汇总
- 接口对象的实例化在接口回调中的使用方法
- 数据库工具sysbench安装教程和性能测试例子
- Ajax获取页面被缓存的解决方法
- KindEditor图片上传的Asp.net代码实例
- Java反射机制深入理解
- 微信小程序技巧之show内容展示,上传文件编码问题
- python之Character string(实例讲解)
- jQuery操作 input type=checkbox的实现代码
- javascript eval()用法
- javascript每日必学之循环
- java实现短地址服务的方法(附代码)
- python实现随机森林random forest的原理及方法
- spring cloud实现前端跨域问题的解决方案
- python使用 __init__初始化操作简单示例
- php微信支付之公众号支付功能