JavaScript经典效果集锦之四 二十七 超级REAL视频播放器 <object id="player" name="player" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="339" height="227"> <param name="_ExtentX" value="9869"><param name="_ExtentY" value="7726"><param name="AUTOSTART" value="-1"><param name="SHUFFLE" value="0"><param name="PREFETCH" value="0"><param name="NOLABELS" value="-1"><param name="SRC" value="http://entdown.163.com/ent/garbage/mv/1028/xuemv.rm"><param name="CONTROLS" value="Imagewindow"><param name="CONSOLE" value="clip1"><param name="LOOP" value="0"><param name="NUMLOOP" value="0"><param name="CENTER" value="0"><param name="MAINTAINASPECT" value="0"><param name="BACKGROUNDCOLOR" value="#000000"></object><br> 复制代码 二十八 网站论坛上面快捷键提交表单的方法 <script language=javascript>ie = (document.all)? true:falseif (ie){function ctlent(eventobject){if(event.ctrlKey && window.event.keyCode==13){this.document.form1.submit();}}}</script> <form action="http://www.jluvip.com/index.html" method=POST name=form1><textarea cols=95 name=Content rows=12 wrap=virtual οnkeydοwn=ctlent()>Ctrl+Enter提交内容信息</textarea><input type=Submit value="Submit" name=Submit></form> 复制代码 二十九 accesskey 提交 <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title></head> <body><form action="http://www.jluvip.com/index.html" method=POST name=form1><textarea ></textarea><br><input type=submit accessKey="S" value=提交(Alt+s)></form> 复制代码 三十 新闻广告图片切换效果+描述 <!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=gb2312" /><title>新闻切换技术</title><style type="text/css"><!--body { text-align: center; margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}table,td,tr,th{font-size:12px;}a:link {color: #000; text-decoration:none;}a:visited {color: #83006f;text-decoration:none;}a:hover {color: #c00; text-decoration:underline;}a:active {color: #000;}.focusPic{margin:0 auto; width:244px;}.focusPic .pic{margin:0 auto; width:240px; height:180px; padding:2px 0 0;}.focusPic .adPic{margin:0 auto 5px; width:240px; height:29px; overflow:hidden;background:url(http://tech.163.com/newimg/adpic.gif);}.focusPic .adPic .text{float:right; padding:9px 4px 0 0; width:140px;}.focusPic .adPic .text a{color:#1f3a87;}.focusPic .adPic .text a:hover{color:#bc2931;}.focusPic h2{ float:left; width:232px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}.focusPic p{float:left; width:226px;line-height:160%; margin:0; text-align:left;padding:0 0 10px 12px;}.focusPic p img {margin:0px 0 2px;}.focusPic .more{ margin:0 auto; width:240px; }.focusPic .more .textNum{float:right; margin:0 8px 0 0;padding:0 0 4px;}.focusPic .more .textNum .text{float:left; font-weight:bold; padding:7px 6px 0 0; color:#666;}.focusPic .more .textNum .num{float:left; width:113px; height:19px;}.focusPic .more .textNum .bg1{ background:url(http://tech.163.com/newimg/num1.gif);}.focusPic .more .textNum .bg2{ background:url(http://tech.163.com/newimg/num2.gif);}.focusPic .more .textNum .bg3{ background:url(http://tech.163.com/newimg/num3.gif);}.focusPic .more .textNum .bg4{ background:url(http://tech.163.com/newimg/num4.gif);}.focusPic .more .textNum .num ul{ float:left; width:113px;}.focusPic .more .textNum .num li{float:left; width:28px; font-weight:bold;display:block; color:#fff; list-style-type:none; padding:6px 0 0;}.focusPic .more .textNum .num li a{color:#fff; padding:0 5px; }.focusPic .more .textNum .num li a:visited{color:#fff;}.focusPic .more .textNum .num li a:hover{color:#ff0;} --></style></head> <body><script language="JavaScript" type="text/javascript">var nn;nn=1;setTimeout('change_img()',6000);function change_img(){if(nn>4) nn=1setTimeout('setFocus1('+nn+')',6000);nn++;tt=setTimeout('change_img()',6000);}function setFocus1(i){selectLayer1(i);}function selectLayer1(i){switch(i){case 1:document.getElementById("focusPic1").style.display="block";document.getElementById("focusPic2").style.display="none";document.getElementById("focusPic3").style.display="none";document.getElementById("focusPic4").style.display="none";document.getElementById("focusPic1nav").style.display="block";document.getElementById("focusPic2nav").style.display="none";document.getElementById("focusPic3nav").style.display="none";document.getElementById("focusPic4nav").style.display="none";break;case 2:document.getElementById("focusPic1").style.display="none";document.getElementById("focusPic2").style.display="block";document.getElementById("focusPic3").style.display="none";document.getElementById("focusPic4").style.display="none";document.getElementById("focusPic1nav").style.display="none";document.getElementById("focusPic2nav").style.display="block";document.getElementById("focusPic3nav").style.display="none";document.getElementById("focusPic4nav").style.display="none";break;case 3:document.getElementById("focusPic1").style.display="none";document.getElementById("focusPic2").style.display="none";document.getElementById("focusPic3").style.display="block";document.getElementById("focusPic4").style.display="none";document.getElementById("focusPic1nav").style.display="none";document.getElementById("focusPic2nav").style.display="none";document.getElementById("focusPic3nav").style.display="block";document.getElementById("focusPic4nav").style.display="none";break;case 4:document.getElementById("focusPic1").style.display="none";document.getElementById("focusPic2").style.display="none";document.getElementById("focusPic3").style.display="none";document.getElementById("focusPic4").style.display="block";document.getElementById("focusPic1nav").style.display="none";document.getElementById("focusPic2nav").style.display="none";document.getElementById("focusPic3nav").style.display="none";document.getElementById("focusPic4nav").style.display="block";break;}}</script><div class="focusPic"><div id="focusPic1" style="display:block ;"><div class="pic"> <a href="http://tech.163.com/special/000915SN/soft2005.html"><img src="http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg" alt="网易学院05年软件评选结果" width="240" height="180" border="0" /></a> </div><h2><a href="http://tech.163.com/special/000915SN/soft2005.html">网易学院05年软件评选结果 </a></h2><p>经过大家的热情投票和我们的辛劳整理,网易学院2005年年度软件评选结果终于出炉啦。点击进入查看… …<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/000915SN/soft2005.html" class="cDRed">详细</a></p></div><div id="focusPic2" style="display: none ;"><div class="pic"> <a href="http://tech.163.com/discover/"><img src="http://cimg.163.com/tech/2006/1/17/200601171557008cee7.jpg" alt="颠覆丛林动物生存法则" width="240" height="180" border="0" /></a> </div><h2><a href="http://tech.163.com/discover/">颠覆丛林动物生存法则</a></h2><p>群居动物的这种行为颠覆了我们通常认为的,在动物世界通行的 “丛林法则”,动物不都自私,不都是 弱肉强食的。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/discover/" class="cDRed">详细</a></p></div><div id="focusPic3" style="display: none ;"><div class="pic"> <a href="http://tech.163.com/special/00091MNJ/itobserve015.html"><img src="http://cimg.163.com/tech/2006/1/17/2006011711483290a60.jpg" alt="WAPI并非贸易阴谋" width="240" height="180" border="0" /></a> </div><h2><a href="http://tech.163.com/special/00091MNJ/itobserve015.html">WAPI并非贸易阴谋</a></h2><p>近日国家做出决定:“将向其他的国内及国外企业公布该算法”。事实证明中国WAPI标准并非是贸易阴谋 。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/00091MNJ/itobserve015.html" class="cDRed">详细</a></p></div><div id="focusPic4" style="display: none ;"><div class="pic"> <a href="http://tech.163.com/special/00091OSI/horizons.html"><img src="http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg" alt="新视野号探测冥王星特别专题 " width="240" height="180" border="0" /></a> </div><h2><a href="http://tech.163.com/special/00091OSI/horizons.html">新视野号探测冥王星特别专题 </a></h2><p>美国宇航局将于北京时间18日凌晨2时24分发射新视野号探测器,造访这颗人类唯一尚未探测过的行星-冥 王星。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/00091OSI/horizons.html" class="cDRed">详细</a></p></div><div class="more"><div class="textNum"><div class="text">> 更多头图新闻</div><div class="num bg1" id="focusPic1nav" style="display: block;"><ul><li>1</li><li><a href="javascript:setFocus1(2);" target="_self">2</a></li><li><a href="javascript:setFocus1(3);" target="_self">3</a></li><li><a href="javascript:setFocus1(4);" target="_self">4</a></li></ul></div><div class="num bg2" id="focusPic2nav" style="display: none;"><ul><li><a href="javascript:setFocus1(1);" target="_self">1</a></li><li>2</li><li><a href="javascript:setFocus1(3);" target="_self">3</a></li><li><a href="javascript:setFocus1(4);" target="_self">4</a></li></ul></div><div class="num bg3" id="focusPic3nav" style="display: none;"><ul><li><a href="javascript:setFocus1(1);" target="_self">1</a></li><li><a href="javascript:setFocus1(2);" target="_self">2</a></li><li>3</li><li><a href="javascript:setFocus1(4);" target="_self">4</a></li></ul></div><div class="num bg4" id="focusPic4nav" style="display: none;"><ul><li><a href="javascript:setFocus1(1);" target="_self">1</a></li><li><a href="javascript:setFocus1(2);" target="_self">2</a></li><li><a href="javascript:setFocus1(3);" target="_self">3</a></li><li>4</li></ul></div></div></div></div></body></html> 复制代码 成功就是成为最好的你自己! 两年突破10万年薪 名企高薪就业 TOP forest 发短消息加为好友 forest 当前离线 UID 491 帖子 3030 主题 9 积分 8865 开源币 180 在线时间 2318 小时 注册时间 2005-10-19 最后登录 2010-12-13 昵称: 木林森 头衔: 名誉版主 帖子 3030 主题 9 积分 8865 在线时间 2318 小时 最后登录 2010-12-13 5# 发表于 2006-5-15 22:17 | 只看该作者 JavaScript经典效果集锦之五 三十一 菜单特效 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!-- saved from url=(0046)http://vip.aou.cn/csqf/new_page_3.htm --><HTML><HEAD><TITLE>New Page 28</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><META content="MSHTML 6.00.2800.1491" name=GENERATOR><META content=FrontPage.Editor.Document name=ProgId><STYLE>#ssm2 A {FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none}#ssm2 A:hover {COLOR: #ccff33}body{background:url(http://www.infowe.com/images/infowe.gif) no-repeat right center fixed;}</STYLE></HEAD><BODY><SCRIPT language=JavaScript1.2> function MM_displayStatusMsg(msgStr) { status=msgStr; document.MM_returnValue = true; } function highlight(x){ document.forms[x].elements[0].focus() document.forms[x].elements[0].select() } function MM_jumpMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } var NS IE=document.all; NS=document.layers; hdrFontFamily="Verdana"; hdrFontSize="2"; hdrFontColor="white"; hdrBGColor="#CCCCCC"; linkFontFamily="Verdana"; linkFontSize="2"; linkBGColor="white"; linkOverBGColor="#CCCCCC"; linkTarget="_top"; YOffset=60; staticYOffset=20; menuBGColor="#CCCCCC"; menuIsStatic="no"; menuHeader="Main Index" menuWidth=150; // Must be a multiple of 5! staticMode="advanced" barBGColor="#C0C0C0"; barFontFamily="Verdana"; barFontSize="2"; barFontColor="white"; barText="MENU"; function moveOut() { if (window.cancel) { cancel=""; } if (window.moving2) { clearTimeout(moving2); moving2=""; } if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) { if (IE) {ssm2.style.pixelLeft += (5%menuWidth); } if (NS) { document.ssm2.left += (5%menuWidth); } moving1 = setTimeout('moveOut()', 5) } else { clearTimeout(moving1) } }; function moveBack() { cancel = moveBack1() } function moveBack1() { if (window.moving1) { clearTimeout(moving1) } if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) { if (IE) {ssm2.style.pixelLeft -= (5%menuWidth); } if (NS) { document.ssm2.left -= (5%menuWidth); } moving2 = setTimeout('moveBack1()', 5)} else { clearTimeout(moving2) } }; lastY = 0; function makeStatic(mode) { if (IE) {winY = document.body.scrollTop;var NM=ssm2.style } if (NS) {winY = window.pageYOffset;var NM=document.ssm2 } if (mode=="smooth") { if ((IE||NS) && winY!=lastY) { smooth = .2 * (winY - lastY); if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (IE) NM.pixelTop+=smooth; if (NS) NM.top+=smooth; lastY = lastY+smooth; } setTimeout('makeStatic("smooth")', 1) } else if (mode=="advanced") { if ((IE||NS) && winY>YOffset-staticYOffset) { if (IE) {NM.pixelTop=winY+staticYOffset } if (NS) {NM.top=winY+staticYOffset } } else { if (IE) {NM.pixelTop=YOffset } if (NS) {NM.top=YOffset-7 } } setTimeout('makeStatic("advanced")', 1) } } function init() { if (IE) { ssm2.style.pixelLeft = -menuWidth; ssm2.style.visibility = "visible" } else if (NS) { document.ssm2.left = -menuWidth; document.ssm2.visibility = "show" } else { alert('Choose either the "smooth" or "advanced" static modes!') } } function MM_displayStatusMsg(msgStr) { status=msgStr; document.MM_returnValue = true; } </SCRIPT> <SCRIPT language=JavaScript1.2> if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" οnmοuseοver="moveOut()" οnmοuseοut="moveBack()">')} if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" οnmοuseοver="moveOut()" οnmοuseοut="moveBack()">')} tempBar="" for (i=0;i<barText.length;i++) { tempBar+=barText.substring(i, i+1)+"<BR>"} document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>') function addItem(text, link, target) { if (!target) {target=linkTarget} document.write('<TR><TD BGCOLOR="'+linkBGColor+'" οnmοuseοver="bgColor=/''+linkOverBGColor+'/'" οnmοuseοut="bgColor=/''+linkBGColor+'/'"><ILAYER><LAYER οnmοuseοver="bgColor=/''+linkOverBGColor+'/'" οnmοuseοut="bgColor=/''+linkBGColor+'/'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')} function addHdr(text) { document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')} //Only edit the script between HERE addItem('偶和叶子', 'http://vip.aou.cn/csqf/about.htm', ''); addItem('聆听心海', 'http://vip.aou.cn/csqf/linting.htm', ''); addItem('风言风语', 'http://vip.aou.cn/csqf/fyfy.htm', ''); addItem('风行风影', 'http://vip.aou.cn/csqf/fxfy.htm', ''); addItem('雁过留声', 'http://csqf.etp21.com/', '_blank'); addHdr('WELCOME TO'); addItem('经广俱乐部', 'http://dj973.tz315.net', '_blank'); // and HERE! No more! document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>') if (IE) {document.write('</DIV>')} if (NS) {document.write('</LAYER>')} if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);} </SCRIPT> <SCRIPT> window.οnlοad=init </SCRIPT><p style="height:1000px;"></p></BODY></HTML> 复制代码 三十二 采用CSS和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=gb2312" /><title>nav</title><script language="javascript">// JavaScript Document startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.οnmοuseοver=function() {this.className+=" over";}node.οnmοuseοut=function() {this.className=this.className.replace(" over", "");}}}}}window.οnlοad=startList;</script><style type="text/css"><!--body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ul li a { display: block; text-decoration: none; color: #777; background: #fff; /* IE6 Bug */ padding: 5px; border: 1px solid #ccc; /* IE6 Bug */ border-bottom: 0; } /* Holly Hack. IE Requirement /*/* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }/* End */ li:hover ul, li.over ul { display: block; } /* The magic */--></style></head> <body><ul id="nav"><li><a href="#">Home</a></li><li><a href="#">About</a><ul><li><a href="#">History</a></li><li><a href="#">Team</a></li><li><a href="#">Offices</a></li></ul></li><li><a href="#">Services</a><ul><li><a href="#">Web Design</a></li><li><a href="#">Internet Marketing</a></li><li><a href="#">Hosting</a></li><li><a href="#">Domain Names</a></li><li><a href="#">Broadband</a></li></ul></li><li><a href="#">Contact Us</a><ul><li><a href="#">United Kingdom</a></li><li><a href="#">France</a></li><li><a href="#">USA</a></li><li><a href="#">Australia</a></li></ul></li> </ul></body></html> 复制代码