浏览器常用高宽的jquery插件

代码如下:

(function($) {
/**
* 取得浏览器视图的宽度
*/
$.viewWidth=function(){
var w = 0, D=document;
if( D.documentElement && D.documentElement.clientWidth ) {
w = D.documentElement.clientWidth;
} else if( D.body && D.body.clientWidth ) {
w = D.body.clientWidth;
}
return w ;
}
/**
* 取得浏览器视图的高度
*/
$.viewHeight=function(){
var h = 0, D=document;
if(document.compatMode!='CSS1Compat'){
h = D.body.clientHeight;
}else{
if( D.documentElement && D.documentElement.clientHeight ) {
h = D.documentElement.clientHeight;
} else if( D.body && D.body.clientHeight ) {
h = D.body.clientHeight;
}
}
return h;
}
/**
* 取得画板的高度(即所有内容,当浏览器内容不足的时候为浏览器视图大小)
*/
$.canvasHeight=function(){
var D=document,h=0;
h=Math.max(Math.max(D.body.scrollHeight,D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight,D.documentElement.offsetHeight),
Math.max(D.body.clientHeight,D.documentElement.clientHeight)
);
if($.browser.msie&&$.browser.version>6&&D.body.scrollHeight<$.viewHeight()){
h=D.body.clientHeight;
}
if($.browser.msie&&document.compatMode=='CSS1Compat'&&D.body.scrollHeight<$.viewHeight()){
if($.browser.version>7&&$.browser.version<9){
}else if($.browser.version>6&&$.browser.version<8){
}
h=D.documentElement.clientHeight;
}
return h;
}
/**
* 取得画板的宽度(即所有内容,当浏览器内容不足的时候为浏览器视图大小)
*/
$.canvasWidth=function(){
var D=document,w=D.body.scrollWidth;
if(document.compatMode=='CSS1Compat'){
w=D.documentElement.scrollWidth;
}else{
if($.browser.msie&&$.browser.version<=6&&D.body.scrollWidth>$.viewWidth()){
w=Math.max(Math.max(D.body.scrollWidth,D.documentElement.scrollWidth),
Math.max(D.body.offsetWidth,D.documentElement.offsetWidth),
Math.max(D.body.clientWidth,D.documentElement.clientWidth)
);
}
}
return w;
}
/**
* 取得画板的宽度(即所有内容,当浏览器内容不足的时候为浏览器视图大小)
*/
$.scrollLeft=function(){
if(document.compatMode!='CSS1Compat'||($.browser.msie&&$.browser.version<=6)){
return Math.max($('body').scrollLeft(),document.documentElement.scrollLeft);
}else{
return $('body').scrollLeft();
}
}
/**
* 取得画板的宽度(即所有内容,当浏览器内容不足的时候为浏览器视图大小)
*/
$.scrollTop=function(){
if (document.compatMode != 'CSS1Compat'||($.browser.msie&&$.browser.version<=6)) {
return Math.max($('body').scrollTop(), document.documentElement.scrollTop);
}else{
return $('body').scrollTop();
}
}
})(jQuery);

赞 (0)

