让 Firefox 支持 offsetX、offsetY

前不久做了一个效果,需求是鼠标划上显示大图,并跟随鼠标移动,效果很简单,利用 offsetX/Y 分别判断出鼠标指针位置相对于触发事件的对象的 X 坐标和 Y 坐标,但坑爹的是 firefox 不支持这个方法,这一下就蛋疼了… 在网上看了很多兼容的方法,感觉最可靠的方法是利用【当前鼠标指针到文档的距离】减去【当前触发事件的对象到文档的距离】等于【当前鼠标指针到第一个定位的父元素的坐标】,很绕口是吧,我画了张图,看着能清楚些:

firefox_offsetX_test

要获取【当前鼠标指针到文档的距离】,我们需要 window.pageYOffset(Netscape属性,指的是滚动条顶部到网页顶部的距离)加上 clientY(当前鼠标指针相对于当前窗口的垂直坐标)。

而要获取【当前触发事件的对象到文档的距离】,我们需要从当前触发元素到根节点为止,各级 offsetParent 元素下面有解释)的 offsetLeftoffsetTop 值之和。

offsetParent:获得被定位的最近的父级对象,定位的要求是设置了 position 属性。

如果元素本身已经定位,那么 offsetParent 属性返回此元素已定位的父级元素,如没有已定位的父级元素,则返回 body 对象。

如果元素没有定位, offsetParent 不但会找已经定位的父级元素而且还会查找类型为 td 和 table 的父级元素,只要找到这三种父级元素的其中任何一种元素将返回此元素,否则返回 body 对象。

继续阅读 让 Firefox 支持 offsetX、offsetY

控制好javascript在页面中的执行顺序

一、页面中脚本的执行顺序

1.页面中 Javascript 的执行顺序是依靠页面引入的<script>标记的先后顺序决定的。

2.脚本定义的函数或全局变量,后面加载的脚本也可以调用。

3.调用的变量如果前面没有声明,则会返回 undefined。

3.如果调用的函数不在同一段脚本中,则会报函数未定义错误。

5.document.write() 中写入的脚本,浏览器会在解析完 document.write() 后继续解析document.write() 写入的脚本。

好了,我们把这些载入脚本的方法放在一起,看个例子:

<script type="text/javascript">
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript">');
document.write('alert(4);')
document.write('fn();');
document.write('alert(e);');
document.write('</script>');
</script>
<script type="text/javascript">
alert(5);
</script>

test.js中的代码:

var e = 1;
function fn(){
  alert(2);
}
alert(3);

chrome中的执行顺序为:3 – 4 – 2 – 1 – 5;

IE中的执行循序为:4 – 3 – 5 并报错属性“fn”的值为 null、未定义或不是 Function 对象;

继续阅读 控制好javascript在页面中的执行顺序

三种纯CSS实现三角形的方法

tip-triangle

看到像上图这样的 tip 的小三角,你会怎么办?

切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小。但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不止一种呢:)

纯 CSS 做三角形的方法,目前我知道三种,分别是利用 border 属性,“◆”字符,和 CSS3 transfrom 做 45 度旋转实现的,CSS3的方法是在码头哥的博客上学到的,很感谢你们的分享,前端有你们更精彩!

1.利用 border 属性实现三角形

这个原理很简单,我我们先看下面的图,这是一个边框为 20px 的 div,看他的边框,是个梯形,变化会从这里开始。

div-border-20

CSS:

.triangle{
    width:30px;
    height:30px;
    border-width:20px;
    border-style:solid;
    border-color:#e66161 #f3bb5b #94e24f #85bfda;
}

好的,现在我把它的宽和高都设为 0,看看有什么变化。

继续阅读 三种纯CSS实现三角形的方法

简约的返回顶部效果(jQuery)

博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改。

一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一个,是基于 jQuery 的,用起来还不错。

