WAGADA

[css]css实现图片水平,垂直翻转

利用 ie 的 filter 和 css3 的 transform:matrix 来实现大部分浏览器兼容的图片翻转效果

/*水平翻转:*/
.flip_x{
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    filter:FlipH;
}
/*垂直翻转:*/
.flip_y{
    -moz-transform: matrix(1, 0, 0, -1, 0, 0);
    -webkit-transform: matrix(1, 0, 0, -1, 0, 0);
    -o-transform: matrix(1, 0, 0, -1, 0, 0);
    filter:FlipV;
}
/*水平垂直翻转:*/
.flip_xy{
    -moz-transform: matrix(-1, 0, 0, -1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, -1, 0, 0);
    -o-transform: matrix(-1, 0, 0, -1, 0, 0);
    filter:FlipH FlipV;
}

原图:

水平翻转:

垂直翻转:

水平垂直翻转:

win7下绿色ie6测试工具

在spoon发出ie系列撤掉的声明后,我挣扎了很久该不该放弃win7
最后,还是万能的google拯救了我
找到了来自Xenocode Browser Sandbox的绿色ie6
其实这就是spoon的前身,我找到了源文件下载地址
试试? http://www.wagada.com/soft/IE6.exe

[jquery][iframe]解决刷新页面firefox提示”要显示此页面， Firefox 必须发送将会导致重复之前动作的数据（例如搜索或者下订单）”

当页面中有iframe是通过表单提交后显示出来的时候
刷新页面会提示 “要显示此页面， Firefox 必须发送将会导致重复之前动作的数据（例如搜索或者下订单）”
看看以下代码

^?View Code JQUERY

1
2
3

$("iframe").load(function(){
    $(this).attr("src","about:blank");
})

框架打开后设置地址到一个空页面就可以避免这个提示
但有个问题就是设置src后会触发load事件,会导致循环加载
所以需要设置一个参数等触发完正常事件后做一个标记
load完后判断一下

^?View Code JQUERY

$("iframe[name=hi]").load(function(){
	if ($(this).data("send")) {
		$(this).attr("src", "about:blank").data("send",false);
	}
})

[jquery]使用jq复制和移动dom节点

复制节点

复制一个节点可以直接用clone()方法
例:

^?View Code HTML

1	<button>Clone Me!</button>

^?View Code JQUERY

1
2
3

$("button").click(function(){
    $(this).clone(true).insertAfter(this);
});

这样就实现了在按钮后面复制一个按钮
而且当clone参数设置为true时还可以将按钮上绑定的事件一起复制到新按钮上

移动节点

将页面上的一个节点移动到另外一个地方可以用jq的内部和外部插入方法(append,appendTo,prepend,prependTo,after,before,insertAfter,insertBefore),直接将选中的节点传递进去就可以实现移动
例:

^?View Code HTML

1 2	<button>Move Me!</button> <div id="box"></div>

^?View Code JQUERY

$("button").click(function(){
    $(this).appendTo($("#box"));
    //或者用append
    $("#box").append(this);
});

这种方法会自动将绑定的事件也保留下来

[js][userscript]让谷歌音乐歌手选择页面支持快捷键跳转

需要使用本地脚本
chrome: http://userscripts.org/scripts/show/81627
greasemonkey: http://userscripts.org/scripts/show/81620

gm的版本有平滑滚动效果
chrome因为载入不了jquery所以暂时只是跳转

[css]单独hack opera

^?View Code CSS

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
	head~body #opera{
		color : red;
	}
}

[jquery][css]支持鼠标跟随的图片浏览程序

没事写了一个图片浏览程序,使用了图片预加载技术,所以翻页速度很快,支持键盘左右方向键翻页
浏览地址:http://wagada.com/photobox

需要源码可以手动复制页面源码,没有压缩
也可以联系我:jay1943000#gmail.com

[css3]参考twitter做了一个点击感比较强的css3按钮

显示效果：Click

^?View Code CSS

.my_btn{
    background-color:#F6F6F6;
    border:1px solid #DDD;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    color:#333;
    cursor:pointer;
    font-size:16px;
    padding:5px 15px 6px;
    text-decoration:none;
}
.my_btn:hover{
    border:1px solid #999;
    box-shadow: 0 1px 3px #999;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
}
.my_btn:active{
    background-color:#DDD;
    box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    -webkit-box-shadow: 0 0 2px #999;
    text-shadow:1px 1px 0 #FFF;
    -moz-text-shadow:1px 1px 0 #FFF;
    -webkit-text-shadow:1px 1px 0 #FFF;
}

^?View Code HTML

1	<a class="my_btn" href="##" onmouseup="this.blur()">Click</a>

[css]css选择器hack大全

^?View Code CSS

 
/***** Selector Hacks ******/
 
/* IE6 and below */ 
* html #uno  { color: red }
 
/* IE7 */ 
*:first-child+html #dos { color: red } 
 
/* IE7, FF, Saf, Opera  */ 
html>body #tres { color: red }
 
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 and below, safari 2 */ 
html:first-child #cinco { color: red }
 
/* Safari 2-3 */ 
html[xmlns*=""] body:last-child #seis { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
body:first-of-type #ocho {  color: red }
 
/* saf3+, chrome1+ */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
       #diez  { color: red  } 
}
 
/* iPhone / mobile webkit */ 
@media screen and (max-device-width: 480px) { 
       #veintiseis { color: red  } 
}
 
/* Safari 2 - 3.1 */ 
html[xmlns*=""]:root #trece  { color: red  }
 
/* Safari 2 - 3.1, Opera 9.25 */ 
*|html[xmlns*=""] #catorce { color: red  }
 
/* Everything but IE6-8 */ 
:root *> #quince { color: red  }
 
/* IE7 */ 
*+html #dieciocho {  color: red }
 
/* Firefox only. 1+ */ 
#veinticuatro,  x:-moz-any-link  { color: red }
 
/* Firefox 3.0+ */ 
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
 
/***** Attribute Hacks ******/
 
/* IE6 */ 
#once { _color: blue }
 
/* IE6, IE7 */ 
#doce { *color: blue; /* or #color: blue */ }
 
/* Everything but IE6 */ 
#diecisiete { color/**/: blue }
 
/* IE6, IE7, IE8 */ 
#diecinueve { color: blue\9; }
 
/* IE7, IE8 */ 
#veinte { color/*\**/: blue\9; }
 
/* IE6, IE7 -- acts as an !important */ 
#veintesiete { color: blue !ie; } /* string after ! can be anything */

[html][css]解决IE6和IE7 overflow:hidden无效的问题

今天做一个滑动列表,发现在ie6和ie7里面overflow:hidden无效,还是会超出外层div

后来在外层div上面加上position:relative就解决了

暂时加*号hack掉吧,有时间再研究一下到底是什么原因导致的问题

WAGADA

功能

链接表

[css]css实现图片水平,垂直翻转

win7下绿色ie6测试工具

[jquery][iframe]解决刷新页面firefox提示”要显示此页面， Firefox 必须发送将会导致重复之前动作的数据（例如搜索或者下订单）”

[jquery]使用jq复制和移动dom节点

复制节点

移动节点

[js][userscript]让谷歌音乐歌手选择页面支持快捷键跳转

[css]单独hack opera

[jquery][css]支持鼠标跟随的图片浏览程序

[css3]参考twitter做了一个点击感比较强的css3按钮

[css]css选择器hack大全

[html][css]解决IE6和IE7 overflow:hidden无效的问题