澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

插件使用总结,fcc项目总结系列1

4.例子(发生的小case)

图片 1

2.css

3.用法

 

html部分:

尺寸与位置

js文件中大量用到了元素的各种尺寸属性,在此做一个总结:

属性 含义
offsetHeight offsetWidth 描述元素外尺寸,元素内容 内边距 边框,不包括外边距和滚动条
offsetLeft offsetTop 描述元素的左上角(边框的外边缘)与已定位的父容器(offsetParent对象——元素最近的定位为relative或absolute的祖先元素,若没有则返回null)左上角的距离
clientWidth clientHeight 描述元素内尺寸,元素内容 内边距,不包括边框(IE下实际包括)、外边距、滚动条。滚动条占据父元素的内容区 padding空间。
scrollWidth scrollHeight 元素内容 内边距 溢出尺寸,当内容没有溢出时,scrollWidth和scrollHeight一般分别与clientWidth和clientHeight相等,但实际上不同浏览器有不同处理,它们未必相等。
scrollLeft scrollTop 描述元素滚动条的位置,可写
jquery方法
.width() .height() 获取元素的计算样式宽高,不论采用哪种盒模型,只表示内容区宽度;$( window ).width();获取浏览器视口宽度,$( document ).width();获取页面宽度
.offset() 获取元素(不含外边距)相对于页面的偏移量对象(其中有left,top属性)
.position() 获取元素(不含外边距)相对于已定位父容器的偏移量对象(其中有left,top属性)
应用
window.innerWidth window.innerHeight 浏览器视口宽高,包括滚动条,css媒体查询(如min-width)依据的是此分辨率而不是屏幕分辨率
window.screen.width window.screen.height 屏幕宽高分辨率
$(window).width() $(window).height() 浏览器视口宽高,不包括滚动条
document.body.offsetHeight document.body.offsetHeight 页面总高度,body元素margin应该对其有影响
window.pageXOffset window.pageYOffset pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素,ie8-可以用document.documentElement.scrollLeft 和 document.documentElement.scrollTop 属性替代
  • 获取浏览器视口宽高
    视口高度:
window.innerHeight || 
document.documentElement.clientWidth || 
document.body.clientWidth

视口宽度:

window.innerHeight || 
document.documentElement.clientHeight || 
document.body.clientHeight

(对于运行在混杂模式下IE,用document.body代替document.documentElement,可参看《js高程》相关代码)

  • 获取基于视口的最小高度的文档总宽高
    文档总高度:
Math.max(document.documentElement.scrollHeight || 
    document.documentElement.clientHeight)

文档总宽度:

Math.max(document.documentElement.scrollWidth || 
    document.documentElement.clientWidth)

(混杂模式下IE,还要用document.body代替document.documentElement,可参看《js高程》相关代码)

  • 获取文档滚动宽高量
//from MDN
var x = (window.pageXOffset !== undefined)
  ? window.pageXOffset
  : (document.documentElement || 
    document.body.parentNode || 
    document.body).scrollLeft;

var y = (window.pageYOffset !== undefined)
  ? window.pageYOffset
  : (document.documentElement || 
    document.body.parentNode || 
    document.body).scrollTop;

来自MDN

在小尺寸的屏幕上禁用Pin效果
$(".pinned").pin({
      minWidth: 940
})
将某元素“钉”在容器内
$(".pinned").pin({
      containerSelector: ".container"
})

bootstrap插件函数

函数 说明
.collapse('hide') 隐藏元素可折叠元素,来自collapse插件
.scrollspy() 在被监听元素(常常是body)上调用该方法,参数指定使用需要跟随被激活的链接的位置,来自scrollspy插件
将某元素“钉”在容器内
$(".pinned").pin({
      containerSelector: ".container"
})

4.例子(发生的小case)

3.javascript

html部分:

开始css加在了.erweima上,如下:

.erweima{
    position: absolute;
    width: 130px;
    right: 20px;
    top: 40px;
    z-index: 20;

  }

 

 

 

发现滚到页面底部多出了一块儿空白区域。和高度相等。觉得不可能这样啊。

然后发现了这个:

页面运行之后子元素.erweima外又新增了一个容器.pin-wrapper所以css改为:

.pin-wrapper{
    position: absolute;
    width: 130px;/*重要*/
    right: 20px;
    top: 40px;
    z-index: 20;

  }

 

 

 

*宽度重要原因是在IE下不给宽度会出现这样的现象(图片躲到滚动条之后去了,也许就是我太粗心)

 

 

 

 

结语:正文内容就到这里啦~如写的有问题欢迎大家指正。图片 2

小伙伴们,俺昨天用了jquery.pin.js这个插件,发现了一些自以为是的使用问题。特此做个总结哈。...

在小尺寸的屏幕上禁用Pin效果
$(".pinned").pin({
      minWidth: 940
})

事件相关

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:插件使用总结,fcc项目总结系列1