层级元素含有position属性时鼠标坐标位置解决方案
-
怎样在网页中应用手绘风格，以改善网站的用户体验
手绘风格非常有利于展示人性色彩，形成独特的识别度，为用户带来真实感。当你收到好友寄来的明信片时，你总是希望看到卡片是手写的，带着好友独特的笔迹，而不是用电脑打印出来的。一
-
解析网站404网页设计那些不得不说的事
前阵子做我们一淘优惠商家统一的报错页面， 整理了一些有意思的404页面(后简称404)，加之最近网友热议的QQ空间公益404页面，在这里一起拿出来跟大家分享一下。
-
z-index属性的使用方法和层级树CSS教程
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺
在上一篇文章中《利用CSS sprites制作随着鼠标移动的动画背景》我们是用mousemove事件来实现我们的鼠标坐标定位判断的。mousemove这个鼠标函数，常常会用到我们的项目中，是个很好用的函数。根据在上一篇文章制作实例的时候遇到的一些问题，作个总结出来，一来分享给大家，二来可以给自己加深印象。相信熟悉javascript的朋友对鼠标坐标函数比较了解的，网上的资料也很多，就不多说了。先看看一段代码：
jQuery(document).ready(function(){ $('#demos').mousemove(function(e){ var relX = e.pageX - this.offsetLeft var relY = e.pageY - this.offsetTop $('#demos').html(relX + '， ' + relY); });
这段代码表示的是，鼠标在#demos对象中的相对坐标值，也就是以这个对象为基准（范围），计算鼠标在对象内（对象的左上方的顶角坐标为：0，0）的坐标值。我们继续看看具体的代码含义，e.pageX、e.pageY这两个表示了鼠标在页面上的位置；offsetLeftoffsetTop分别表示的是返回对象相对于父级对象的布局或坐标的left值和top值。明白了这几个代码含义，上面的示例代码最终输出值也不难理解。
在这里附上一张关于盒模型的各种计算值含义详解图：
层级元素含有position属性
在这里我们要重点说下offsetLeft的计算方法，上面也说到是对象相对于父级对象的布局或坐标的left值，那么父级对象将是影响最终值的关键。一般情况下，都没什么问题，但如果父级对象出现了position属性，并且定义了margin值，那么计算结果将会不如我们所意。这是个特殊情况，在这时我们需要适当的修改上面的示例代码，具体如下：
jQuery(document).ready(function(){ $('#demos').mousemove(function(e){ var parentOffset = $(this).parent().offset(); var relX = e.pageX - parentOffset.left; var relY = e.pageY - parentOffset.top; $('#demos').html(relX + '， ' + relY); }); })
总结到此结束，解决方案折腾了好久……好好学习，天天向上。Good luck！
