兼容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%;
}
去除链接虚线框   兼容所有浏览器
纯css横向纵向居中   兼容所有浏览器
保存到桌面快捷方式   一段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
网页将不能被另存为          的用法很广,其中一条就是可以使JS广告失效。 
 
防止被人frame   
 
永远都会带着框架   这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。
 
关闭输入法 
<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>notable> 
弹出窗口
欢迎收藏哦。

普通的弹出窗口

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
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){
        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){
            //获取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.οnclick=function(){
                selectCurrentItem(this.parentNode,this);
            }
            liObj.onmouseover=function(){this.className="over";}
            liObj.onmouseout=function(){this.className="";}
            ulObj[0].appendChild(liObj);
            spanObj[0].οnclick=function(event){
                //如果当前是显示的,就隐藏,反之亦然
                showHiddenUl(this);
            }
            spanObj[0].οnmοuseοver=function(){this.className='over';}
            spanObj[0].οnmοuseοut=function(){this.className="";};
            ulObj[0].οnclick=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){
        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
JS拖动层      特效基于javascript,务必将代码放到html后面,适合二次开发,拖动层必须在标签内写上style样式,并且有top和left属性、绝对定位
 
var posX;
var posY;       
fdiv = document.getElementById("元素ID");           
document.getElementById("元素ID").οnmοusedοwn=function(e)
{
    if(!e) e = window.event;  //IE
    posX = e.clientX - parseInt(fdiv.style.left);
    posY = e.clientY - parseInt(fdiv.style.top);
    document.onmousemove = mousemove;           
}
document.onmouseup = function()
{
    document.onmousemove = null;
}
function mousemove(ev)
{
    if(ev==null) ev = window.event;//IE
    fdiv.style.left = (ev.clientX - posX) + "px";
    fdiv.style.top = (ev.clientY - posY) + "px";
}
客服漂浮效果   特效基于javascript,务必将代码放到html后面,适合二次开发,拖动层必须在标签内写上style样式,并且有top和left属性、绝对定位
 
var _customer = document.getElementById('customer');
_customer.style.display = 'block';
function position(){
    _customer.style.top = '250px';
}

lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
 diffY = document.documentElement.scrollTop;
else if (document.body)
 diffY = document.body.scrollTop
else
 {/*Netscape stuff*/}

//alert(diffY);
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
_customer.style.top=parseInt(_customer.style.top)+percent+"px";

lastScrollY=lastScrollY+percent;
//alert(lastScrollY);
}
window.setInterval("heartBeat()",50);
View Code

 

缩放图片   等比例缩放     特效基于javascript,务必将代码放到html后面,适合二次开发
方法一 
//e = document.getElementById("tester");
var images = document.images;
for(i=0; i){
    var img = images[i];
    if (images[i].width > 50){
       images[i].width = 50;
    }
}
View Code
方法二
//缩放图片到合适大小
function ResizeImages()
{
   var myimg,oldwidth,oldheight;
   var maxwidth=100;
   var maxheight=100
   var imgs = document.getElementById('zoomer').getElementsByTagName('img');   //如果你定义的id不是zoomer,请修改此处  。先获取到所有图片

   for(i=0;i){
     myimg = imgs[i];

     if(myimg.width > myimg.height)
     {
         if(myimg.width > maxwidth)
         {
            oldwidth = myimg.width;
            myimg.height = myimg.height * (maxwidth/oldwidth);
            myimg.width = maxwidth;
         }
     }else{

         if(myimg.height > maxheight)
         {
            oldheight = myimg.height;
            myimg.width = myimg.width * (maxheight/oldheight);
            myimg.height = maxheight;
         }
     }
   }
}
//缩放图片到合适大小
ResizeImages();
View Code

 

tooltip     纯css制作三角兼容所有浏览器
.arrow{ width:0; height:0;
        border-top:0px;
        border-bottom:9px solid #1c7ecf;
        border-right:9px solid #fff;
        border-left:9px solid #fff;    
}
对联广告     演示了一个两侧漂浮广告的效果,简洁的代码。兼容所有浏览器。

 

