蜗爱CSS - Js/jQuery

变灰js代码

wo-ai-niqq@163.com(woniu) — Thu,22 Apr 2010 09:27:09 +0800

变灰css:

 Example Source Code 

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
body{ filter:gray;}

变灰js：

 Example Source Code 

(function(){var f=function(l){var s=document.documentElement.style;var c=l?"":"gray";s.filter=c;s.color=c;}
var b=Date.parse("4/21/2010 00:00:00");
var e=Date.parse("4/21/2010 23:59:59");
var n=new Date();
if(nelse if(n}
)();

省去半夜传文件的麻烦，且效果展示和效果消除及时(不受缓存影响)。

获取当前 select 元素的值

wo-ai-niqq@163.com(woniu) — Thu,01 Apr 2010 17:30:48 +0800

1.如果 select 元素下的所有 option 元素均没有指定 selected 属性，会默认选中第一个。
2.可以通过 select.selectedIndex 获取到选中的 option 元素的索引。
3.可以通过 select.options[select.selectedIndex] 获取到选中的 option 元素。
4.option 元素，可以通过 option.value 获得 option 元素的 value 属性值，即 value3；可以通过 option.text 获得 option 元素内的文本，即 text3。
5.如果 option 元素没有定义 value 属性，则 IE 中 option.value 无法获得，但 Safari、Opera、FireFox 依旧可以通过 option.value 获得，值同于 option.text 。
6.可以通过 option.attributes.value && option.attributes.value.specified 来判断 option 元素是否定义了 value 属性。

获得当前 select 元素值的脚本如下

 Example Source Code 

var getSelectValue = funtion(select) {
    var idx = select.selectedIndex,
        option,
        value;
    if (idx > -1) {
        option = select.options[idx];
        value = option.attributes.value;
        return (value && value.specified) ? option.value : option.text); 
   }
    return null;
}

兼容IE与FF的拖动DOM元素实例

wo-ai-niqq@163.com(woniu) — Sat,09 Jan 2010 09:34:15 +0800

这年头写js的人是越来越少了，一方面大部分的效果网上都有，另外一方面好多js框架可以用。我想知其然还要知其所以然，废话不多说，上代码..注释很详细：
仅兼容IE：

Example Source Code

/*
该函数由mousedown事件处理调用
它为随后发生的mousemove和mouseup事件注册了临时的捕捉事件处理程序
并用这些事件处理程序拖动指定的文档元素
第二个参数必须是mousedown事件的事件对象
*/
function beginDrag(elementToDrag,event)
{
//该元素当前位于何处
//该元素的样式性质必须具有left和top CSS属性
//此外，我们假定他们用象素做单位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//计算一个点和鼠标点击之间的距离，下面的嵌套的moveHandler函数需要这些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// 注册mousedown事件后发生的mousemove和mouseup事件的处理程序
// 注意，它们被注册为文档的捕捉事件处理程序
// 在鼠标按钮保持按下的状态的时候，这些事件处理程序保持活动的状态
// 在按钮被释放的时候，它们被删除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//我们已经处理了该事件，不要让别的元素看到它
event.cancelBubble=true;
event.returnValue=false;
/*
这是在元素被拖动时候捕捉mousemove事件的处理程序，它响应移动的元素
*/
function moveHandler(e)
{
//把元素移动到当前的鼠标位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
//不要让别的元素看到该事件
event.cancelBubble=true;
}
/*
该事件将捕捉拖动结束的时候发生的mouseup事件
*/
function upHandler(e)
{
//注销事件处理程序
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
event.cancelBubble=true;
}
调用它的HTML文件代码：
　
　
　 Untitled Page
　
　
　
　

　拖动我
　

This is a test.Testing,testing

HTML代码

<html> 
　<head> 
　 <title>Untitled Page</title> 
　 <script type="text/javascript">
function beginDrag(elementToDrag,event) 
{ 
//该元素当前位于何处 
//该元素的样式性质必须具有left和top CSS属性 
//此外，我们假定他们用象素做单位 
//var x=parseInt(elementToDrag.style.left); 
//var y=parseInt(elementToDrag.style.top); 
//计算一个点和鼠标点击之间的距离，下面的嵌套的moveHandler函数需要这些值 
var deltaX=event.clientX-parseInt(elementToDrag.style.left); 
var deltaY=event.clientY-parseInt(elementToDrag.style.top); 
// 注册mousedown事件后发生的mousemove和mouseup事件的处理程序 
// 注意，它们被注册为文档的捕捉事件处理程序 
// 在鼠标按钮保持按下的状态的时候，这些事件处理程序保持活动的状态 
// 在按钮被释放的时候，它们被删除 
document.attachEvent("onmousemove",moveHandler); 
document.attachEvent("onmouseup",upHandler); 
//我们已经处理了该事件，不要让别的元素看到它 
event.cancelBubble=true; 
event.returnValue=false; 
/* 
这是在元素被拖动时候捕捉mousemove事件的处理程序，它响应移动的元素 
*/ 
function moveHandler(e) 
{ 
//把元素移动到当前的鼠标位置 
e=window.event; 
elementToDrag.style.left=(event.clientX-deltaX)+"px"; 
elementToDrag.style.top=(event.clientY-deltaY)+"px"; 
//不要让别的元素看到该事件 
event.cancelBubble=true; 
} 
/* 
该事件将捕捉拖动结束的时候发生的mouseup事件 
*/ 
function upHandler(e) 
{ 
//注销事件处理程序 
document.detachEvent("onmouseup",upHandler); 
document.detachEvent("onmousemove",moveHandler);} 
event.cancelBubble=true; 
}

</script>

</head> 
　<body> 
　<div style="position:absolute;left:100px;top:100px;background-color:White;border:solid black;"> 
　 <div style="background-color:Gray;border-bottom:solid black;padding:3px;font-family:Sans-Serif;font-weight:bold;" onmousedown="beginDrag(this.parentNode,event);"> 
　 拖动我 
　 </div> 
　 <div> 
　 <p>This is a test.Testing,testing</p></div> 
　</div> 
　</body>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

兼容火狐的拖动DOM元素的js：

 Example Source Code 

function beginDrag(elementToDrag,event) 
{ 
var deltaX=event.clientX-parseInt(elementToDrag.style.left); 
var deltaY=event.clientY-parseInt(elementToDrag.style.top); 
if(document.addEventListener) 
{ 
document.addEventListener("mousemove",moveHandler,true); 
document.addEventListener("mouseup",upHandler,true); 
} 
else if(document.attachEvent) 
{ 
document.attachEvent("onmousemove",moveHandler); 
document.attachEvent("onmouseup",upHandler); 
} 
if(event.stopPropagation) event.stopPropagation(); 
else event.cancelBubble=true; 
if(event.preventDefault) event.preventDefault(); 
else event.returnValue=false; 
function moveHandler(e) 
{ 
　　if (!e) e=window.event; //如果是IE的事件对象，那么就用window.event 
　　//全局属性，否则就用DOM二级标准的Event对象。 
elementToDrag.style.left=(event.clientX-deltaX)+"px"; 
elementToDrag.style.top=(event.clientY-deltaY)+"px"; 
if(event.stopPropagation) event.stopPropagation(); 
else event.cancelBubble=true; 
} 
function upHandler(e) 
{ 
if(document.removeEventListener) 
{ 
document.removeEventListener("mouseup",upHandler,true); 
document.removeEventListener("mousemove",moveHandler,true);} 
else 
{ 
document.detachEvent("onmouseup",upHandler); 
document.detachEvent("onmousemove",moveHandler);} 
} 
if(event.stopPropagation) event.stopPropagation(); 
else event.cancelBubble=true; 
} 

超级树形导航菜单

wo-ai-niqq@163.com(woniu) — Mon,04 Jan 2010 18:31:35 +0800

工作需要写了个东西，不知道该叫什么，选项卡+树形菜单+纵向下拉菜单揉在了一起...用的技术：js、jQuery、div+css，测试浏览器：IE6\IE7\IE8\FF3.0

[demo]

javascript:void(0)的含义

wo-ai-niqq@163.com(woniu) — Wed,30 Dec 2009 09:02:10 +0800

我们在 JavaScript脚本中就会经常可以看到这样的代码：

 Example Source Code 

〈a href="javascript:changeNum();void(0);"〉here〈/a〉

但这儿的void(0)究竟是何含义呢？
JavaScript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下：

 Example Source Code 
 
1. javascript:void (e­xpression) 
2. javascript:void e­xpression

expression 是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的，但是写上去是一个好习惯。你可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何容。
下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。当用户点击链接时，void(0) 计算为 0，但在 JavaScript 上没有任何效果。

Example Source Code

单击此处什么也不会发生

下面的代码创建了一个超级链接，用户单击时会提交表单。

Example Source Code

单击此处提交表单

使用javascript的时候，通常我们会通过类似：提交的方式，通过一个伪链接来调用javascript方法。这种方法有一个问题是：虽然点击该链接的时候不会跳转页面，但是滚动条会往上滚，解决的办法是返回一个false。
如下所示：

Example Source Code

提交
提交
xx

＃包含了一个位置信息默认的锚点是＃top 也就是网页的上端,而javascript:void(0) 仅仅表示一个死链接。这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首,而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)。

所以我们在做页面无刷新时用void(0)比较多，一般是Ajax，看一下Ajax的web页面的话，一般都会看到有很多的void(0)，所以在使用void(0)之前，最好先想一想这个页面是否需要整体刷新。

Tab选项卡通用js

wo-ai-niqq@163.com(woniu) — Tue,29 Dec 2009 14:56:15 +0800

自己一直在用的 js通用选项卡类：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> 
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>滑动门通用JS</title> 
<style type="text/css"> 
 
</style> 
<script type="text/javascript">

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

     1.把以上代码引进你的页面

     2.在页面的""标签前加入以下代码:




            其中sd方法中的参数为:

            参数一 [菜单id数组]:滑动门菜单的id

            参数二 [内容id数组]:显示和隐藏滑动内容层的id

            参数三 "菜单触发类":鼠标经过滑动门菜单的类

          参数四 "菜单关闭类":鼠标滑出滑动门菜单的类

     3.页面中有几个滑动门就调用几次sd函数,只需改变sd调用的参数,如以上代码上所展示.

有背景图片自适应宽度横向二级导航菜单

wo-ai-niqq@163.com(woniu) — Wed,23 Dec 2009 08:45:36 +0800

写了个导航，催的急所以css样式不够优化。导航的宽度可以自适应，测试浏览器：IE6\IE7\IE8\FF3.0

[Demo]

点击下载此文件

6个常用的javascript菜单

wo-ai-niqq@163.com(woniu) — Mon,26 Oct 2009 14:47:58 +0800

（1）js滑动图像菜单

Demo

点击下载此文件

（2）竖型可折叠菜单

Demo

点击下载此文件

（3）头部隐藏滑动菜单

Demo

点击下载此文件

（4）侧边隐藏滑动菜单

Demo

点击下载此文件

（5）可拖动、嵌套菜单

Demo

点击下载此文件

（6）横向滑动菜单

Demo

点击下载此文件

iframe高度自适应

wo-ai-niqq@163.com(woniu) — Thu,15 Oct 2009 20:21:23 +0800

迫不得已用iframe,于是和iframe奋斗了一天。

Example Source Code

典型的，左边菜单点击右边框架显示，先是链接明明指定了target，火狐下却在新窗口中打开。排查了很久，发现犯了个很低级错误没用闭合。直接。IE下没问题，FF不干了....
再就是右边框架随内容自动适应高度的问题。网上很多解决方案，大都转的这篇文章：http://blog.csdn.net/djt/archive/2008/06/05/2514028.aspx。代码：

Example Source Code

但是测试发现，在火狐下，并不能收缩。需要刷新页面。
下面方法解决问题：

Example Source Code

测试浏览器：IE6、IE7、IE8、FF3.0

两款jQuery横向滑动菜单

wo-ai-niqq@163.com(woniu) — Wed,09 Sep 2009 10:04:12 +0800

以前收集的两款jQuery横向滑动菜单。

[预览第一个] 点击下载此文件

[预览第二个] 点击下载此文件