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

时间:2022-08-21 09:43:39
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:;
-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);
JS拖动层      特效基于javascript,务必将代码放到html后面,适合二次开发,拖动层必须在标签内写上style样式,并且有top和left属性、绝对定位
var posX;
var posY;
fdiv = document.getElementById("元素ID");
document.getElementById("元素ID").onmousedown=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);
缩放图片   等比例缩放     特效基于javascript,务必将代码放到html后面,适合二次开发
方法一
//e = document.getElementById("tester");
var images = document.images;
for(i=0; i<images.length; i++){
var img = images[i];
if (images[i].width > 50){
images[i].width = 50;
}
}
方法二
//缩放图片到合适大小
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<imgs.length;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();
tooltip     纯css制作三角兼容所有浏览器
.arrow{ width:; height:;
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('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute; width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>'); 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<collection.length;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,'<a href="###" target=_blank><img src="#" width="100" height="300" border=0></a>');
//左面
theFloaters.addItem('coupleter2',6,80,'<a href=http://www.lanrentuku.com/ target=_blank><img src="#" width="100" height="300" border=0></a>');
theFloaters.play(); //图片格式调用方法
//<EMBED src=images/duilian.swf quality=high WIDTH=100 HEIGHT=300 TYPE=application/x-shockwave-flash id=ad wmode=opaque></EMBED>
 复选框    全选/取消   全选后单元格变色
<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>
jquery图片滚动    左右可控制图片滚动,图片自动滚动
   <!--滚动代码区域-->
<div class="roll">
<div class="left">&lt;</div>
<div class="inner">
<ul style="margin-left: 0px;">
<li>
<font class="danley">Quickcss</font>
</li>
<li>
<font class="danley">Quickcss</font>
</li>
<li>
<font class="danley">Quickcss</font>
</li>
</ul>
</div>
<div class="right">&gt;</div>
<div class="status">
<a href="#" class="">a</a>
<a href="#" class="selected">a</a>
<a href="#" class="">a</a>
</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>