兼容ie6，ie7，ie8，firefox，chrome浏览器的代码片段

hack实现方式和原理
#hacker{
    color:red; 
    *color:white; /*for ie6,ie7*/
    *+color:blue; /*for ie7*/
    _color:gray; /*for ie6*/
    color:balck !important; /*for firefox*/
    color:yellow \9; /*for ie9*/
}

透明  兼容所有浏览器

 

.transparent{
    filter:alpha(opacity=50);
   -moz-opacity:0.5;/**Firefox 3.5即将原生支持opacity
属性，所以本条属性只在Firefox3以下版本有效 ***/
   -khtml-opacity: 0.5; opacity: 0.5; 
}

 

渐变  兼容所有浏览器 
.gradient{
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#dedede);
    background: -moz-linear-gradient(top, #ffffff, #dedede);
}
高亮  兼容所有浏览器 
.highlighted {
    background: none repeat scroll 0 0 #00ADEE;
    color: #FFFFFF;
    padding: 0 5px;
}
阴影  兼容firefox 
.shadow{    
    box-shadow: 0 5px 10px #cecece;;
}
圆角  兼容firefox 
.radius{    
    -webkit-border-radius: 4px;   /*只支持webkit内核的浏览器*/
    border-radius: 4px;  /*只支持IE内核的浏览器（IE>=7)*/
    -moz-border-radius : 4px; /*只支持Mozilla内核的浏览器*/
    border:#ddd solid 1px;
    padding:4px;
}
超出省略号展示  兼容firefox，ie所有浏览器 
.ellipsis{    
    white-space:nowrap;/*设置不折行*/
    text-overflow:ellipsis;/*这就是省略号喽*/
    -o-text-overflow:ellipsis;/*兼容opera*/
    width:80px;
    overflow:hidden;
}
旋转  图片旋转效果，纯css实现，不兼容IE9以下浏览器 
.rotate:hover{
     -o-transform: rotate(40deg); /* Opera浏览器 */
    -webkit-transform: rotate(40deg); /* Webkit内核浏览器 */
    -moz-transform: rotate(40deg); /* Firefox浏览器 */
    transform: rotate(360deg);
    transition: all 1s ease-out 0s;
}
首字母  兼容所有浏览器  
.firstletter:first-letter{
     font-size:120%;
}
去除链接虚线框   兼容所有浏览器 
<a href="link1.htm" onfocus="this.blur()">link</a>
纯css横向纵向居中   兼容所有浏览器 
<div style="width:960px; height:200px; background:red; position:absolute; left:50%; 
margin-left:-480px; top:50%; margin-top:-100px;"></div>
保存到桌面快捷方式   一段php代码 
<?php

$Shortcut = "[InternetShortcut]

URL=http://kuai.qietu.com

IDList=[{000214A0-0000-0000-C000-000000000046}]Prop3=19,2";

Header("Content-type: application/octet-stream");

header("Content-Disposition: attachment; filename=shortcut.url;");

echo $Shortcut;

?>
图标黑白变彩色   快速实现整站黑白    只要是符合w3标准的网页，在CSS文件的最前面加上一行代码就可以了，这段代码使用的是CSS滤镜，将网页中的色彩部分过滤掉。 
html {     filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 
或者第二种方法在样式文件的最上端加上如下代码：以下是代码片段：
body{filter:Gray;} 
img{filter:Gray;}
flash 调用js最简单的方法    方便flash工程师与js工程师的协调工作。 
flash 调用js 最简单的方法是 :
getURL("javascript:function()"); //function 为此FLASH所在页面的JS函数名.

js 传递变量给 flash 最简单的方法是:
flash.setVariable("变量名","变量值"); //flash为此FLASH的id
网页将不能被另存为          <noscirpt>的用法很广，其中一条就是可以使JS广告失效。  
<noscript><iframe src=*.html></iframe></noscript>
防止被人frame   
<SCRIPT LANGUAGE=javascript><!-- 
　if (top.location != self.location)top.location=self.location; 
// --></SCRIPT>
永远都会带着框架   这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。 
<script language=javascript><!-- 
　if (window == top)top.location.href = frames.htm;// --></script>
关闭输入法  
<input style="ime-mode:disabled"/>
防止复制 
<body oncopy="return false"; oncut="return false";>
不准粘贴 
<body onpaste="return false";>
取消选取、防止复制
<body onselectstart="return false";>
将彻底屏蔽鼠标右键,无右键菜单   
<body oncontextmenu="return false";>
也可以用于网页中Table框架中
<table border oncontextmenu=return(false)><td>no</table>
弹出窗口
欢迎收藏哦。

普通的弹出窗口

window.open ('page.html') ;

经过设置后的弹出窗口

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');

弹启一个全屏窗口

window.open('http://kuai.qietu.com','example01','fullscreen');
window.open('index.asp','','fullscreen=1');

弹启一个被F11化后的窗口

window.open('http://kuai.qietu.com','example01','channelmode');

在弹出窗口中加上一个关闭按钮

onClick='window.close()';

弹启一个带有收藏链接工具栏的窗口

window.open('http://kuai.qietu.com','example03','width=400,height=300,directories');
ENTER键可以让光标移到下一个输入框 
<input onKeyDown="if(event.keyCode==13)event.keyCode=9" >
IE地址栏前换成自己的图标
<link rel="ShortcutIcon" href="favicon.ico">
可以在收藏夹中显示出你的图标 
<link rel="Bookmark" href="favicon.ico">
自动跳转      content=3 表示3秒刷新到URL 
<meta http-equiv="refresh" content="3; URL=http://www.baidu.com" charset="gb2312"/>
IE自带的网页过渡特效
<meta  http-equiv="Page-Enter"  content="blendTrans(Duration=1.0)">
混合  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=0)">
盒状收缩  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=1)">
盒状展开  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=2)">
圆形收缩  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=3)">
圆形放射  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=4)">
向上擦除  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=5)">
向下擦除  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=6)">
向右擦除  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=7)">
向左擦除  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=8)">
垂直遮蔽  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=9)">
水平遮蔽  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=10)">
横向棋盘式  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=11)">
纵向棋盘式  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=12)">
随机溶解  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=13)"> 
左右向中央缩进  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=14)">
中央向左右扩展  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=15)"> 
上下向中央缩进  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=16)">
中央向上下扩展  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=17)">
从左下抽出  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=18)">
从左上抽出  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=19)">
从右下抽出  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=20)">
从右上抽出  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=21)">
随机水平线条  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=22)">
随机垂直线条  
<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=23)">
随机
网页不会被缓存
<meta http-equiv = "pragma" content="no-cache">
<meta http-equiv = "Cache-Contro" content="no-cache, must-revalidate">
<meta http-equiv = "expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
<meta http-equiv="expires"  content="0">
 满屏的遮罩纯css实现    史上最简单代码，兼容所有浏览器 
