|
没有什么比较高深的总结，都是在工作中遇到一些问题 观看的同学要是排版不好请见谅哈， 局部刷新 <script> var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { } } xmlhttp.open("get", "StatutoryDayCheck.aspx?dates=" + encodeURIComponent(dates), true); xmlhttp.send(); </script> 去除input框的内阴影以及点击时背景灰色： input, textarea, select { -webkit-appearance: none; -webkit-tap-highlight-color:rgba(0,0,0,0); } 获取用户的input输入的内容 var name = $('.b_name').val(); 判断用户输入的字节； if(name.length==3) 弹出层用的是js动态定位（追求效率，用的以前封装的方法） //居中显示弹出层 function popBox(id){ var w =$(id).width(); var h =$(id).height(); var t = scrollY() +(windowHeight()/2)-(h/2); if(t<0)t=0; var l = scrollX()+((windowWidth())-(w))/2; if(l<0) l=0; $(id).css({left:l/20+'rem',top:t/20+'rem'}); $(id).css('display','block'); } //浏览器视口的高度(兼容写法-male) function windowHeight() { var de = document.documentElement; return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight; } //浏览器视口的宽度(兼容写法-male) function windowWidth() { var de = document.documentElement; return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth } 弹窗的div和img自动地位在ab的靠左的document。body 弹窗div边框透明写法 .css{-webkit-background-clip: content-box;background-clip: content-box;} 背景图根据手机分辨率大小来适应高度 1. position: relative; 2. height: 22rem; 3. margin: 0 auto; 4. background: #000 url(../img/center_page/mine_bg_head@2x.png) no-repeat top center; 5. background-size: cover; 6. color: #fff; 复选框的全选以及未全部选 https:///indeterminate-checkboxes/ 移动端垂直水平居中 http:///mobile-translate.html 方法1 .center{ width:50%; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 方法2 .center { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } 解决移动端弹出层不适配小屏幕手机的问题 .mask{ filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; display: block; width: 100%; height: 100%; background: #000; z-index: 9; position: absolute; position: fixed; top: 0; left: 0; } 清除浮动 给父级加上 overflow:hidden 点击弹窗以外的地方可退出弹窗 $(".next_col1").click(function(){ $(".mask_big").show(); return false;//必定要加 }) $(document).click(function(){ $(".mask_big").hide(); }); zepto移动端点击按钮之后先显示延迟5秒之后在显示弹出框！ <script language='javascript' type='text/javascript'> $(function () { setTimeout(function () { $("divid").show(); }, 6000); }) </script> 在浏览器中有些a标签没有用的只是为了显示小手，一定记得不href=“#”换成href=" javascript:void(0); " target="_self"不然在外网会出现点击无效 refresh 属性值 -- 刷新与跳转(重定向)页面 5秒之后刷新本页面: <meta http-equiv="refresh" content="5" /> 5秒之后转到××首页: <meta http-equiv="refresh" content="5; url=http://www.baidu.com/" /> css计算器 div { width:-webkit-calc(100%-100px); width:-moz-calc(100%-100px); width:calc(100%-100px); } 类似于标签的让文字适应 加display: inline-block;就能解决啦 zepto不支持scrollTop时，返回顶部有动画的方法 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } var x3 = window.scrollX || 0; var y3 = window.scrollY || 0; // 滚动条到页面顶部的水平距离var x = Math.max(x1, Math.max(x2, x3)); // 滚动条到页面顶部的垂直距离var y = Math.max(y1, Math.max(y2, y3)); // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小var speed = 1 + acceleration; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); // 如果距离不为零, 继续调用迭代本函数if (x > 0 || y > 0) { var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; window.setTimeout(invokeFunction, time); } } $(".fix_go_top").on("click", function() { //$("body").scrollTop(0); //window.scrollTo(0,0); goTop(); }); jq插入图片[ $("#yf1")[0].src="http://nimage.39.net/ask2016/wx_ask/images/yf_06.png"; 文字超过宽度后面的文字显示为点点 text-overflow : ellipsis; white-space : nowrap; overflow : hidden 文字设置超过两行文字打点点 1. height: 50px; 2. text-overflow: -o-ellipsis-lastline; 3. overflow: hidden; 4. text-overflow: ellipsis; 5. display: -webkit-box; 6. -webkit-line-clamp: 2; 7. -webkit-box-orient: vertical; 点击a标签跳转可以滑动效果 $(function(){ sectionLength = $(".content section").size(); //锚点跳转滑动效果 $('a[href*=#],area[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({ scrollTop: targetOffset }, 1000); return false; } } }); }) 滚动条滚动到顶部除去定位，滑动过程定位fixed // 定位 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".nav").offset().top; //滚动条事件 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH = $(this).scrollTop(); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定 if(scroH>=navH){ $(".nav").css({"position":"fixed","top":0}); }else if(scroH<navH){ $(".nav").css({"position":"static"}); } }) }) 微信分享标题自定义 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 需要配置id <script> var wxinfo = new api39_wx({ title: '【示爱宣言】——遇上这种表白，谁不想跟你啪啪啪', desc: '', link: 'http://ask.39.net/html5/jies_h5/', imgUrl: 'http://image.39.net/ask2016/wx_ask/xingqingjun/jies_h5/images/share_t.jpg' }); </script> h5背景音乐播放循环 诚心奉上最近被坑的h5背景音乐，说多了都是泪 兼容安卓、ios，音乐播放当中遇见服务器配置问题会出现音乐无法播放， html： <span id="musicControl"> <a id="mc_play" class="on" onclick="play_music();"> <audio id="musicfx" loop="loop" autoplay="autoplay" > <source src=" http://biz.ifeng.com/fashion/special/derucci20153g/img/music.mp3" type="audio/mpeg"> </audio> </a> </span> css： @-webkit-keyframes reverseRotataZ{ 0%{-webkit-transform: rotateZ(0deg);} 100%{-webkit-transform: rotateZ(-360deg);} } @-webkit-keyframes rotataZ{ 0%{-webkit-transform: rotateZ(0deg);} 100%{-webkit-transform: rotateZ(360deg);} } #musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999} #musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url('../images/mcbg.png') no-repeat;background-size:100%;} #musicControl a audio{width:100%;height:56px;} #musicControl a.stop { background-position:left bottom;} #musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;} #music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:} js： function play_music(){ if ($('#mc_play').hasClass('on')){ $('#mc_play audio').get(0).pause(); $('#mc_play').attr('class','stop'); }else{ $('#mc_play audio').get(0).play(); $('#mc_play').attr('class','on'); } $('#music_play_filter').hide(); event.stopPropagation(); //阻止冒泡 } function just_play(id){ $('#mc_play audio').get(0).play(); $('#mc_play').attr('class','on'); if (typeof(id)!='undefined'){ $('#music_play_filter').hide(); } event.stopPropagation(); //阻止冒泡 } function is_weixn(){ return false; var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; } } var play_filter=document.getElementById('music_play_filter'); play_filter.addEventListener('click', function(){ just_play(1); }); play_filter.addEventListener('touchstart', function(){ just_play(1); }); play_filter.addEventListener('touchend', function(){ just_play(1); }); play_filter.addEventListener('touchmove', function(){ just_play(1); }); play_filter.addEventListener('mousedown', function(){ just_play(1); }); play_filter.addEventListener('mouseup', function(){ just_play(1); }); play_filter.addEventListener('mousemove',function(){ just_play(1); }); window.onload=function(){ if (!is_weixn()){ just_play(); } } 打算集齐七个龙珠在写一篇jq的总结： （先来两个吧，哈哈哈哈） 禁用Jquery（动画）效果 $(document).ready(function() { jQuery.fx.off = true; }); 与其他Javascript类库冲突解决方案 $(document).ready(function() { var $jq = jQuery.noConflict(); $jq('#id').show(); }); |
|
|
