<html> <head> <script type="text/javascript"> function whichButton(event) { alert(event.keyCode) } </script> </head> <body onkeyup="whichButton(event)"> <p><b>注释：</b>在测试这个例子时，要确保右侧的框架获得了焦点。</p> <p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p> </body> </html>

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

Posted in JS基础练习题.

Tagged with unicode.

No comments

By yflintao – 2010年07月28日

ie6 png透明解决方法简单高效

今天做了一个网站，由于网站页面的个性格话，使我不得不用到png格式的图片，做到一半开始测试浏览器兼容的时候，发现png在IE6下无效，郁闷！在网上搜索了一长篇，有用CSS的filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) 个方法，也有用js方法但效果都不是很理想，最终发现了一个htc的方法很好，贴出来与大家分享！

第一步：

下载文件：http://www.xipingbar.com/b/wp-content/uploads/2010/07/iepngfix.zip
第二步：

将压缩文件解压，然后把iepngfix.htc和iepngfix_tilebg.js文件放在网站根目录下

第三步：

在你的Html页面加入如下代码：

第四步：

在你的Css页面加入如下代码：img, div, input { behavior: url(“iepngfix.htc”) }

这时候再看你的png在IE6下就是透明的了！

Posted in 疑难问题.

Tagged with IE6, 透明.

No comments

By yflintao – 2010年07月28日

IE6下PNG背景透明JS代码,经试验,测试OK,代码放在HEAD上面..

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

Posted in 前端特效.

Tagged with IE6, png, 透明.

No comments

By yflintao – 2010年07月28日

更改一个链接的文本、URL 以及 target

<html> <head> <script type="text/javascript"> function changeLink() { document.getElementById('myAnchor').innerHTML="访问XIPINGBAR" document.getElementById("myAnchor").href="http://www.xipingbar.com/" document.getElementById("myAnchor").target="_self" } </script> </head> <body> <a id="myAnchor" href="../../www.microsoft.com/default.htm">访问 Microsoft</a> <input type="button" onclick="changeLink()" value="改变链接"> </body> </html>

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

Posted in JS基础练习题.

Tagged with onclick, 更改.

No comments

By yflintao – 2010年07月27日

点击加减,增删选项