//用JS写入图片

    var delta=0.08
    var collection;
    function floaters() {
        this.items    = [];
        this.addItem    = function(id,x,y,content)
                  {
                    document.write('
typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'
'); var newItem = {}; newItem.object = document.getElementById(id); newItem.x = x; newItem.y = y; this.items[this.items.length] = newItem; } this.play = function() { collection = this.items setInterval('play()',10); } } function play() { for(var i=0;i) { var followObj = collection[i].object; var followObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x); var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y); if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) { var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta; dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx)); followObj.style.left=followObj.offsetLeft+dx; } if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) { var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta; dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy)); followObj.style.top=followObj.offsetTop+dy; } followObj.style.display = ''; } } var theFloaters = new floaters(); //右面 theFloaters.addItem('coupleter1','document.body.clientWidth-106',80,''); //左面 theFloaters.addItem('coupleter2',6,80,''); theFloaters.play(); //图片格式调用方法 //
View Code

 

 复选框    全选/取消   全选后单元格变色
<form name="form1" method="post">
    <input name="id[]" type="checkbox">AAA<br/>
    <input name="id[]" type="checkbox">BBB<br/>
    <input name="id[]" type="checkbox">CCC<br/>
    <input name="id[]" type="checkbox">DDD<br/>
    <input type="checkbox" name="chkAll" title="" onclick="selectAll();">全选/取消    
form>
    <script type="text/javascript">

            //复选
            function selectAll(){  
                var chk = document.form1.chkAll.checked;
                for (i=0;i<document.all.length;i++){
                    if (document.all[i].name=="id[]"){
                        document.all[i].checked=chk;
                        chkRow(document.all[i]);
                    }
                }
            }
            //复选后单元格变色
            function chkRow(obj){
                var r = obj.parentElement.parentElement;
                //alert(r.nodeName);  //body

                if(obj.checked){ 
                    r.style.backgroundColor="#E6E9F2";
                }
                else{
                    if(r.rowIndex%2==1)r.style.backgroundColor="";
                    else r.style.backgroundColor="#F5F5F5";
                }
            }
    script>
View Code

 

jquery图片滚动    左右可控制图片滚动,图片自动滚动
   
<div class="roll">
    <div class="left"><div>
    <div class="inner">
          <ul style="margin-left: 0px;">
             <li>
                 <font class="danley">Quickcssfont>
             li>
             <li>
                 <font class="danley">Quickcssfont>
             li>
             <li>
                 <font class="danley">Quickcssfont>
             li>
         ul>
    div>
    <div class="right">>div>
    <div class="status">
        <a href="#" class="">aa>
        <a href="#" class="selected">aa>
        <a href="#" class="">aa>
    div>
div>

<script type="text/javascript">
     /** 版权所有: 快切
     * 网站地址: http://code.google.com/p/quickcss/*/
    
    $(function(){
        
        // 添加Jquery扩展的写法
        $.extend({
            autoChange:function(){
                $('.roll ul').animate({'marginLeft':-100},function(){
                    $(this).css('marginLeft',0).find('li:first').appendTo($(this));
                    
                    // 状态按钮的切换
                    if($('.roll .status a.selected').next().size()==0){
                        $('.roll .status a.selected').removeClass('selected').parent().find('a:first').addClass('selected');
                    }
                    else{
                        $('.roll .status a.selected').removeClass('selected').next().addClass('selected');
                    }
                });
            }
        })
        // 函数重复调用,基于jQuery的方法一定要以上面的写法定义,否则这里不会生效
        _interval = setInterval("$.autoChange()",3000);
        
        /*鼠标移上去滚动停止,鼠标拿开继续滚动*/
        $('.roll').mouseover(function(){
            clearInterval(_interval);
        })
        $('.roll').mouseout(function(){
            _interval = setInterval("$.autoChange()",3000);                     
        })

        
        $('.roll .left').click(function(){
            
            // 将整个ul设置动画方式负移位,制造图片左移的效果,然后设置移位为0,将第一张图片获取补到最后,到这里整个图片左移效果完成
            $('.roll ul').animate({'marginLeft':-100},function(){
                $(this).css('marginLeft',0).find('li:first').appendTo($(this));
                
                // 状态按钮的切换
                    if($('.roll .status a.selected').next().size()==0){
                        $('.roll .status a.selected').removeClass('selected').parent().find('a:first').addClass('selected');
                    }
                    else{
                        $('.roll .status a.selected').removeClass('selected').next().addClass('selected');
                    }
            });
        },
        function(){});
        
        $('.roll .right').click(function(){
        
            // 同上
            $('.roll ul').css('marginLeft',-100).find('li:last').prependTo($('.roll ul'));
            $('.roll ul').animate({'marginLeft':0});
            
            // 状态按钮的切换
                    if($('.roll .status a.selected').next().size()==0){
                        $('.roll .status a.selected').removeClass('selected').parent().find('a:first').addClass('selected');
                    }
                    else{
                        $('.roll .status a.selected').removeClass('selected').next().addClass('selected');
                    }
        },
        function(){})
    })

    script>
View Code

 

 

 

 

 

转载于:https://www.cnblogs.com/fanxiaowu/p/4447404.html

你可能感兴趣的:(兼容ie6,ie7,ie8,firefox,chrome浏览器的代码片段)