王新阳

jquery background animate

$("div").animate({
backgroundPositionX: "-120px",
backgroundPositionY: "0px"
})

2015-06-03

判断select的选中情况
$('select').find('option:selected').index()
$('select').find('option:selected').prop('value')
$('select').find('option:first').text()

设置值是abc的option为选中状态
$('select').val('abc');
$("select option[value='abc']").prop('selected', 'selected');

删除元素
$('select > option').remove()
$('select > option:gt(0)').remove()
$('select').empty()

2015-06-03

回应

CSS3切换效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body, #wrapper{height:100%;width:100%;overflow:hidden;margin:0;padding:0;background:#eee}
#wrapper #content{width:100%;height:100%;background:#fff}
#wrapper #content{
-moz-transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
#wrapper.on #content{
-webkit-transform:scale(.7,.7);
-moz-transform:scale(.7,.7);
transform:scale(.7,.7);backgound:#
}
#open{
position:absolute; top:0; left:0; visibility:hidden;
-webkit-transform:translateY(100%) scale(.5,.5);
-moz-transform:translateY(100%) scale(.5,.5);
-ms-transform:translateY(100%) scale(.5,.5);
transform:translateY(100%) scale(.5,.5);
-moz-transition:all 1.6s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: all 1.6s cubic-bezier(0.23, 1, 0.32, 1);
transition:all 1.6s cubic-bezier(0.23, 1, 0.32, 1);
background:#fff;width:100%;height:100%;z-index:1100
}
#open.on{ visibility:visible;
-webkit-transform:translateY(0%) scale(.5,.5);
-moz-transform:translateY(0%) scale(.5,.5);
-ms-transform:translateY(0%) scale(.5,.5);
transform:translateY(0%) scale(.5,.5);
-moz-transition:all .5s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: all .5s cubic-bezier(0.23, 1, 0.32, 1);
transition:all .5s cubic-bezier(0.23, 1, 0.32, 1);
}
#open.s{
-moz-transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform:translateY(0%) scale(1,1);
-moz-transform:translateY(0%) scale(1,1);
-ms-transform:translateY(0%) scale(1,1);
transform:translateY(0%) scale(1,1);
}
#open a.close{position:absolute;top:10px;right:10px;border:solid 1px #eee;width:20px;height:20px;text-align:center;line-height:20px}
#mask{ width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,.4); visibility:hidden; opacity:0; }
#mask.on{visibility:visible;opacity:1;}
</style>
<script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content"><a href="http://www.baidu.com/">新闻标题</a></div>
</div>
<div id="open">新闻内容<a href="#" class="close">X</a></div>
<div id="mask"></div>
<script>
$('#content a').click(function(){
$('#open,#wrapper,#mask').addClass('on');
setTimeout(function(){$('#open').addClass('s');},500);
return false;
})
$('#open a.close').click(function(){
$('#open').removeClass('s');
setTimeout(function(){$('#open,#wrapper,#mask').removeClass('on')},500);
return false;
})
</script>
</body>
</html>

2015-05-31

回应

jquery.pjax.js

原理 html5 api：
history.state
history.pushState
history.replaceState

2015-05-31

回应

纳什均衡博弈论

2015-05-13

回应

window.location

Location 对象属性

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

Location 对象方法

属性	描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。

2015-05-12

回应

CSS控制打印时内容

在CSS代码中加入以下内容即可：

@media print{
	/*以下为打印时载入的CSS代码*/
	.banner, .sidebar{display:none;}
	#wrapper, .main{clear:both;width:100% !important;height:auto !important;}
}

2015-05-12

回应

CSS3 线性渐变（linear-gradient），半透明+渐变

不兼容IE浏览器，所以IE中要添加默认的background或background-color

1、开始于center（水平方向）和top（垂直方向）也就是Top → Bottom：
/* Firefox 3.6+ */
background-image:-moz-linear-gradient(top, #ace, #f96);
/* Safari 5.1+, Chrome 10+ */
background-image:-webkit-linear-gradient(top, #ace, #f96);
/* Opera 11.10+ */
background-image:-o-linear-gradient(top, #ace, #f96);

2、始于left（水平方向）和center（垂直方向）也是就Left → Right：
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(left, #ace, #f96);
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(left, #ace, #f96);
/* Opera 11.10+ */
background-image: -o-linear-gradient(left, #ace, #f96);

3、起始于left（水平方向）和top（垂直方向）:
background-image: -moz-linear-gradient(left top, #ace, #f96);
background-image: -webkit-linear-gradient(left top, #ace, #f96);
background-image: -o-linear-gradient(left top, #ace, #f96);

4、角度(Angle)：
.deg45 {
	background-image: -moz-linear-gradient(45deg, #ace, #f96);
	background-image: -webkit-linear-gradient(45deg, #ace, #f96);
	background-image: -o-linear-gradient(45deg, #ace, #f96);
}

5、变透明+渐变
div{
    background-image:linear-gradient(
        to bottom
        rgba(0,0,0,.6) 0%,
        rgba(0,0,0,.3) 50%,
        rgba(0,0,0,0) 100%
    );
    background-image:-webkit-linear-gradient(
        bottom,
        rgba(0,0,0,.6) 0%,
        rgba(0,0,0,.3) 50%,
        rgba(0,0,0,0) 100%
    );
}

        rgba(0,0,0,0) 50%

        rgba(0,0,0,0) 50%

        rgba(0,0,0,.6) 0%,

2015-04-27

回应

菲涅尔透镜

2015-03-29

回应

jq获取iframe加载完后的数据并格式化

$('#iframe').load(function(){
var txt=$($(this)[0].contentWindow.document.body).text(), flag=true;
try{
txt=eval('('+txt+')');
}catch(e){
flag=false;
}
json=flag ? txt : false;
});

2015-03-26

回应

1...28 29 30 31 32 33 34 35 36 37