常见的“返回顶部”分这么3种:把返回顶部按钮放在页面最底部的,返回顶部按钮在滚动距离大于一定的距离后显示出来的,还有就是滚动距离大于 0 的时候就显示出来,喜欢最后这种,嗯,就它了~ 做好了贴出来共享下:)

HTML:

用两个 span 标签去模拟一个向上的箭头。

<div class="returnTop" title="嗖的就上去了!">
  <span class="s"></span>
  <span class="b"></span>
  返回顶部
</div>

CSS:

用 css 去模拟三角形很给力,不仅兼容性很好,而且可用的地方还非常多。这个东西用嘴说不好理解,看例子就一目了然了,更多的用 css 模拟三角形的详解和用法可以看看我写的这篇文章《三种纯CSS实现三角形的方法》。

继续阅读 简约的返回顶部效果(jQuery)

国内各IE内核浏览器所调用的IE版本

360浏览器,腾讯浏览器,世界之窗,遨游…IE的套套浏览器真是到处都是,在日常生活中,身边的朋友用的也不少,毕竟很多人对浏览器这东西不了解,在他们眼里,神马内核一点区别都没有,但咱们做前端的对这些东西可得非常了解才行,了解他们用的什么版本的 IE 内核对兼容性问题的准确定位也是很有帮助的。

今天抽空把一些主流套套浏览器在 XP 和 WIN7 下,针对各个 IE 版本,对应的调用 IE 内核的版本进行了小小的测试(怎么那么绕口啊…),下面把数据发出来和大家共享:)

各浏览器采用最新版本:

Maxthon2 — 2.5.18.1000
Maxthon3 — 3.3.9.2000
世界之窗 — 3.6.1.1
搜狗浏览器 — 3.2.0.4716
360极速 — 5.3.0.806
360安全 — 5.0.3.9
腾讯TT — 4.8

XP sp3 环境:

遨游2 遨游3 世界之窗 搜狗高速 360极速 360安全 腾讯TT
IE6 IE6 IE6 IE6 IE6 IE6 IE6 IE6
IE7 IE7 IE7 IE7 IE7 IE7 IE7 IE7
IE8 IE7 IE7 IE8 IE7 IE8 IE8 IE7

WIN7 sp1环境:

遨游2 遨游3 世界之窗 搜狗高速 360极速 360安全 腾讯TT
IE8 IE8 IE8 IE8 IE7 IE8 IE8 IE7
IE9 IE9 IE9 IE9 IE7 IE9 IE9 IE7

继续阅读 国内各IE内核浏览器所调用的IE版本

用好负边距,省时又省力

说到负边距,广大的前端兄弟们肯定不会陌生,外边距 margin 的作用是增加容器与容器的间距,而负值则是减少间距。在平时的工作中,用好负边距,不仅能让我们的代码更优美,还能很大的提高工作效率。

以下一些例子是我平时工作上碰到的,还有些是在网上学习时见到的,一并列出来,和大家一块分享,一共6个,以后碰见了新的用法我会再更新上来。

1.在滑动门导航中的应用

这个例子中主要是用负边距去遮挡了 nav 的下边框,然后当哪个导航标签被选中的时候,替换下边框的颜色就行了,算是一种障眼法吧,哈哈!

sliding-doors

CSS:

.nav {
list-style:none;
*overflow:hidden;
}
.nav li {
*position:relative;
float:left;
padding:5px 20px;
margin-left:10px;
margin-bottom:-2px;
border:2px solid #65B453;
border-radius:4px;
background:#0C7823;
font-size:14px;
color:#fff;
}
.nav .hover {
background:#E9FBE4;
border-bottom:2px solid #E9FBE4;
color:#0F6621;
}
.content {
clear:both;
width:340px;
height:150px;
border:2px solid #65B453;
border-radius:4px;
background:#E9FBE4;
}

继续阅读 用好负边距,省时又省力

HTML5 API 浏览器支持情况检测

