Javascript动画效果的实现(一)
大家在写Javascript脚本代码交互效果的时候,很多时候可能会用到动画效果,比如幻灯片,下拉菜单,层的展开关闭,元素的显示与隐藏以及有时候让人非常讨厌的浮动广告(它会在你的屏幕上飘来飘去让人着实讨厌)。当然在进行这些处理的时候你也可以不用加入动画效果,但是如果是适当的加入动画效果无疑会让你的界面变得更加吸引人。本篇文章简单的说明一下动画的原理,重点说的是Javascript中动画的实现,本篇文章需要你对Javascript有一定的理解,当然要是对Flash有所了解更好。 继续阅读 »
转载请注明原文出处《Javascript动画效果的实现(一)》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。
Javascript中的this——理解Javascript中的作用域
大家在使用Javascript的时候经常被this这个家伙搞得晕头转向的。对大多数有OOP开发经验的开发人员来说this是当前作用域中引用普通元素的标识符,但是在Javascript中它却显得古灵精怪的,因为它不是固定不变的,而是随着它的执行环境的改变而改变。在Javascript中this总是指向调用它所在方法的对象。
继续阅读 »
转载请注明原文出处《Javascript中的this——理解Javascript中的作用域》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。
个人简历(JavaScript版)
转载请注明原文出处《个人简历(JavaScript版)》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。
Javascript下拉菜单以及实现方法
Blog上要用到一个下拉菜单,网上这方面的例子很多,但是手头闲着没什么事情,就自己写了一个,顺便写一下自己在做的时候的思路,检查一下自己同时也与大家分享。大家先看Dorplist演示效果
要实现的目标很简单就是一个两级的下拉菜单.具体一点就是在已有的HTML代码的基础上按照不唐突的原则实现下拉列表。
主要的容易出问题的地方就是mouseover和mouseout事件分发问题这个在前面的一篇文章中已经说过了。 继续阅读 »
转载请注明原文出处《Javascript下拉菜单以及实现方法》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。
Javascript中mouseover/mouseout事件冒泡停止失效解决办法
大家在写javascript交互脚本的时候最常用到的应该就是事件了,在处理事件的时候需要值得注意的是事件流的问题,事件流有三种模型:MSIE的冒泡模型,Natscape Navigator 的捕获型事件流,以及W3C标准中的同时支持捕获和冒泡两种模型。大部分现代浏览器都支持W3C的标准事件流模型,遗憾的是MSIE仍然只支持自己的冒泡模型。我们这里讨论的不是事件流的模型,这里只是简单的提一下,这篇文章要讨论的是mouseover和mouseout在停止冒泡或者说是停止派发事件后仍然继续触发的问题,也就是事件冒泡停止失效问题(这个名字是我自己起的,我也不是很清楚为什么会失效,是本身就这么设计的还是小bug?)。
我们在写下拉菜单或者小提示等效果的时候会用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件。点击mouseoverout测试1,当你的鼠标在红框与绿框之间移动的时候你会看见mouseover和mouseout事件疯狂的在触发。为什么会这样呢?因为内部的Div在鼠标移上的时候会向它的父对象派发事件,所以外面的框相当于也触发了mouseover事件。
继续阅读 »
转载请注明原文出处《Javascript中mouseover/mouseout事件冒泡停止失效解决办法》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。
JavaScript下雪效果【圣诞将至】
圣诞将至,整好皮肤上也能用得到,于是就做了一个下雪的效果。
难点主要就是集中在setTimeout函数上,因为setTimeout函数无法使用call和apply方法改变调用的对象所以这个地方比较值得注意。本效果中使用的是在window对象中注册两个数组,通过变通的方法实现。
window.objTimeoutFuncs = [];
window.objTimeoutIds = [];
function objTimeout(obj,func,time,id){
window.objTimeoutFuncs[id] = function(){
func.call(obj);
}
window.objTimeoutIds[id] = setTimeout('objTimeoutFuncs[\''+ id +'\']()',time);
}
function clearObjTimeout(id){
clearTimeout(window.objTimeoutIds[id]);
}
在效果中根据雪花的大小调整雪花的透明度以及飘动的速度。由于IE下面图片透明度有问题会出现黑边所以就把IE的透明度设置去掉了,只保留了FireFox下的透明度变化效果。
显示代码:
具体代码中注释的很清楚,有喜欢的朋友请下载看源代码。
源码下载:圣诞将至,下雪效果
转载请注明原文出处《JavaScript下雪效果【圣诞将至】》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。