相关推荐

  • web前端设计师们常用的jQuery特效插件汇总

    web前端设计师们常用的jQuery特效插件汇总

    1.jQuery鼠标悬停文字渐隐渐现动画效果 这是一款基于JQuery实现的鼠标悬停文字渐隐渐现动画效果源码,是一款鼠标悬停后图片渐渐有一层透明遮罩层,同时说明文字从左侧滑入,鼠标离开后文字从右侧滑出,整体效果美观自然,用户体验较好.是一款比较优秀的特效源码.该源码兼容目前最新的各类主流浏览器. 在线演示 源码下载 2.jquery基于small2big实现的图片突出显示特效 这是一款基于Jquery的small2big插件实现的图片突出显示特效源码,鼠标滑过图片可实现图片的放大突出显示效果,有

  • jQuery焦点图切换特效插件封装实例

    jQuery焦点图切换特效插件封装实例

    网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图.在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片.一般多使用在网站首页版面或频道首页版面,因为是通过图片的形式,所以有一定的吸引性.视觉吸引性.容易引起访问者的点击,据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字,转化率高于文字标题5倍.由此看来焦点图的能让游客对企业的第一印象大大提升,下面就给大家介绍一个我们项目中封装使用的漂亮大气的全屏焦点图.如下图所示: 可

  • 精心收集的jQuery常用的插件1000

    精心收集的jQuery常用的插件1000

    1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery 热点图书:www.hotbook.cn jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion. jQuery-Horizontal Accordion jQuery plugin: Accordion 用于创建 折叠菜单的jQuery插件. jQuery plugin: Accordion 热

  • 分享精心挑选的23款美轮美奂的jQuery 图片特效插件

    分享精心挑选的23款美轮美奂的jQuery 图片特效插件

    下面向大家分享精心挑选的23款优秀 jQuery 图片特效插件,带给你美轮美奂的图片展示效果. 01. 3D Image Slider 非常非常酷的 3D 图片滑动效果,有五种绚丽的效果演示. 在线演示 下载源码 02. Portfolio Image Navigator 精致的图片导航效果,通过四个方向的箭头控制,适合作品展示的应用场合. 在线演示 下载源码 03. Image Transitions 非常精美的图片切换效果,有 Flip.Multi-flip.Rotation.Cube.Un

  • JQuery插件iScroll实现下拉刷新，滚动翻页特效

    JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <

  • 精心挑选的15款优秀jQuery 本特效插件和教程

    精心挑选的15款优秀jQuery 本特效插件和教程

    今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程.jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果. 01. 滑动的字符 在线演示 下载源码 02. 鼠标悬停变换效果 在线演示 下载源码 03. 旋转的文本 在线演示 下载源码 04. 滚动变换的文本 在线演示 下载源码 05. 精致的倒计时效果 在线演示 下载源码 06.

  • 15个款优秀的 jQuery 图片特效插件推荐

    15个款优秀的 jQuery 图片特效插件推荐

    这篇文章向大家推荐15个最佳 jQuery 图片效果插件.jQuery是最流行的Javascript框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片效果. 01. Responsive Image Gallery 02. Image Zoom Tour 03. Automatic Image Montage 04. 3D Image Slider 05. Shuffle Text E

  • 浏览器常用高宽的jquery插件

    复制代码 代码如下: (function($) { /** * 取得浏览器视图的宽度 */ $.viewWidth=function(){ var w = 0, D=document; if( D.documentElement && D.documentElement.clientWidth ) { w = D.documentElement.clientWidth; } else if( D.body && D.body.clientWidth ) { w = D.bo

  • 为你的网站增加亮点的9款jQuery插件推荐

    为你的网站增加亮点的9款jQuery插件推荐

    Sticky Sidebar这款jQuery可以让你设置浮动的侧栏,当页面滚动的时候能固定的设定的位置,看起来像是粘住了一样.兼容IE6-9及其它主流浏览器. WaypointWaypoints 可以帮助你很容易的实现滚动到某个元素的时候执行某项功能,根据用户拖动滚动条的位置来实现特定的布局模式. Better Checkboxes一款简单的实现替代浏览器默认选择框的jQuery插件,可以帮助你丰富表单的表现形式,在JavaScript失效的时候回恢复为默认控件. Thumbnails Navi

  • jQuery实现布局高宽自适应的简单实例

    在页面布局(layout)时经常是上左右的框架布局并且需要宽.高度的自适应,div+css是无法实现(*hegz: div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要js来辅助. 主要通过 jQuery.resize() 这个方法,也就是当窗口大小改变时重新计算布局的高宽.其它直接看代码即可. Html代码 <div id="header"></div> <div id="left"></

  • 文本有关的样式和jQuery求对象的高宽问题分别说明

    WEB开发经常会用到有关文处理本有关的问题,这里结合使用情况总结一下,同时还有jQuery求对象的高度问题,分别说明如下: 一.CSS中有关文本的样式 1, word-break: normal | keep-all | break-all 设置或检索单词在容器边界处的处理方式,是否允许单词内换行: normal: 浏览器默认处理方式: keep-all:遇到容器边界处,单词内不换行: break-all:遇到容器边界处,单词内可换行,即单词断开换行显示: 2, word-wrap: norma

  • 在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南

    pasteimg是一款可以在浏览器中实现图片粘贴的jQuery插件,兼容Chrome.Firefox.IE11以及其他使用这些内核的浏览器,比如,国内著名的360浏览器. pasteimg可以识别浏览器中直接复制的图片,也可以识别复制的富文本中的图片.仅仅可以识别在浏览器中复制的内容,操作系统中复制的图片是不能识别的. pasteimg依赖jQuery,简单易用,引入jQuery和paste.image.js后,调用方式如下: 复制代码 代码如下: //在需要监听粘贴事件的dom元素上调用pas

  • 制作高质量的JQuery Plugin 插件的方法

    JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines好了,下面有一些我觉得想做一个好的插件必须应有的要求: 1.在JQuery命名空间下声明只声明一个单独的名称 2.接受options参数,以便控制插件的行为 3.暴露插件的默认设置 ,以便外面可以访问 4.适当地将子函数提供给外部访问调用 5.保持私有函数 6.支持元数据插件 下面将逐条地过一遍: 只声明一个单独的名称 这表明是一个单独

  • 常用的php图片处理类（水印、等比缩放、固定高宽）分享

    常用的php图片处理类(水印.等比缩放.固定高宽)分享 <?php //PHP 添加水印 & 比例缩略图 & 固定高度 & 固定宽度 类. class Image_process{ public $source; //原图 public $source_width; //原图宽度 public $source_height; //原图高度 public $source_type_id; public $orign_name; public $orign_dirname; //

  • Js操作DOM元素及获取浏览器高宽的简单方法

    在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaS

  • jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

    本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • jquery 插件重新绑定的处理方法分析

    本文实例讲述了jquery 插件重新绑定的处理方法.分享给大家供大家参考,具体如下: 比如有一个slide的jquery插件,页面打开就对dom进行了绑定. <div class="expert"> <div class="expert-list"> <ul> <li class="expert-item"> <a href="#" rel="external n

随机推荐