[关闭]
@pspgbhu 2017-01-03T04:54:54.000000Z 字数 11092 阅读 978

大杂烩

未分类

CSS/HTML

全局

  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,a，i{ margin:0; padding:0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;}
  2. body {background-color: #fff;
  3.     color: #000;
  4.     font: 400 14px/1.5 "微软雅黑","Hiragino Sans GB","WenQuanYi Micro Hei",tahoma,sans-serif;}
  5. h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
  6. address, caption, cite, code, dfn, em, strong, th, var, i { font-style:normal; font-weight:normal;}
  7. a {color:#000; text-decoration:none; display: block;}
  8. img { border:none; }
  9. ol,ul,li { list-style:none; }
  10. input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
  11. button{border: none;outline: none;}
  12. table { border-collapse:collapse; }
  13. input,button,textarea,a{-webkit-tap-highlight-color: rgba(255,255,255,0);}
  14. /* css common */
  15. .clearfix:after, .clearfix:before {content: ""; display: block; height:0; clear:both; visibility: hidden;}
  16. .clearfix { *zoom:1; }
  17. .pull-left{float: left;}
  18. .pull-right{float: right;}

常用全局

  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,a{ margin:0; padding:0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;}
  2. a {color:#000; text-decoration:none; display: block;}
  3. img { border:none; }
  4. ol,ul,li { list-style:none; }
  5. .clearfix:after, .clearfix:before {content: ""; display: block; height:0; clear:both; visibility: hidden;}
  6. .clearfix { *zoom:1; }
  7. .pull-left{float: left;}
  8. .pull-right{float: right;}

移动端

  1. //强制webket内核渲染
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
  3. //视口
  4. <meta name="viewport" content="width=device-width,  initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  5. //格式探索
  6. <meta name="format-detection" content="telephone=no">
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
  2. <meta name="viewport" content="width=device-width,  initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  3. <meta name="format-detection" content="telephone=no">
  1.   <meta http-equiv="Expires" content="0" />
  2.   <meta http-equiv="Pragma" content="no-cache" />
  3.   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

如果你的网站不想被剥去外衣、往赤裸的身体上贴广告，就加上下面的代码。

  1. <meta http-equiv="Cache-Control" content="no-siteapp" />

1.文字超出了需要隐藏并显示省略号

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法
一是用程序开截取字符长度，这个其实也是可以的
第二种是用样式来做,这里主要介绍一下用样式怎么来做吧，我话也不多说了吧直接上代码吧，

css样式如下：

  1. .css1{
  2. color:#6699ff;border:1px #ff8000 dashed;
  3. margin-bottom:20px;
  4. width: 20em;/*不允许出现半汉字截断*/
  5. }
  7. /*****单行文本*****/
  8. .css2 {
  9.     overflow: hidden; /*自动隐藏文字*/
  10.     text-overflow: ellipsis;/*文字隐藏后添加省略号*/
  11.     white-space: nowrap;/*强制不换行*/
  12. }
  14. .css{
  15. /*****多行文本*****/
  16.     width: 20em;/*不允许出现半汉字截断*/
  17.     overflow: hidden; /*自动隐藏文字*/
  18.     text-overflow: ellipsis;/*文字隐藏后添加省略号*/
  19.     display: -webkit-box;
  20.     -webkit-line-clamp: 3;
  21.     -webkit-box-orient: vertical;
  22. }

html代码如下：

  1. <div class="css1">Web前端开发 - 专注于网站前端设计与Web用户体验</div>
  2. <div class="css2">Web前端开发 - 专注于网站前端设计与Web用户体验</div>
  3. <st这yle type=”text/css”>
  4. .css1{
  5. color:#6699ff;border:1px #ff8000 dashed;
  6. margin-bottom:20px;
  7. width: 20em;/*不允许出现半汉字截断*/
  8. }
  9. .css2 {
  10. overflow: hidden; /*自动隐藏文字*/
  11. text-overflow: ellipsis;/*文字隐藏后添加省略号*/
  12. white-space: nowrap;/*强制不换行*/
  13. width: 20em;/*不允许出现半汉字截断*/
  14. color:#6699ff;border:1px #ff8000 dashed;
  15. }
  16. </style>
  17. <div class=”css1″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>
  18. <div class=”css2″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>
  19. <p>

2.clearfix

.clearfix:after, .clearfix:before {
content: "";
display: block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom:1;
}

3.拨打号码或发送短信，以及在微信web下拨打号码

4.img与的父元素有间隙

  1. img{
  2.     vertical-align:bottom;//middle和top也都可以
  3. }

5.base 标签

为相对地址设定绝对路径

6.css制作三角形

  1. border-width: 10px 18px;
  2. border-style: solid;
  3. border-color: transparent transparent transparent #b51717;

http://www.cnblogs.com/jscode/archive/2012/10/19/2730905.html

7.箭头动画

  1. {
  2.     -webkit-animation: next 1s ease-in-out infinite;
  3.     animation: next 1s ease-in-out infinite;
  4. }
  5. @-webkit-keyframes next {
  6.     0%,30% {
  7.         opacity: 0.2;
  8.         -webkit-transform: translateY(-10px);
  9.     }
  10.     60% {
  11.         opacity: 1;
  12.         -webkit-transform: translateY(0);
  13.     }
  14.     100% {
  15.         opacity: 0.2;
  16.         -webkit-transform: translateY(5px);
  17.     }
  18. }
  19. @keyframes next {
  20.     0%,30% {
  21.         opacity: 0.2;
  22.         -webkit-transform: translateY(-10px);
  23.     }
  24.     60% {
  25.         opacity: 1;
  26.         -webkit-transform: translateY(0);
  27.     }
  28.     100% {
  29.         opacity: 0.2;
  30.         -webkit-transform: translateY(5px);
  31.     }
  32. }

JavaScript

1.addLoadEvent()

  1. function addLoadEvent(func){
  2.     var oldonload=window.onload;
  3.     if(typeof window.onload!='function'){
  4.         window.onload=func;
  5.     }else{
  6.         window.onload=function(){
  7.             oldonload();
  8.             func();
  9.         }
  10.     }
  11. }
  16. addLoadEvent(firstfunction);
  17. addLoadEvent(secondfunction);

2.事件监听与事件移除

  2. function addEvent(ele,type,hander){
  3.            //type为click,而不是onclick
  4.            if(ele.addEventListener){
  5.                ele.addEventListener(type,hander,false);
  6.            } else if(ele.attachEvent){
  7.                ele.attachEvent('on'+type,hander);
  8.            } else {
  9.                ele['on'+type]=hander;
  10.            }
  11.         }
  13. document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
  14. document.getElementById("myDIV").addEventListener("mousemove", myFunction);

3.封装insertAfter()函数

  1. function insertAfter(newElement,targetElement){
  2.     var parent = targetElement.parentNode;
  3.     if(parent.lastChild == targetElement){
  4.         parent.appendChild(newElement)
  5.     }else{
  6.         parent.insertBefore(newElement,targetElement,nextSibling);
  7.     }
  8. }

4.封装getElementsByClassName()函数

由于ie10以前不支持getElementsByClassName，因此便自己封装一个类似函数，以解决兼容问题。

  1. function getByClass(clsName,parent){
  2.     var oParent=parent?document.getElementById(parent):document;
  3.         eles=[];
  4.         elements=oParent.getElementsByTagName('*');
  6.     for(var i=0,l=elements.length;i<l;i++){
  7.         if(elements[i].className==clsName){
  8.             //push给一个数组末尾添加元素
  9.             //要想数组的开头添加一个或多个元素，请使用 unshift() 方法
  10.             eles.push(elements[i]);
  11.         }
  12.     }
  13.     return eles;
  14. }

5.阻止事件冒泡

  1. function stopPropagation(event) {  
  2.     event = event || window.event;  
  3.     event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; 
  4. } 
  8. title.onclick = function(event) {
  9.                         // 执行脚本
  10.                         menu.style.display = "block";
  11.                         event = event || window.event;
  12.                         if (event.stopPropagation) { //W3C阻止冒泡方法  
  13.                             event.stopPropagation();
  14.                         } else {
  15.                             event.cancelBubble = true; //IE阻止冒泡方法  
  16.                         }
  17.                     }

6.键盘事件

keyDown : 按任意键重复触发；
keyPress : 按下字符键重复触发；
keyUp : 释放键盘上的键触发

keyCode :得到对应键的键码值；

7.得到元素样式属性值getStyle(obj, attr)

  1. //和element.style.attr的区别是，后者只能取css样式中已有的值
  2. //而前者可以取到element的默认样式的值
  4. function getStyle(obj, attr) {
  5.     if (obj.currentStyle) { //currentStyle是针对ie浏览器
  6.         return obj.currentStyle[attr];
  7.     } else {
  8.         return getComputedStyle(obj, false)[attr]; //针对火狐浏览器
  9.     }
  10. }

8.body的ScrollTop兼容性写法

  1. function GetScrollTop() {
  2. return (document.documentElement.scrollTop || 0) + (document.body.scrollTop || 0);
  4. }

9.相对浏览器窗口定位，到达一定高度后停止

  1. function sidebar(){
  2.     window.onscroll=function(){
  3.        if(!document.getElementById) return false;
  4.         var side=document.getElementById("side"),
  5.         news=document.getElementById("news");
  6.         sideScrollTop=GetScrollTop();
  7.         if(sideScrollTop>news.offsetTop){
  8.           side.className="sidebar sidebarFixed";
  9.           console.log("a"+sideScrollTop);
  10.         } else{
  11.             side.className="sidebar";
  12.         }
  13.     }
  14. }
  15. function GetScrollTop() {
  16. return (document.documentElement.scrollTop || 0) + (document.body.scrollTop || 0);
  18. }

10.完美运动框架

  1. function startmove(obj, json, fn) {
  2.     clearInterval(obj.timer);
  3.     obj.timer = setInterval(function() {
  4.         var flag= true;
  5.         for(var attr in json){
  6.             var icur = 0;
  7.             if (attr == "opacity") {
  8.                 icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
  9.             } else {
  10.                 icur = parseInt(getStyle(obj, attr));
  11.             }
  13.             var sp = (json[attr] - icur) / 8;
  14.             sp = sp > 0 ? Math.ceil(sp) : Math.floor(sp);
  16.             if (icur != json[attr]) {
  17.                 flag = false;                           
  18.             } 
  19.             if (attr == "opacity") {
  20.                 obj.style.filter = "alpha(opacity:" + (icur + sp) + ")"
  21.                 obj.style.opacity = (icur + sp) / 100;
  22.                 console.log(icur)
  23.             } else {
  24.                 obj.style[attr] = icur + sp + "px"
  25.             }   
  26.         }
  27.         if(flag){
  28.             clearInterval(obj.timer);
  29.             if(fn){
  30.                 fn();
  31.             }
  32.         }
  33.     }, 20)
  34.     }
  36. function getStyle(obj,attr) {
  37.     if (obj.currentStyle) { //currentStyle是针对ie浏览器
  38.         return obj.currentStyle[attr];
  39.     } else {
  40.         return getComputedStyle(obj,false)[attr]; //针对火狐浏览器
  41.     }
  42. }

11.设为首页，加入收藏功能

  1. <a href="javascript:void(0);" onclick="SetHome(this,'{dede:global.cfg_basehost/}/Tenone_company/');" class="link1">设为首页</a>
  2. 　　<a href="javascript:void(0);" onclick="AddFavorite('{dede:global.cfg_basehost/}/Tenone_company','Tenone_company');" class="link1">收藏网站</a>

　　二、js部分

  1. //set homepage（设为主页）
  2. 　　function SetHome(obj, vrl) {
  3. 　　try {
  4. 　　obj.style.behavior = 'url(#default#homepage)';
  5. 　　obj.setHomePage(vrl);
  6. 　　} catch (e) {
  7. 　　if (window.netscape) {
  8. 　　try {
  9. 　　netscape.security.PrivilegeManager
  10. 　　.enablePrivilege("UniversalXPConnect");
  11. 　　} catch (e) {
  12. 　　// alert("此操作被浏览器拒绝！\n请在浏览器地址栏输入"about:config"并回车\n然后将 [signed.applets.codebase_principal_support]的值设置为'true',双击即可。");
  13. 　　}
  14. 　　var prefs = Components.classes['@mozilla.org/preferences-service;1']
  15. 　　.getService(Components.interfaces.nsIPrefBranch);
  16. 　　prefs.setCharPref('browser.startup.homepage', vrl);
  17. 　　}
  18. 　　}
  19. 　　}
  20. 　　2、//加入收藏
  21. 　　function AddFavorite(sURL, sTitle) {
  22. 　　try {
  23. 　　window.external.addFavorite(sURL, sTitle);
  24. 　　} catch (e) {
  25. 　　try {
  26. 　　window.sidebar.addPanel(sTitle, sURL, "");
  27. 　　} catch (e) {
  28. 　　alert("加入收藏失败，请使用Ctrl+D进行添加");

12字幕横向滚动（无限）

  1. <body>
  2.         <div style="width: 200px;height:18px;overflow:hidden;" id="marq">111111111111111111111111111111111111111111111111122222222222222222222222222222222223333333333333333333333333333333333333333333344444444444444444444444444444444444555555555555555555555555555555555666666666666666666666666666666666
  3.         </div>
  4.         <script>
  5.             var marq = document.getElementById("marq"),
  6.                 vari = 1;
  8.             setTimeout(function() {
  9.                 marq.scrollLeft += vari;
  10.                 if (marq.scrollLeft < 1) {
  11.                     vari = 1;
  12.                 } else if (marq.scrollLeft > 1500) {
  13.                     vari = -1;
  14.                 }
  15.                 setTimeout(arguments.callee, 18);
  16.             }, 18);
  17.         </script>
  18.     </body>

13.禁止触摸事件（禁止左右滑屏）

  1. var move=0
  2. document.addEventListener("touchmove",function(e){
  3.             if(move==0){
  4.                 e.preventDefault();
  5.                 e.stopPropagation();
  6.             }
  7.         },false);

14.input之oninput事件（元素的值发生改变时触发）

`object.oninput=function(){myScript};

15.jQuery on重复绑定事件解决方法

  1. $('obj').on('click',function(){
  2.     alert('a');
  3. })

有时会出现多次点击后反复绑定多次click事件。如上例，可能点击多次后，再点击一次会反复弹出提示框;
解决方法:

  1. $('obj').unbind('click').on('click',function(){
  2.     alert('a');
  3. })

先卸载事件，再绑定事件。

16.移动端解决click和touch

clickEvent='ontouchstart' in document.documentElement ? "touchstart" : "click"

17.js实现图片预加载并显示百分比

  1.     //图片预加载
  2.     var percent = 0;//显示百分比
  3.     var loadedimg = 0;//已加载图片数量
  4.     var images = new Array()
  5.     function preload() {
  6.       //预加载图片总数
  7.       var n = preload.arguments.length;
  8.       for (i = 0; i < preload.arguments.length; i++) {
  9.         images[i] = new Image()
  10.         images[i].src = preload.arguments[i]
  11.         images[i].onload = function(){//每张图片加载成功后执行
  12.           loadedimg++;
  13.           percent = Math.round( loadedimg/n*100 );
  14.           console.log(percent);
  15.             if(percent == 100){//全部加载完成后执行
  16.             alert('ok!');
  17.           }
  18.         };
  19.       };
  20.     };
  21.     preload(
  22.       "http://m.fun-x.cn/hc/Midea/img/1LOADING_fire1_03.png"
  23.     )

18.canvas绘制逐帧动画 核心代码

最佳解决方案：canvas缓存法。
1 创建缓存数组
2 预加载图片，没加载完一张放入数组中。
3 从数组中取出图片，使用canvas画出来。
4 清除canvas当前内容
5 画下一张
核心代码：

  1. //创建缓存数组
  2. window.keyFrames = [];
  4. //每加载一张图片，就将图片放入数组中
  5. each: function() {
  6. var img = new Image;
  7. img.src="img/" + y + ".png";
  8. keyFrames.push(img);
  9. y++;
  10. };
  12. var ctx = document.getElementById('canvas').getContext('2d');//获取画布上下文
  13.   function animate() {
  14.    if(count==49)
  15.    return;
  16.    ctx.clearRect(0, 0, canvas.width, canvas.height);//清空当前画布内容
  17.    ctx.drawImage(keyFrames[count], 0, 0, 640, 1008);//从数组中取出图片画
  18.    count++;
  19.    setTimeout(animate,30);//循环调用
  20.   };

19.classList DOM元素类名相关操作API classList

语法：element.classList

20.js控制滚动条位置

  1. lel.scrollLeft = 200 ;

21.封装fadeIn, fadeOut CSS动画 接受时间参数

  1. function fadeIn(obj, time){
  2.     var webAni = 'webkit-animation: fadeIn ' + time +'s ease-in forwards;';
  3.     var ani = 'animation: fadeIn ' + time +'s ease-in forwards;';
  5.     var fadeInAni = webAni + ani;
  7.     obj.style = fadeInAni ;
  8.     obj.setAttribute('style',fadeInAni)
  10. }
  12. function fadeInOut(obj, time){
  13.     var webAni = 'webkit-animation: fadeIn ' + time +'s ease-in reverse forwards;';
  14.     var ani = 'animation: fadeIn ' + time +'s ease-in reverse forwards;';
  16.     var fadeOutAni = webAni + ani;
  18.     obj.style = fadeOutAni ;
  19.     obj.setAttribute('style',fadeOutAni)
  21.     setTimeout(function() {
  22.         obj.style.display = "none";
  23.     }, time * 1000);
  24. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注