20151229

jQuery height()

Description: Get the current computed height for the first element in the set of matched elements.
描述: 获得匹配元素集合中的第一个元素的高度。

The difference between .css( “height” ) and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element’s height needs to be used in a mathematical calculation.
.height() 返回不带单位的像素值(如:400),在数学计算时使用
.css( “height” )返回带单位的像素值(如:400px)

Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( “height” ) rather than .height().
jQuery 1.8后可能会减去border和padding值,为了避免这个,用.css( “height” )更好。

Note: Although style and script tags will report a value for .width() or height() when absolutely positioned and given display:block, it is strongly discouraged to call those methods on these tags. In addition to being a bad practice, the results may also prove unreliable.
当元素position:absolute或者display:block时,不要用.width()和.height(),得到的值是不可靠的。

Additional Notes:

  • The number returned by dimensions-related APIs, including .height(), may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition. .height()返回的可能是一个分数,所以不要把它返回值当作整数。当页面被用户缩放时,这个值可能是不正确的。
  • The value reported by .height() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .height(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.当一个元素或它的父元素是隐藏的时,.height()可能是不精确的。

IScroll用法

Scroll的API

自定义事件

iScroll还提供额一些你可以挂靠的有用的自定义事件。
使用on(type, fn)方法注册事件。

1.myScroll = new IScroll('#wrapper');
2.myScroll.on('scrollEnd', doSomething);

上面的代码会在每次滚动停止是执行doSomething方法。
可以挂靠的事件如下:

  • beforeScrollStart,在用户触摸屏幕但还没有开始滚动时触发。
  • scrollCancel,滚动初始化完成,但没有执行。
  • scrollStart,开始滚动
  • scroll,内容滚动时触发,只有在scroll-probe.js版本中有效,请参考onScroll event。
  • scrollEnd,停止滚动时触发。
  • flick,用户打开左/右。
  • zoomStart,开始缩放。
  • zoomEnd,缩放结束。

滚动条信息

iScroll存储了很多有用的信息,您可以使用它们来增强您的应用。
你可能会发现有用的:

  • myScroll.x/y,当前位置
  • myScroll.directionX/Y,最后的方向 (-1 down/right, 0 still, 1 up/left)
  • myScroll.currentPage,当前对齐捕获点

下面是关于处理时间的代码示例:

1.myScroll = new IScroll('#wrapper');
2.myScroll.on('scrollEnd', function () {
3. if ( this.x < -1000 ) {
4. // do something
5. }
6.});

我的代码:

1.// 在cycle的预混B里
2.// whchatmeeting中有不用iScroll判断滚动位置的方法(绑定scroll事件,用scrolltop()判断)
3.pptIScroll=new IScroll($ppt0Wrapper.get(0),{
4. mouseWheel: true,
5. scrollbars: false
6.});
7.pptIScroll.on('scrollEnd', function(){
8. var ppt0Height = $ppt0Div.height();
9. if ( this.y <-~~ppt0Height*9 ) {
10. $moveToPPTContent.show();
11. }else{
12. $moveToPPTContent.hide();
13. }
14.});

iScroll初始化和绑定事件要写到一起

iScroll的Click事件

options.click
为了重写原生滚动条,iScroll禁止了一些默认的浏览器行为,比如鼠标的点击。如果你想你的应用程序响应click事件,那么该设置次属性为true。请注意,建议使用自定义的tap 事件来代替它(见下面)。
默认属性:false

iScroll绑定fastClick并不能实现
所以自己重写了Click事件

1.$.fn.lzjClick = function(callback) {
2. var isSupportTouch = document["ontouchstart"] === null;
3. var startY, endY; //用于模拟单击事件
4. var _this = this.get(0);
5. _this.callback = callback || $.noop; //为了使callback中的this指向事件绑定元素
6.
7. if (_this.callback == null) {
8. if (isSupportTouch) {
9. _this.ontouchstart = null;
10. } else {
11. _this.onmousedown = null;
12. }
13. return;
14. }
15. if (isSupportTouch) {
16. _this.ontouchstart = function(e) {
17. var e = e || window.event;
18. startY = e.touches[0].pageY;
19. _this.ontouchend = function() {
20. var e = e || window.event;
21. endY = e.changedTouches[0].pageY;
22. if (isClickEvent()) {
23. _this.callback(e);
24. }
25. _this.ontouchend = null;
26. }
27. }
28. } else {
29. _this.onmousedown = function(e) {
30. var e = e || window.event;
31. startY = e.pageY;
32. _this.onmouseup = function(e) {
33. var e = e || window.event;
34. endY = e.pageY;
35. if (isClickEvent()) {
36. _this.callback(e);
37. }
38. _this.onmouseup = null;
39. }
40. }
41. }
42.
43. function isClickEvent() {
44. if (Math.abs(startY - endY) < 10) return true;
45. else return false;
46. }
47.}

写在了jQuery的插件里,这里只监听y轴的移动。
.css(“”)是html中style的属性。
.attr(“”)是style外面,就像是自定义的属性。

自己练习

  1. 贝塞尔曲线
  2. 贪吃蛇
  3. 拼图(华容道)
  4. 开心消消乐
  5. 连连看(不能转两个wan)
  6. 2048