HTML5发展到现在,虽说没有大规模的普及,但在我们日常生活中,也很容易见到了,HTML5的游戏、网站、应用也是层出不穷。而作为前端人员,也应该多了解这些API为以后应用打基础,下面我将给大家介绍 HTML5 新引入的API,并附上各个 API 的浏览器检测方法,我主要参考了最近看的《html5揭秘》和《html5高级程序设计》。

首先,我们先介绍下 Modernizr, 它是一个用来检测浏览器对 HTML5 和 CSS3 特性支持情况的开源 Javascript 类库,现在最新的是 2.5.3 版(下载),使用方法很简单,在页面里引入 JS 后,它会自动运行,并创建一个 Modernizr 全局对象,它为每一个可以检测的特性都创建了一个对应的布尔类型的属性,我们只要去调用就行了,例如:

if( Modernizr.canvas ){
  // 恩,我知道这个属性,他是画图用的:)
}else{
  // canvas 这是个什么东东??
}

1.Canvas
Canvas是依赖分辨率的位图画布,其绘制的图形是不可缩放的,你可以通过 Javascript 在 Canvas 上面绘制任何图形,甚至加载照片,HTML5标准制定了一系列 Canvas API,用于绘制简单的图形、定义路径、创建渐变及应用图像变换等 。一个 Canvas 就是一个矩形区域,默认情况下宽 300 像素,高 150 像素。
注意:Canvas绘制出来的对象不属于页面 DOM 结构或其他任何的命名空间。

// 创建一个 Canvas 元素,并检查该元素是否拥有 getContext() 方法,然后用双否定强制返回一个布尔值
var hasCanvas = !!document.createElement("canvas").getContext;

// Modernizr检测方法,返回布尔值
var hasCanvas = Modernizr.canvas ;

继续阅读 HTML5 API 浏览器支持情况检测

Javascript面向对象学习笔记(一)

最近一直在学习Javascript的面向对象,感觉这里是个难点,想掌握只能是多写多练了,这是我的学习笔记,整理出来和大家分享,希望能有所帮助,我主要参考了《JavaScript高级程序设计》和《JavaScript权威指南》。

1.工厂模式:

function robot(model, color){
    var e = new Object();
    e.model = model;
    e.color = color;
    return e;
}

var robot1 = robot("T1000", "white");
var robot2 = robot("S2000", "black");

函数 robot() 可以被无限次的调用,并每次都会返回一个包含 model 和 color 属性的对象,但这些被返回的相似的对象之间却体现不出任何联系。

2.构造函数模式:

function Robot(model, color){ //构造函数以大写字母开头
    this.model = model;
    this.color = color;
    this.sayModel = function(){
        alert(this.model);
    }
}

var robot1 = new Robot("T1000", "white");
var robot2 = new Robot("S2000", "black");

alert(robot1.model);    //"T1000"
alert(robot2.model);    //"S2000"
robot1.sayModel();      //"T1000"
robot2.sayModel();      //"S2000"

继续阅读 Javascript面向对象学习笔记(一)

Sublime Text 2 设置文件详解

Sublime Text 2是那种让人会一眼就爱上的编辑器,不仅GUI让人眼前一亮,功能更是没的说,拓展性目前来说也完全够用了,网上介绍软件的文章推荐插件的文章也不少,而且很不错,大家可以去找找自己需要的。

之前想设置什么都是直接在网上搜,但最近想调行距,这个把我给难住了,软件上的设置没找到,网上搜也没有,最后的最后在Sublime的官方论坛找到了,个人觉得行距还是很影响视觉体验的,看看下面的对比图就知道了:

Sublime Text 2 line-height

(有朋友说想要文章图片里的配色主题,这个不是自带的,我放出来了,喜欢的朋友可以下载

看来想驾驭好这软件不弄清楚配置文件是不行了,周末找了时间把配置文件的每条配置信息都加上了中文注释,现在贴出来和大家共享,里面有解释不清楚的也欢迎大家伙来互相讨论:)

继续阅读 Sublime Text 2 设置文件详解