等待-放飞梦想

勤现在-乐将来

前端交互

10

08

firefox与ie 的javascript区别

Await / 前端交互 / 2010/08/10 10:09

浏览器的兼容问题目前还是一个头痛的问题。除了CSS的兼容性，Javascript的兼容有时候更容易让人头痛。下面收集的一些关于Firefox和IE的区别作个记号，需要的时候看看

1. Document.form.item 问题
现有问题：
现有代码中存在许多 document.formName.item(“itemName”) 这样的语句，不能在 firefox下运行
继续阅读

Firefox IE 前端交互

30

08

CSS 3.0 参考手册 (中文版)

Await / 前端交互 / 2009/08/30 2:55

作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助你更好的学习和理解CSS3。
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

能支持IE6的前端更牛，还是敢对IE6说不的更牛？

Await / 前端交互 / 2009/07/24 10:16

作为一个前端，是能够支持更多的浏览器比较牛，还是勇于对IE6说不，更牛一些呢？IE6在其特定历史时期内起到了举足轻重的作用。而如今，是时候让他寿终正寝，离开历史舞台的时候了，他却欲罢还休不离不弃。面对这种态势我们能做些什么吗？
继续阅读

IE6 兼容前端交互

11

06

jQuery 实现 tab 切换一例

Await / 前端交互 / 2009/06/11 6:57

对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用而已。没什么可研究的；关健还在于怎样灵活运用。达到举一反三的效果；
先看下效果图；
继续阅读

jQuery tab 切换前端交互

27

05

jQuery性能优化指南

Await / 前端交互 / 2009/05/27 5:33

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的.
1，总是从ID选择器开始继承

在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。
继续阅读

jQuery 前端交互性能

29

11

最近在几个BLOG里都见到这种效果，在标题前面有个按钮点击后关闭文章的内容[效果见BLOG的首页]。虽然实际上没什么用处，但还蛮好玩的。今天给大家讲讲怎么用jQuery来实现这种功能。其实很简单，我们只要有两个ID就行了，ID1点击就打开或关闭ID2，在这里，ID1放在标题前，ID2当然就是文章的内容了。我们知道，WordPress的每篇文章都会通过”the_ID()“自动生成一个ID。
继续阅读

display jQuery 前端交互

06

11

北京奥运官方网站幻灯切换效果JS版

Await / 前端交互资源分享 / 2008/11/06 8:54

我想对于这个焦点图片轮换大家都不陌生吧.不过原来的是FLASH版的.今天偶然看到一个JS版的.效果很酷.在这和大家分享下.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>佐佐制造byzuo.cn---焦点图片第三季</title> <style type="text/css"> /* Reset style */ * { margin:0; padding:0; word-break:break-all; } body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#0287CA; text-decoration:none; } a:hover { text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } legend { display:none; } em, strong, cite, th { font-style:normal; font-weight:normal; } input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; } table { border-collapse:collapse; } html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/ /* iFocus style */ #ifocus { width:525px; height:245px; margin:20px; border:1px solid #DEDEDE; background:#F8F8F8; } #ifocus_pic { display:inline; position:relative; float:left; width:410px; height:225px; overflow:hidden; margin:10px 0 0 10px; } #ifocus_piclist { position:absolute; } #ifocus_piclist li { width:410px; height:225px; overflow:hidden; } #ifocus_piclist img { width:410px; height:225px; } #ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; } #ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; } #ifocus_btn .current { background: url(http://www.byzuo.cn/demo/iFocus/img/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); } #ifocus_opdiv { position:absolute; left:0; bottom:0; width:410px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; } #ifocus_tx .normal { display:none; } </style> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function addLoadEvent(func){ var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function(){ oldonload(); func(); } } } function moveElement(elementID,final_x,final_y,interval) { if (!document.getElementById) return false; if (!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement); } if (!elem.style.left) { elem.style.left = "0px"; } if (!elem.style.top) { elem.style.top = "0px"; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { return true; } if (xpos < final_x) { var dist = Math.ceil((final_x - xpos)/10); xpos = xpos + dist; } if (xpos > final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if (ypos < final_y) { var dist = Math.ceil((final_y - ypos)/10); ypos = ypos + dist; } if (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; elem.movement = setTimeout(repeat,interval); } function classNormal(iFocusBtnID,iFocusTxID){ var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); var iFocusTxs = $(iFocusTxID).getElementsByTagName('li'); for(var i=0; i<ifocusbtns .length; i++) { iFocusBtns[i].className='normal'; iFocusTxs[i].className='normal'; } } function classCurrent(iFocusBtnID,iFocusTxID,n){ var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); var iFocusTxs = $(iFocusTxID).getElementsByTagName('li'); iFocusBtns[n].className='current'; iFocusTxs[n].className='current'; } function iFocusChange() { if(!$('ifocus')) return false; $('ifocus').onmouseover = function(){atuokey = true}; $('ifocus').onmouseout = function(){atuokey = false}; var iFocusBtns = $('ifocus_btn').getElementsByTagName('li'); var listLength = iFocusBtns.length; iFocusBtns[0].onmouseover = function() { moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (listLength>=2) { iFocusBtns[1].onmouseover = function() { moveElement('ifocus_piclist',0,-225,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',1); } } if (listLength>=3) { iFocusBtns[2].onmouseover = function() { moveElement('ifocus_piclist',0,-450,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',2); } } if (listLength>=4) { iFocusBtns[3].onmouseover = function() { moveElement('ifocus_piclist',0,-675,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',3); } } } setInterval('autoiFocus()',5000); var atuokey = false; function autoiFocus() { if(!$('ifocus')) return false; if(atuokey) return false; var focusBtnList = $('ifocus_btn').getElementsByTagName('li'); var listLength = focusBtnList.length; for(var i=0; i<listlength ; i++) { if (focusBtnList[i].className == 'current') var currentNum = i; } if (currentNum==0&&listLength!=1 ){ moveElement('ifocus_piclist',0,-225,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',1); } if (currentNum==1&&listLength!=2 ){ moveElement('ifocus_piclist',0,-450,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',2); } if (currentNum==2&&listLength!=3 ){ moveElement('ifocus_piclist',0,-675,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',3); } if (currentNum==3 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (currentNum==1&&listLength==2 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (currentNum==2&&listLength==3 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } } addLoadEvent(iFocusChange); </script> </listlength></ifocusbtns></script></head> <body> <div id="ifocus"> <div id="ifocus_pic"> <div id="ifocus_piclist" style="left:0; top:0;"> <ul> <li><a href="#"><img src="http://www.byzuo.cn/demo/iFocus/img/01.jpg" alt="" /></a></li> <li><a href="#"><img src="http://www.byzuo.cn/demo/iFocus/img/02.jpg" alt="" /></a></li> <li><a href="#"><img src="http://www.byzuo.cn/demo/iFocus/img/03.jpg" alt="" /></a></li> <li><a href="#"><img src="http://www.byzuo.cn/demo/iFocus/img/04.jpg" alt="" /></a></li> </ul> </div> <div id="ifocus_opdiv"></div> <div id="ifocus_tx"> <ul> <li class="current">火箭85-78马刺姚明依旧像新秀a1</li> <li class="normal">阿德尔曼：姚明进攻太犹豫火箭还有很长路要走b2</li> <li class="normal">阿联脚伤未出场卡特意外受伤网队加时险胜热队c3</li> <li class="normal">帕杜惊讶能留住郑智英媒称查尔顿升超要靠d4</li> </ul> </div> </div> <div id="ifocus_btn"> <ul> <li class="current"><img src="http://www.byzuo.cn/demo/iFocus/img/btn_01.jpg" alt="" /></li> <li class="normal"><img src="http://www.byzuo.cn/demo/iFocus/img/btn_02.jpg" alt="" /></li> <li class="normal"><img src="http://www.byzuo.cn/demo/iFocus/img/btn_03.jpg" alt="" /></li> <li class="normal"><img src="http://www.byzuo.cn/demo/iFocus/img/btn_04.jpg" alt="" /></li> </ul> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

继续阅读

切换前端交互焦点图

10

一个简单的网页调色板

Await / 前端交互资源分享 / 2008/10/10 12:03