/*纯css全屏的遮罩层*/
#overlay{ 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=80); 
}
不错的JS模拟下拉菜单
来自日常工作中的整理，使用频率比较高的一个代码范例。 遇到的时候不太好找，所以要收藏哦。
演示
1987
请选择性别↓
初中
代码

var ____configArray;
function __initDropDownList(configArray){
    //获取Select菜单
    ____configArray=configArray;
    var existArray=configArray.split("|");
    for(var i=0;i<existArray.length;i++){
        if(existArray[i].length<1){return;}
        //根据参数分别获取div，并分别添加事件
        var parentContainer=document.getElementById(existArray[i]);
        if(!parentContainer){return;}
        //获取下面的select，且获取其中的option
        var selectObj=parentContainer.getElementsByTagName("select");
        if(selectObj.length<1){return;}
        var optionArray=selectObj[0].getElementsByTagName("option");
        //获取option，并分别添加到各个li
        var optionLength=optionArray.length;
        for(var j=0;j<optionLength;j++){
            //获取ul，以便能够添加项目
            var ulObj=parentContainer.getElementsByTagName("ul");
            if(ulObj.length<1){return;}
            //获取span，以便能显示当前选择的项目
            var spanObj=parentContainer.getElementsByTagName("span");
            if(spanObj.length<1){return;}
            var liObj=document.createElement("li");
            var textNode=document.createTextNode(optionArray[j].firstChild.nodeValue)
            liObj.appendChild(textNode);
            liObj.setAttribute("currentIndex",j);
            //给每个liObj添加事件
            liObj.onclick=function(){
                selectCurrentItem(this.parentNode,this);
            }
            liObj.onmouseover=function(){this.className="over";}
            liObj.onmouseout=function(){this.className="";}
            ulObj[0].appendChild(liObj);
            spanObj[0].onclick=function(event){
                //如果当前是显示的，就隐藏，反之亦然
                showHiddenUl(this);
            }
            spanObj[0].onmouseover=function(){this.className='over';}
            spanObj[0].onmouseout=function(){this.className="";};
            ulObj[0].onclick=function(){this.className="";}
        }
        parentContainer.onclick=function(event){
            if(!event){event=window.event;}
                //阻止事件冒泡
                event.cancelBubble=true;
                var eventUlObj=this.getElementsByTagName("ul")[0];
                bodyClickHiddenUl(eventUlObj);
        }
    }
}
function selectCurrentItem(ulObj,currentObj){
    var parentObj=ulObj.parentNode;
    var spanObj=parentObj.getElementsByTagName("span")[0];
    spanObj.firstChild.nodeValue=currentObj.firstChild.nodeValue;
    var selectObj=parentObj.getElementsByTagName("select")[0];
    selectObj.selectedIndex=parseInt(currentObj.getAttribute("currentIndex"));
}
function showHiddenUl(currentObj){
    var parentNode=currentObj.parentNode;
    var ulObj=parentNode.getElementsByTagName("ul")[0];
    if(ulObj.className==""){
        ulObj.className="show";
    }else{
        ulObj.className="";
    }
}
//点击body区域（非“下拉菜单”）隐藏菜单
function addBodyClick(func) {
    var bodyObj=document.getElementsByTagName("body")[0];
    var oldBodyClick = bodyObj.onclick;
        if (typeof bodyObj.onclick != 'function') {
            bodyObj.onclick = func;
        } else {
            bodyObj.onclick = function() {
            oldBodyClick();
            func();
        }
    }
}
//隐藏所有的UL
function bodyClickHiddenUl(eventUlObj){
    var existArray=____configArray.split("|");
    for(var i=0;i<existArray.length;i++){
        if(existArray[i].length<1){return;}
        //寻找所有UL并且隐藏
        var parentContainer=document.getElementById(existArray[i]);
        if(!parentContainer){return;}
        var ulObj=parentContainer.getElementsByTagName("ul");
        if(eventUlObj!=ulObj[0]){
            ulObj[0].className="";
        }
    }
}
var __dropDownList="dropDownList1|dropDownList2|dropDownList3";
__initDropDownList(__dropDownList);
//添加这个可以确保点击body区域的时候也可以隐藏菜单
addBodyClick(bodyClickHiddenUl);
View Code

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode