【杂记】（srcset属性浏览器根据宽高和像素密度加载相应的图片、纯 js翻页、ajax避免重复提交、css3制作radio选中效果按钮box-shadow、判断是否是移动端、filter模糊）

1. srcset属性

用于浏览器根据宽、高和像素密度来加载相应的图片资源
格式：图片地址,宽度描述w 像素密度描述x 多个资源用逗号连接
例如：<img src=”img.jpg” srcset=”big.jpg” 1440w , middle.jpg 800w , large.jpg 1x/>
当浏览器宽度达到800时加载middle 达到1440时加载big
像素密度只对固定宽度图片有效
image-set()属性
body{ background-image：image-set（url（../images/pic1.jpg） 1x,url（../images/pic2.jpg） 2x,rl（../images/pic3.jpg） 600dpi）; }
普通屏幕会使用pic1图，高分辨率屏显示pic2图，更高的显示pic3图

2. js翻页

//翻页效果
var _allpage = rst.totalpage;
$(".rst_box .allpage").html('共'+_allpage+'页');
var _thispage = rst.pageNum;
$(".rst_box .thispage").html('第'+_thispage+'页');
$(".nextpage").html("下一页");
$(".prvepage").html("上一页");
//获取当前页附为属性
//$('.rst_box').attr('nowpage', rst.pageNum);
//$('.rst_box').attr('totalpages', rst.totalpage);
//获取当前页
_nowpage = rst.pageNum;
_totalpages = rst.totalpage;

//翻页效果
var _nowpage ="";
var _totalpages ="";
$(".nextpage").click(function(){
	if(_nowpage<_totalpages){
		_nowpage++;
		showcomments(_nowpage);
	}else{
		layer.msg('最后一页了');
	}
});
$(".prvepage").click(function(){
	if(_nowpage>1){
		_nowpage--;
		showcomments(_nowpage);
	}else{
		layer.msg('第一页了');
	}
});

3. Ajax 避免重复提交

$(this).attr({"disabled":"disabled"}) $("#test").removeAttr("disabled")
原理：当点击测试按钮后，使用$(this).attr({"disabled":"disabled"})语句禁用测试按钮，实质是给测试按钮增加一个disabled属性，当请求完全后，使用$("#test").removeAttr("disabled")语句去除禁用按钮属性。

4. css3制作radio选中效果按钮box-shadow

.choose.active{
    border:1px #ff280c solid;
    box-shadow: 0 0 0 3px #fff inset,10px 10px 10px 10px #ff280c inset;
}

5. 判断是否是移动端

if($this->isMobile()){
	$loaction = '/mobile/html/appdownload';
	header("Location: {$loaction}");
	exit();
}

6. filter

模糊 -webkit-filter: blur(2px)
灰度 -webkit-filter:grayscale(0.5)
亮度 -webkit-filter:brightness(0.5)
对比度 -webkit-filter:contrast(2.6)
饱和度 -webkit-filter:saturate(7.9）
色相旋转　-webkit-filter:hue-rotate(260deg)　
反色 -webkit-filter:invert(0.9)
阴影 -webkit-filter:drop-shadow(10px 10px 10px #000)