一个简单的调色版.效果不错.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>红辣椒的调色板</title> <style> table{background:#000;} tr,td{background:#fff; padding: 10px;} #colorBoard{position:absolute; padding:10px; width:256px; height:220px; background:#f3f3f3; border:#d9d9d9 1px solid;} #colorBank{ clear:both; border:#d9d9d9 1px solid; background:#FFF; width:252px; padding:0 0 2px 2px; overflow:hidden; margin:0 auto 0 auto;} #colorBank div{ overflow:hidden; height:12px; width:12px; margin:2px 2px 0 0; float:left; overflow:hidden; cursor:pointer;} #colorViews{width:80px; height:20px; float:left;border:#d9d9d9 1px solid; background:#000; display:block; margin: 0 10px 10px 0;} #colorInput{width:70px; height:18px; float:left; font-family:Verdana; font-size:13px; color:#333; display:block; border:none; background:#FFF;border:#d9d9d9 1px solid;margin: 0 10px 10px 0;} #colorClose{width:80px; color:#999999; height:22px; float:left;display:block; background:#f3f3f3;cursor:pointer;border:#d9d9d9 1px solid; border-top:#FFF 1px solid; border-left:#FFF 1px solid;} </style> <script type="text/javascript"> //红辣椒的调色板 function colorSelect(now,page,e){ if(document.getElementById("colorBoard")){ return; } //关于出现位置 e=e||event; var scrollpos = getScrollPos(); var l = scrollpos.l + e.clientX; var t = scrollpos.t + e.clientY + 10; if (l > getBody().clientWidth-253){ l = getBody().clientWidth-253; } //创建DOM var nowColor = document.getElementById(now); var pageColorViews = document.getElementById(page); var ColorHex=new Array('00','33','66','99','CC','FF'); var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF'); var colorBank = document.createElement("div"); colorBank.setAttribute("id","colorBank"); var colorViews = document.createElement("div"); colorViews.setAttribute("id","colorViews"); var colorInput = document.createElement("input"); colorInput.setAttribute("id","colorInput"); colorInput.setAttribute("type","text"); colorInput.setAttribute("disabled","disabled"); var colorClose = document.createElement("input"); colorClose.setAttribute("id","colorClose"); colorClose.setAttribute("value","取消"); colorClose.setAttribute("type","button"); colorClose.onclick=function(){document.body.removeChild(colorBoard)}; var colorBoard =document.createElement("div"); colorBoard.id="colorBoard"; colorBoard.style.left = l+"px"; colorBoard.style.top = t+ "px"; colorBoard.appendChild(colorViews); colorBoard.appendChild(colorInput); colorBoard.appendChild(colorClose); colorBoard.appendChild(colorBank); document.body.appendChild(colorBoard); //循环出调色板 for(b=0;b<6;b++){ for(a=0;a<3;a++){ for(i=0;i<6;i++){ colorItem = document.createElement("div"); colorItem.style.backgroundColor="#"+ColorHex[a]+ColorHex[i]+ColorHex[b]; colorBank.appendChild(colorItem); } } } for(b=0;b<6;b++){ for(a=3;a<6;a++){ for(i=0;i<6;i++){ colorItem = document.createElement("div"); colorItem.style.backgroundColor="#"+ColorHex[a]+ColorHex[i]+ColorHex[b]; colorBank.appendChild(colorItem); } } } for(i=0;i<6;i++){ colorItem = document.createElement("div"); colorItem.style.backgroundColor="#"+ColorHex[0]+ColorHex[0]+ColorHex[0]; colorBank.appendChild(colorItem); } for(i=0;i<6;i++){ colorItem = document.createElement("div"); colorItem.style.backgroundColor="#"+ColorHex[i]+ColorHex[i]+ColorHex[i]; colorBank.appendChild(colorItem); } for(i=0;i<6;i++){ colorItem = document.createElement("div"); colorItem.style.backgroundColor="#"+SpColorHex[i]; colorBank.appendChild(colorItem); } var colorItems = colorBank.getElementsByTagName("div"); for(i=0; i<colorItems.length;i++){ colorItems[i].onmouseover = function(){ a = this.style.backgroundColor; if(a.length>7){ a = formatRgb(a);// } colorViews.style.background = a.toUpperCase(); colorInput.value = a.toUpperCase(); } colorItems[i].onclick = function(){ a = this.style.backgroundColor; if(a.length>7){ a = formatRgb(a);// } nowColor.value = a.toUpperCase(); pageColorViews.style.background = a.toUpperCase(); document.body.removeChild(colorBoard); } } } //格式化函数 function formatRgb(rgb){ rgb = rgb.replace("rgb","");rgb = rgb.replace("(","");rgb = rgb.replace(")",""); format = rgb.split(","); a = eval(format[0]).toString(16); b = eval(format[1]).toString(16); c = eval(format[2]).toString(16); rgb = "#"+checkFF(a)+checkFF(b)+checkFF(c); function checkFF(str){ if(str.length == 1){ str = str+""+str; return str; }else{ return str; } } return rgb; } //getBody() function getBody(){ var Body; if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { Body = document.documentElement; } else if (typeof document.body != 'undefined') { Body = document.body; } return Body; } //scrollPos function getScrollPos(){ var t,l; if (typeof window.pageYOffset != 'undefined'){ t = window.pageYOffset; l = window.pageXOffset; } else{ t = getBody().scrollTop; l = getBody().scrollLeft; } return {t:t,l:l}; } </script> </head> <body> <table width="400" cellpadding="0" cellspacing="1"> <tr> <td><input type="text" value="" id="nowColor" /></td> <td><div id="pageColorViews" style="background:#000; width:30px; height:30px;"></div></td> <td><a href="javascript:;" onclick="colorSelect('nowColor','pageColorViews',event)">点我就出调色板</a></td> </tr> </table> </body> </html>

提示：你可以先修改部分代码再运行。

color web 前端交互