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="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);
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: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('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute; 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"><</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">></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>