前端开发小扎
js
阻止冒泡事件
火狐:我们可以在点击事件时传入参数event,然后直接
event.stopPropagation();
ie:this.cancleBubble()
f
\n 换行
css
三角
width:0px; height:0px; overflow:hidden; border-width:10px; border-color:transparent transparent yellow transparent; border-style:dashed dashed solid dashed;
背景图按比例放大缩小
background-size:70% 200%;
省略号
white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;
叉
×
box-sizing:border-box; -moz-box-sizing:border-box;-webik-box-sizing:border-box; 因盒子边框而掉块
filter:alpha(opacity=50)
textarea的兼容
overflow:hidden; padding-top:0px; magin:0px;
opcaity兼容opacity:0;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;
vertical-align:bottom; 解决边框高出几像素问题
解决input在手机端问题 var w_w = $(window).width(); var w_h = $(window).height(); $("body,#main,.page4").css({width:w_w,height:w_h}); 不能用fixed定位在苹果手机上进入页面不能滑动
解决方法:将滑动事件放在图片加载完后执行
判断手机是否为安卓
function isAndroid(){
var u = navigator.userAgent;
if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
}
}
判断手机是否为苹果
function isIphone(){
var u = navigator.userAgent;
if (u.indexOf('iPhone') > -1) {
}
}
get请求
Main.get('',{Contact:Contact,Sex:Sex,Name:Name},function(res){
if(res.err==0){
}else if(res.err==2){
alert(res.msg);
}
})
Main.get = function(url, data, success) {
$.ajax({
type : 'get',
url : Main.url+url,
dataType : 'jsonp',
data : data,
success : function(response) {
console.log(response);
if(response.err==99){
location.href=response.url
return ;
}
success(response);
}
})
}
适应剧中
height: 50%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%);
背景图在苹果手机不适应
用position:fixed
点击事件不灵敏
层的关系
手机端//
去除按钮蓝色边框
a,button,input,textarea,span,div,em,i,img{-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids /
outline: none;
-moz-outline-style: none;
-webkit-user-select: none;/用户不可选 中元素的内容*/
}
出现能够拖动的问题
解决方法
<script>
$(function(){
$('body').on('touchmove', function (event) {
event.preventDefault();
});
})
</script>
判断ie版本
if(navigator.userAgent.indexOf("MSIE")>0){
if(navigator.userAgent.indexOf("MSIE 6.0")>0){
location.href="http://e.sinreweb.com"
}
if(navigator.userAgent.indexOf("MSIE 7.0")>0){
location.href="http://e.sinreweb.com"
}
if(navigator.userAgent.indexOf("MSIE 8.0")>0 && !window.innerWidth){//这里是重点,你懂的
location.href="http://e.sinreweb.com"
}
if(navigator.userAgent.indexOf("MSIE 9.0")>0){
location.href="http://e.sinreweb.com"
}
}
解决input在手机端问题
var w_w = $(window).width();
var w_h = $(window).height();
$("body,#main,.page4").css({width:w_w,height:w_h});
微信返回按钮返回上一页
$('.page_index .anniu2').click(function(){
location.href='#a'
})
window.onhashchange=function(){
var a=location.href.split('#');
if(a.length>1){
if(a[1].indexOf('a')>-1){
$('.page_index').show().addClass('cur')
$('.page_index2').hide()
}else if(a[1].indexOf('b')>-1){
$('.page_index2').show().addClass('cur')
$('.page_index4').hide()
}
}
}
Main.browerVersions=function(){
var u = window.navigator.userAgent;
var num ;
if(u.indexOf('Trident') > -1){
//IE
return "IE";
}else if(u.indexOf('Presto') > -1){
//opera
return "Opera";
}else if(u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1){
//firefox
return "Firefox";
}else if(u.indexOf('AppleWebKit' && u.indexOf('Safari') > -1) > -1){
//苹果、谷歌内核
if(u.indexOf('Chrome') > -1){
//chrome
return "Chrome";
}else if(u.indexOf('OPR')){
//webkit Opera
return "Opera_webkit"
}else{
//Safari
return "Safari";
}
}else if(u.indexOf('Mobile') > -1){
//移动端
if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
//ios
if(u.indexOf('iPhone') > -1){
//iphone
return "iPhone"
}else if(u.indexOf('iPod') > -1){
//ipod
return "iPod"
}else if(u.indexOf('iPad') > -1){
//ipad
return "iPad"
}
}else if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
//android
num = u.substr(u.indexOf('Android') + 8, 3);
return {"type":"Android", "version": num};
}else if(u.indexOf('BB10') > -1 ){
//黑莓bb10系统
return "BB10";
}else if(u.indexOf('IEMobile')){
//windows phone
return "Windows Phone"
}
}
};
body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/
}
a, img {
-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}
html, body {
-webkit-user-select: none; /*禁止选中文本*/
user-select: none;
}
button,input,optgroup,select,textarea {
-webkit-appearance:none; /*去掉webkit默认的表单样式*/
}
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}
input::-webkit-input-placeholder {
color:#ccc; /*修改webkit中input的planceholder样式*/
}
input:focus::-webkit-input-placeholder {
color:#f00; /*修改webkit中focus状态下input的planceholder样式*/
}
body {
-webkit-text-size-adjust: 100%!important; /*禁止IOS调整字体大小*/
}
input::-webkit-input-speech-button {
display: none; /*隐藏Android的语音输入按钮*/
}
<a href="tel:020-10086">打电话给:020-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:me@22278.club">发送邮件: me@22278.club</a>
<input type=file accept="image/*">
上面的文件上传框中,accept 可以限制上传文件的类型,参数为 image/* 是所有图片类型,点击会弹出图库,也可以指定图片格式,参数设置成 image/png 则可以限制图片类型为png;参数如果为 video/* 则是选择视频的意思;accept 还可以设置多个文件格式,语法为 accept="image/gif, image/jpeg" ;
使用box-shadow改变(挡住)表单自动填充后的黄色
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
box-shadow:inset 0 0 0 1000px #fff;
}
获取url?后面的参数
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
//滚动条样式
::-webkit-scrollbar {
width: 1px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0,0,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0);
}