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)