<!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 type="text/css"> *{ font-size:12px; text-decoration:none;} </style> </head> <body> <table id="MenuTable" width="300" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>风禽系列</td> <td><select id="menu_0"></select> <input type="text" id="num_0" style="width:50px;" /> 份</td> <td><a href="#" onclick="ClickAddMenu();">+</a></td> </tr> <tr id="Contact"> <td>联系人</td> <td><input type="text" style="width:200px;" /></td> <td> </td> </tr> </tbody> </table> <script type="text/javascript"> var order = 1; var k = 1; var MenuTable = document.getElementById("MenuTable").getElementsByTagName("tbody")[0]; var DefaultTr = document.getElementById("Contact"); var menu_0 = document.getElementById("menu_0"); var menus = ["卤水鸭","卤水鸡","卤水鹅","卤水鸭","卤水鸡","卤水鹅"]; function iniMenu(obj){ for(var i=0;i<menus.length;i++){ obj.options.add(new Option(menus[i],i)); } } function closeTr(obj){ //debugger; MenuTable.removeChild(obj); k--; } iniMenu(menu_0); function ClickAddMenu(){ //debugger; if(k < menus.length){ var newTr = document.createElement("tr"); var newTd_0 = document.createElement("td"); newTd_0.innerHTML = "风禽系列"; var newTd_1 = document.createElement("td"); newTd_1.innerHTML = "<select id='menu_"+order+"'></select> <input type='text' id='num_"+order+"' style='width:50px;' /> 份"; var newTd_2 = document.createElement("td"); newTd_2.innerHTML = "<a href='#' onclick='closeTr(this.parentNode.parentNode)'>-</a>"; newTr.appendChild(newTd_0) newTr.appendChild(newTd_1) newTr.appendChild(newTd_2) MenuTable.insertBefore(newTr,DefaultTr); iniMenu(document.getElementById("menu_"+order)); order++; k++; }else{ alert("您不需要再增加菜单类别了！"); } } </script> </body> </html>

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

Posted in 前端特效.

Tagged with 增减, 点击, 选项.

No comments

By yflintao – 2010年07月27日

奇艺网黑色风格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" /> <base href="http://hi.baidu.com/koen_li"> <title>黑色风格的JS焦点图</title> <style type="text/css"> *{margin:0;padding:0;border:0;list-style:none;} body{padding:20px;background:#eee;} #myfocus{width:450px;height:296px;overflow:hidden;padding:6px;border:1px solid #333;font:12px Verdana, Arial, Helvetica, sans-serif;background:#000 url(http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg) no-repeat;position:relative;} #myfocus #myloading{position:absolute;top:0;left:0;z-index:9999;width:462px;height:326px;background:#333;color:#f60;font-size:12px;text-align:center;padding-top:90px;} #myfocus #myloading .bg{position:absolute;top:0;left:0;z-index:-1;}/*载入画面*/ #myfocus .pics{width:450px;height:296px;overflow:hidden;position:relative;} #myfocus .pics ul{height:296px;position:absolute;} #myfocus .pics ul li{width:450px;height:296px;float:left;position:relative;}/*图片大小450px*296px*/ #myfocus .pics ul li div,#myfocus .pics ul li div span,#myfocus .pics ul li div a{display:block;position:absolute;bottom:0;left:0;width:100%;height:34px;} #myfocus .pics ul li div span{filter:alpha(opacity=50);opacity: 0.5;background:#000;}/*文字标题的背景样式*/ #myfocus .pics ul li div a{line-height:34px;overflow:hidden;padding-left:16px;text-decoration:none;font-size:14px;color:#fff;font-weight:bold;}/*文字标题样式*/ #myfocus .mybtn{position:absolute;bottom:10px;right:12px;} #myfocus .mybtn ul li{text-align:center;float:left;width:18px;height:16px;line-height:16px;margin-left:4px;overflow:hidden;border:1px solid #000;background:#ccc;cursor:pointer;} #myfocus .mybtn ul li.current{background:#f60;color:#fff;} </style> <script type="text/javascript"> /*design by koen @ 10nian5yue11ri*/ /*http://hi.baidu.com/koen_li*/ function setFocus(ID,t){//主函数... function $(id) {return document.getElementById(id);} function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);} var n='';//标记 function showPics(num){ if(n===num) return true; if(n==='') n=0; else n=num; var pics=$$('ul',ID)[0]; var tit=$$('div',pics)[num]; if (!pics.style.left){pics.style.left = 0+'px';} if (!tit.style.bottom||parseInt(tit.style.bottom)>-34){tit.style.bottom = -34+'px';} var endX=-num*$$('div',ID)[0].clientWidth; var goimg=function(){ X=parseInt(pics.style.left); if (pics.movement){clearTimeout(pics.movement);} if(parseInt(pics.style.left)==endX) return true; if((endX-X)>0) X+=Math.ceil((endX-X) / 10); else X+=Math.floor((endX-X) / 10); pics.style.left=X+'px'; pics.movement = setTimeout(goimg, 5); } var gotit=function(){ var y=parseInt(tit.style.bottom); if (tit.movement){clearTimeout(tit.movement);} if(y==0) return true; y+=Math.ceil((0-y) / 10); if(parseInt(pics.style.left)==endX) tit.style.bottom=y+'px'; if(y<0) tit.movement = setTimeout(gotit, 16); } goimg(); gotit(); } function classNormal() {//数字标签样式清除 var focusBtnList = $$('li',$$('ul',ID)[1]); for (var i = 0; i < focusBtnList.length; i++) { focusBtnList[i].className = ''; } } function focusChange() {//交互切换 var focusBtnList = $$('li',$$('ul',ID)[1]); for (var i = 0; i < focusBtnList.length; i++) { focusBtnList[i].I=i; focusBtnList[i].onmouseover = function(){ showPics(this.I); classNormal(); focusBtnList[this.I].className = 'current'; } } } var autoFocusChange=function() {//自动运行 if (atuokey) return; var focusBtnList = $$('li',$$('ul',ID)[1]); for (var i = 0; i < focusBtnList.length; i++) { if (focusBtnList[i].className == 'current') { var currentNum = i; } } if(currentNum<focusBtnList.length-1){ showPics(currentNum+1); classNormal(); focusBtnList[currentNum+1].className = 'current'; }else if(currentNum==focusBtnList.length-1){ showPics(0); classNormal(); focusBtnList[0].className = 'current'; } } var atuokey = ''; function init(){//初始化<div><span></span><a href="#">文字说明</a></div> var ul=$$('ul',ID)[0]; var li=$$('li',ul); var NUM=li.length; var wid=$('myloading')?$$('div',ID)[1].clientWidth:$$('div',ID)[0].clientWidth;ul.style.width=wid*NUM+'px'; for(var i=0;i<NUM;i++){ var a=li[i].getElementsByTagName('a')[0]; var img=li[i].getElementsByTagName('img')[0]; li[i].innerHTML=li[i].innerHTML+'<div><span></span><a href="'+a+'">'+img.alt+'</a></div>'; } var s='<div class="mybtn"><ul>'; for(var i=0;i<NUM;i++){s+='<li>'+(i+1)+'</li>'} s+='</ul></div>'; $(ID).innerHTML+=s; $(ID).removeChild($('myloading')); showPics(0); classNormal(); $$('li',$$('ul',ID)[1])[0].className = 'current'; $(ID).onmouseover = function() { atuokey = true; clearInterval(auto); } $(ID).onmouseout = function() { atuokey = false; auto=setInterval(autoFocusChange, T); } } var T=t*1000;//每帧图片停留的时间，1000=1秒 var auto=''; init(); focusChange(); auto=setInterval(autoFocusChange, T); }; window.onload=function(){ setFocus('myfocus',4); } </script> </head> <body> <div id="myfocus"> <div id="myloading">请稍候...<br /><br /><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051020541820883.gif" /><img class="bg" src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg" /></div> <div class="pics"> <ul> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="图片1来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="图片2来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="图片3来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018052886494.jpg" alt="图片4来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="图片5来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018061333534.jpg" alt="图片6来源于网络，版权属于作者" /></a></li> </ul> </div> </div> </body> </html>

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

Posted in 前端特效.

Tagged with 幻灯, 焦点图.

No comments

By yflintao – 2010年07月27日

JavaScript Cookies

<html> <head> <script type="text/javascript"> function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" } function setCookie(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) } function checkCookie() { username=getCookie('username') if (username!=null && username!="") { alert('Welcome again' + username +'!')} else { username=prompt('Please enter your name:',"") if(username!=null && username!="") { setCookie('username',username,365) } else{ alert("O! My GOD!") } } } </script> </head> <body onLoad="checkCookie()"> </body> </html>

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

Posted in JS基础练习题.

Tagged with Cookies.

No comments

By yflintao – 2010年07月23日

JS不间断向上滚动,无缝滚动,图片滚动代码

<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><div id=demo1><img src="http://www.lanrentuku.com/down/js/images/12460764740.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764741.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764742.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764743.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764744.jpg"></div> <div id=demo2></div> </div> <script> var speed=50 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetTop-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight else{ demo.scrollTop++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>

JS实现点击radio按钮，隐藏3个checkbox

点击链接显示也面上的隐藏文字或图片

键盘按键的 unicode 的数字！

ie6 png透明解决方法简单高效

IE6下PNG背景透明JS代码,经试验,测试OK,代码放在HEAD上面..

更改一个链接的文本、URL 以及 target

点击加减,增删选项

奇艺网黑色风格JS焦点图，使用简单

JavaScript Cookies

JS不间断向上滚动,无缝滚动,图片滚动代码

分类目录

最近文章

最近评论

链接表

站点统计哦！~

2010年七月
一	二	三	四	五	六	日
« 六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Subscribe

分类目录

标签

最近文章

最近评论

链接表

站点统计哦！~