打印

[收藏] JavaScript 经典效果集－第二期策划中

greengnn

酒酣几度
荣誉管理团队

帖子: 1060
体力: 1613
威望: 114
当前: 广东深圳
离线: 2 天

31^# 大中小发表于 2006-3-19 23:18

[收藏] 我平时收集的JavaScript经典效果.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<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" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="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+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="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.onload=init
</SCRIPT>
<p style="height:1000px;"></p>
</BODY></HTML>

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

greengnn's space/web design
Design your life with Web Standards WEB标准群：46077068

TOP

greengnn

酒酣几度
荣誉管理团队

帖子: 1060
体力: 1613
威望: 114
当前: 广东深圳
离线: 2 天

32^# 大中小发表于 2006-3-19 23:20

[收藏] 我平时收集的JavaScript经典效果.

复制内容到剪贴板

代码:

http://www.marktip.com/blog/article.asp?id=81

采用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.onmouseover=function() {
this.className+=" over";
 }
 node.onmouseout=function() {
 this.className=this.className.replace(" over", "");
 }
 }
 }
 }
}
window.onload=startList;
</script>
<style type="text/css">

</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>

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

greengnn's space/web design
Design your life with Web Standards WEB标准群：46077068

TOP

小CaiCai

高级会员

帖子: 198
体力: 721
威望: 0
离线: 552 天

发短消息

33^# 大中小发表于 2006-3-20 17:05

[收藏] 我平时收集的JavaScript经典效果.

有点疑问，圆边圆角那个怎么打开几秒就消失了？
可以保持一直显示吗？

·—■的世界
酸酸甜甜的感觉

TOP

leaf52

禁止发言

帖子: 27
体力: 116
威望: 0
离线: 820 天

发短消息

34^# 大中小发表于 2006-3-25 15:26

[收藏] 我平时收集的JavaScript经典效果.

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

<p><font face="黑体" color="#FF00FF" size="5"><b>做人要厚道，别耍小花招。</b></font></p>

TOP

luoblo

初级会员

帖子: 23
体力: 58
威望: 0
离线: 52 天

发短消息

35^# 大中小发表于 2006-3-30 10:44

[收藏] JavaScript经典效果集

你把鼠标放上去，很难将连接点出，谁知道的修改下
Lenvo在上个帖子中说

引用:

漂亮的仿flash菜单，来自蓝色经典
<style> /* 先把这个 xmenu 的样式放到css里 */ .xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;} </style> <script> /* http://lexrus.blueidea.com 这是把事件动作绑定到菜单上的函数 */ function attachXMenu(objid){ var tds=objid.getElementsByTagName('td'); for(var i=0;i<tds.length;i++){ with(tds[i]){ onmouseover=function(){ with(this){ filters[0].apply(); style.background='#66CCFF'; //这是鼠标移上去时的背景颜色 style.border='1px solid #ffffff'; //边框 style.color='black'; //文字颜色 filters[0].play(); } } onmouseout=function(){ with(this){ filters[0].apply(); style.background='#336699'; //这是鼠标离开时的背景颜色 style.border='1px solid #336699'; //边框 style.color='#ffffff'; //文字颜色 filters[0].play(); } } } } } </script>  <table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center"> <tr> <td><a href="http://163.com/">点击到163.com但没作用</a></td> <td>Name</td> <td>Is</td> <td>LeX</td> <td>Rus</td> <td>!!!</td> </tr> </table> <script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script> <br><br><br><br>  <table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center"> <tr><td>My</td></tr> <tr><td>Name</td></tr> <tr><td>Is</td></tr> <tr><td>LeX</td></tr> <tr><td>Rus</td></tr> <tr><td>!!!</td></tr> </table> <script>attachXMenu(xmenu1);</script>
提示：您可以先修改部分代码再运行

你把鼠标放上去，很难将连接点出，谁知道的修改下

TOP

chyf1982

经典会员
银牌会员

帖子: 1238
体力: 2329
威望: 1
离线: 121 天

36^# 大中小发表于 2006-3-31 22:29

[收藏] JavaScript经典效果集

luoblo在上个帖子中说

引用:

你把鼠标放上去，很难将连接点出，谁知道的修改下
Lenvo在上个帖子中说
引用:
漂亮的仿flash菜单，来自蓝色经典
<style> /* 先把这个 xmenu 的样式放到css里 */ .xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;} </style> <script> /* http://lexrus.blueidea.com 这是把事件动作绑定到菜单上的函数 */ function attachXMenu(objid){ var tds=objid.getElementsByTagName('td'); for(var i=0;i<tds.length;i++){ with(tds[i]){ onmouseover=function(){ with(this){ filters[0].apply(); style.background='#66CCFF'; //这是鼠标移上去时的背景颜色 style.border='1px solid #ffffff'; //边框 style.color='black'; //文字颜色 filters[0].play(); } } onmouseout=function(){ with(this){ filters[0].apply(); style.background='#336699'; //这是鼠标离开时的背景颜色 style.border='1px solid #336699'; //边框 style.color='#ffffff'; //文字颜色 filters[0].play(); } } } } } </script>  <table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center"> <tr> <td><a href="http://163.com/">点击到163.com但没作用</a></td> <td>Name</td> <td>Is</td> <td>LeX</td> <td>Rus</td> <td>!!!</td> </tr> </table> <script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script> <br><br><br><br>  <table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center"> <tr><td>My</td></tr> <tr><td>Name</td></tr> <tr><td>Is</td></tr> <tr><td>LeX</td></tr> <tr><td>Rus</td></tr> <tr><td>!!!</td></tr> </table> <script>attachXMenu(xmenu1);</script>
提示：您可以先修改部分代码再运行
你把鼠标放上去，很难将连接点出，谁知道的修改下

你不说还真没发现。。不过FF1.0.6下测试通过。。。

态度决定一切电影下载

TOP

yuzhonga

新手上路

帖子: 9
体力: 18
威望: 0
离线: 7 天

37^# 大中小发表于 2006-4-1 13:20

[收藏] JavaScript经典效果集

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

[ 本帖最后由 bound0 于 2006-10-26 14:17 编辑 ]

TOP

chyf1982

经典会员
银牌会员

帖子: 1238
体力: 2329
威望: 1
离线: 121 天

38^# 大中小发表于 2006-4-1 16:58

[收藏] JavaScript经典效果集

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

楼上的。你都没写改了哪里。。
一开始的时候还以为没改呢

仔细看了才发现。。。原来是用onclick代替了a呵呵

态度决定一切电影下载

TOP

独来读网

初级会员

帖子: 18
体力: 75
威望: 0
离线: 119 天

39^# 大中小发表于 2006-4-11 17:40

网易娱乐头图新闻代码

<title>51du.cn-代码演示专用页面</title>
<style type="text/css">
/* 全局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;}
/* 颜色属性 [定义规则，小写c加颜色名称] */
.cRed,a.cRed:link,a.cRed:visited{ color:Red; }
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
a.cBlue:hover{color:#bc2931;}
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#c00;}
.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}
.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
a.cBlack:hover{color:#bc2931;}
/* 头图 */
.col{margin: 20 0 0 0;float:center; width:252px;border:1px solid #006BB6;}
.focusPic{margin:0 auto; width:252px;}
.focusPic .pic{margin:0 auto; width:250px; height:191px; padding:5px 0 0; background:url(http://cimg2.163.com/ent/newimg/focus3_bg.gif) no-repeat;}
.focusPic .pic img{margin:6px 0 0 0;}
.focusPic .pic h3 {text-align:left; padding:1px 0 0 12px;}
.focusPic .pic h3 img {margin:0px; }
.focusPic .pic .flashBlank {margin:0 auto; width:100%; height:6px; font-size:1px; }
.focusPic .pic h5 {text-align:left; padding:0px 0 0 12px !important;padding:5px 0 0 12px;}
.focusPic .pic h5 img {margin:0px; }
.focusPic h2{ float:left; width:236px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}
.focusPic p{float:left; width:236px;line-height:160%; margin:0; text-align:left;padding:0 0 10px 12px; height:57px;}
.focusPic .more{ margin:0 auto; width:250px; }
.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://ent.163.com/newimg/num1.gif);}
.focusPic .more .textNum .bg2{ background:url(http://ent.163.com/newimg/num2.gif);}
.focusPic .more .textNum .bg3{ background:url(http://ent.163.com/newimg/num3.gif);}
.focusPic .more .textNum .bg4{ background:url(http://ent.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>
<div class="col">

<script language="javascript">
var nn;
nn=1;
setTimeout('change_img()',6000);
function change_img()
{
 if(nn>4) nn=1
 setTimeout('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://ent.163.com/06/0410/07/2EB5MT7000031H2L.html"><img src="http://cimg2.163.com/ent/2006/4/10/200604100850175803c.jpg" alt="章子怡黑衣蒙头上吴彦祖保姆车" width="228" height="150" border="0" /></a> 
<h3><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://ent.163.com/06/0410/07/2EB5MT7000031H2L.html">章子怡黑衣蒙头上吴彦祖保姆车</a></h2>
<p>　　章子怡日前和霍启山闹分手，前晚(4月8日)在香港又被媒体跟拍到她和吴彦祖一起玩乐、还一上车就遮遮掩掩 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://ent.163.com/06/0410/07/2EB5MT7000031H2L.html" class="cDRed">详细</a></p>
</div>
<div id="focusPic2" style="display: none;">
        <div class="pic"> <a href="http://ent.163.com/06/0410/13/2EBQ6RK000031NKO.html"><img src="http://cimg2.163.com/ent/2006/4/10/2006041016571088ffc.jpg" alt="刘晓庆重演武则天造型曝光" width="228" height="150" border="0" /></a> 
<h3><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://ent.163.com/06/0410/13/2EBQ6RK000031NKO.html">刘晓庆重演武则天造型曝光</a></h2>
<p>　　《日月凌空》正紧张拍摄,刘晓庆再次扮演武则天,记者通过特殊渠道获得了两张被称为剧组顶级机密的造型照。 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://ent.163.com/06/0410/13/2EBQ6RK000031NKO.html" class="cDRed">详细</a></p>
</div>
<div id="focusPic3" style="display: none;">
        <div class="pic"> <a href="http://adclient.163.com/event.ng/Type=click&FlightID=55136&AdID=57068&TargetID=515&Values=31,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&Redirect=http://ent.163.com/special/00031SST/FQ.html"><img src="http://cimg2.163.com/ent/2006/4/7/20060407101802517a6.jpg" alt="赢飞利浦768手机" width="228" height="150" border="0" /></a> 
<h3><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://adclient.163.com/event.ng/Type=click&FlightID=55136&AdID=57068&TargetID=515&Values=31,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&Redirect=http://ent.163.com/special/00031SST/FQ.html">赢飞利浦768手机</a></h2>
<p>　　参加飞利浦手机娱乐关键字专题活动，赢取飞利浦768手机，活动正火热进行中 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://adclient.163.com/event.ng/Type=click&FlightID=55136&AdID=57068&TargetID=515&Values=31,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&Redirect=http://ent.163.com/special/00031SST/FQ.html" class="cDRed">详细</a></p>
</div>
<div id="focusPic4" style="display: none;">
        <div class="pic"><div class="clear flashBlank">　</div> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="228" height="150">
<param name="movie" value="http://cimg3.163.com/ent/2006/0403/pepsi228150.swf" />
<param name="quality" value="high" />
<embed src="http://cimg3.163.com/ent/2006/0403/pepsi228150.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="228" height="150"></embed>
</object> 
<h5><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h5>
        </div>
<h2><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54561&AdID=56510&TargetID=515&Values=31,43,51,60,72,78,84,91,100,110,312,330,332,364,586,702,733,734&Redirect=http://pepsi.163.com/">中国无名小子挑战球星贝克汉姆</a></h2>
<p>　　两个中国无名小子将会亲身与贝克汉姆、罗纳尔迪尼奥、亨利等世界顶级球星面对面。 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://adclient.163.com/event.ng/Type=click&FlightID=54561&AdID=56510&TargetID=515&Values=31,43,51,60,72,78,84,91,100,110,312,330,332,364,586,702,733,734&Redirect=http://pepsi.163.com/" class="cDRed">详细</a></p>
</div>
<div class="more">
<div class="textNum">
<div class="text">&gt; 更多头图新闻</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>

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

My Blog：http://www.51du.cn

TOP

独来读网

初级会员

帖子: 18
体力: 75
威望: 0
离线: 119 天

40^# 大中小发表于 2006-4-12 08:52

仿淘宝首页产品展示橱窗

<!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>51du.cn-代码演示专用页面</title>
<style type="text/css">
.gallery { width:760px; height:116px; clear:left;background:#FEF7EC; list-style:none;text-align:center;margin:0 auto;}.gallery li { float:left; width:78px !important; width /**/:80px; height:116px;background-color:#FEF7EC; background-position:center 3px; background-repeat:no-repeat;border:1px #FFDFB2 solid; margin:0 2px;}.gallery a { display:block; width:78px; padding-top:85px; }
</style>
</head>
<body>
<ul class="gallery">  <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li>  <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li>  <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li>  <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li>  <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li>  <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li>  <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li>  <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li>  <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li></ul>
</body>
</html>

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

My Blog：http://www.51du.cn

TOP

33o3

新手上路

帖子: 13
体力: 44
威望: 0
离线: 245 天

发短消息

41^# 大中小发表于 2006-4-12 10:36

[收藏] JavaScript经典效果集

滚屏显示

将下面的代码插入到<body> </body>之间。
<script language"javascript">
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</script>

滚动的按钮

<script Language="JavaScript">
function scrollit(){
for (I=1; I<=500; I++){
parent.scroll(1,I)
}
}
</script>
<form>
<div align="center"><center><p><input type="button" value=">>>开始向下滚屏<<<" onClick="scrollit()"> </p>
</center></div>
</form>

TOP

lipengadmin [楼主]

花火博客
中级会员

帖子: 94
体力: 331
威望: 0
当前: 北京海淀区
离线: 46 天

42^# 大中小发表于 2006-4-13 23:38

[收藏] JavaScript经典效果集

制作特殊字的脚本

<html>
<head>
<title>特殊文字的制作</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body text=#00ff00 bgColor=black  onload=e(d.q)>
<center>特殊文字的制作</font></center>
<br>
<center>
<table border=2 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面为效果显示</strong></font></td></tr>
<tr><td align=left>
<SCRIPT>d=document;wr='write';v=void 0;u='';sn='<span style="background-color:#00ff00;color:black;">';sa='</span>';function di(x,y){for(i=1;i<x;i++)d[wr](y);}d.layers?n4=1:n4=0;d.all?i4=1:i4=0;i4&&navigator.platform.indexOf('Mac')!=-1?i4=0:v;fn='font-family:Courier;font-size:12px;';!n4?vb='.g{background-color:black;border-color:green;border-style:solid;border-width:1px;color:#00ff00;'+fn+'}.h{background-color:#00FF00;border:none;color:black;'+fn+'}':vb=u;di(2,'<style>'+vb+'body{'+fn+'}<\/style>');el='elements';vl='value';ih='innerHTML';sp='　';br='<br>';a1='15';a2='1234';a3='12345';a4='234';a5='2345';a6='1';a7='3';a8='5';a9='135';b0='24';b1='23';b2='2';b3='14';b4='123';b5='4';b6='34';b7='235';f=new Array();f['A']=[a4,a1,a1,a3,a1,a1,a1];f['B']=[a2,a1,a1,a2,a1,a1,a2];f['C']=[a5,a6,a6,a6,a6,a6,a5];f['D']=[a2,a1,a1,a1,a1,a1,a2];f['E']=[a3,a6,a6,a2,a6,a6,a3];f['F']=[a3,a6,a6,a2,a6,a6,a6];f['G']=[a5,a6,a6,'1345',a1,a1,a5];f['H']=[a1,a1,a1,a3,a1,a1,a1];f['I']=[a3,a7,a7,a7,a7,a7,a3];f['J']=[a5,a8,a8,a8,a1,a1,a4];f['K']=[a1,b3,'13','12','13',b3,a1];f['L']=[a6,a6,a6,a6,a6,a6,a3];f['M']=[a1,'1245',a9,a1,a1,a1,a1];f['N']=[a1,a1,'125',a9,'145',a1,a1];f['O']=[a4,a1,a1,a1,a1,a1,a4];f['P']=[a2,a1,a1,a2,a6,a6,a6];f['Q']=[a4,a1,a1,a1,a9,b3,b7];f['R']=[a2,a1,a1,a2,'13',b3,a1];f['S']=[a5,a6,a6,a4,a8,a8,a2];f['T']=[a3,a7,a7,a7,a7,a7,a7];f['U']=[a1,a1,a1,a1,a1,a1,a4];f['V']=[a1,a1,a1,a1,a1,b0,a7];f['W']=[a1,a1,a9,a9,a9,a9,b0];f['X']=[a1,a1,b0,a7,b0,a1,a1];f['Y']=[a1,a1,b0,a7,a7,a7,a7];f['Z']=[a3,a8,b5,a7,b2,a6,a3];f['a']=[u,u,a4,a8,a5,a1,a5];f['b']=[a6,a6,a2,a1,a1,a1,a2];f['c']=[u,u,a5,a6,a6,a6,a5];f['d']=[a8,a8,a5,a1,a1,a1,a5];f['e']=[u,u,a4,a1,a3,a6,a5];f['f']=['345',b2,a3,b2,b2,b2,b2];f['g']=[u,u,a5,a1,a5,a8,a4];f['h']=[a6,a6,a2,a1,a1,a1,a1];f['i']=[a7,u,b4,a7,a7,a7,a3];f['j']=[a8,u,a8,a8,a8,a1,a4];f['k']=[a6,a6,a1,b3,b4,b3,a1];f['l']=[b4,a7,a7,a7,a7,a7,a3];f['m']=[u,u,b0,a9,a9,a9,a9];f['n']=[u,u,a4,a1,a1,a1,a1];f['o']=[u,u,a4,a1,a1,a1,a4];f['p']=[u,u,a2,a1,a2,a6,a6];f['q']=[u,u,a5,a1,a5,a8,a8];f['r']=[u,u,a4,a1,a6,a6,a6];f['s']=[u,u,a5,a6,a4,a8,a2];f['t']=[u,b2,a3,b2,b2,b2,'345'];f['u']=[u,u,a1,a1,a1,a1,a4];f['v']=[u,u,a1,a1,a1,b0,a7];f['w']=[u,u,a9,a9,a9,a9,b0];f['x']=[u,u,a1,b0,a7,b0,a1];f['y']=[u,u,a1,a1,a5,a8,a4];f['z']=[u,u,a3,b5,a7,b2,a3];f['1']=[b4,a7,a7,a7,a7,a7,a3];f['2']=[a2,a8,a8,a4,a6,a6,a3];f['3']=[a2,a8,a8,a4,a8,a8,a2];f['4']=[b6,b0,b3,b3,a3,b5,b5];f['5']=[a3,a6,a6,a2,a8,a8,a2];f['6']=[a5,a6,a6,a2,a1,a1,a4];f['7']=[a3,a8,a8,b5,a7,a7,a7];f['8']=[a4,a1,a1,a4,a1,a1,a4];f['9']=[a4,a1,a1,a5,a8,a8,a2];f['0']=f['O'];f['`']=[a6,b2,a7,u,u,u,u];f['~']=[b7,b3,u,u,u,u,u];f['!']=[a7,a7,a7,a7,a7,u,a7];f['@']=[a2,a8,b7,a9,a9,a9,a4];f['#']=[b0,a3,b0,a3,b0,u,u];f['$']=[a7,a5,a6,a4,a8,a2,a7];f['%']=['25',a9,b0,a7,b0,a9,b3];f['^']=[a7,b0,a1,u,u,u,u];f['&']=[a4,a6,a6,'25',a9,b3,b7];f['*']=[a7,a9,a4,a9,a7,u,u];f['(']=[b6,b2,b2,b2,b2,b2,b6];f[')']=[b6,a8,a8,a8,a8,a8,b6];f[']']=[b1,b5,b5,b5,b5,b5,b1];f['-']=[u,u,u,a3,u,u,u];f['=']=[u,u,a3,u,a3,u,u];f['+']=[u,a7,a7,a3,a7,a7,u];f['[']=[a4,b2,b2,b2,b2,b2,a4];f[']']=[a4,b5,b5,b5,b5,b5,a4];f['{']=[b6,b2,b2,a6,b2,b2,b6];f['}']=[b1,b5,b5,a8,b5,b5,b1];f['|']=[a7,a7,a7,a7,a7,a7,a7];f['\\']=[a6,a6,b2,a7,b5,a8,a8];f['/']=[a8,a8,b5,a7,b2,a6,a6];f['<']=[u,b5,a7,b2,a7,b5,u];f['>']=[u,b2,a7,b5,a7,b2,u];f['?']=[a4,a1,b5,a7,a7,u,a7];f['.']=[u,u,u,u,u,u,a7];f[':']=[u,u,a7,u,u,u,a7];f[';']=[u,u,a7,u,u,a7,b5];f[',']=[u,u,u,u,u,a7,b5];f['\'']=[a7,a7,a7,u,u,u,u];f['"']=[b0,b0,b0,u,u,u,u];f['_']=[u,u,u,u,u,u,a3];f['id']=[u,u,u,u,a6,b0,a7,u];f[' ']=[u,u,u,u,u,u,u];if(n4)window.onResize=rI;function rI(){window.history.go(0);}function w(y,z){sp=z.charCodeAt(0)<256?"&nbsp;":"　";y=y.split('');for(i in y)!f[y[i]]?y[i]='id':v;s=u;for(i=0;i<7;i++){for(k in y){for(j=1;j<6;j++){y[k]=='id'?i==2?j==5?s+=sn+"O"+sa:s+=sp:i==3?j==2?s+=sn+"I"+sa:j==4?s+=sn+"E"+sa:s+=sp:i==4?j==3?s+=sn+"D"+sa:s+=sp:s+=sp:f[y[k]][i].indexOf(j)!=-1?s+=z:s+=sp;}s+=sp;}s+=br;}return s;}function e(v){n4?l=d.layers['p']:i4?l=d.all['p']:l=d.getElementById('p');r=v[el][1][vl].split(u);t=d.q1[el][0];z=r[0];y=v[el][0][vl];!n4?i4?l[ih]=br+w(y,z):l[ih]=w(y,z):l.document[wr]('<span style="font-family:Courier;font-size:12px;">'+w(y,z));n4?l.document.close():v;t[vl]="<div style='font-family:Courier'>"+w(y,z)+"</div>";}</SCRIPT>
<SCRIPT>di(2,'IDEO ASCII TYPESETTER');di(56,sp);di(2,'：）'+br);di(81,'-');</SCRIPT>
<FORM name=q><BR><BR>1. 请输入字母: &nbsp; &nbsp;<INPUT class=g  value=chenxi><BR><BR>2. 请选择一种字符: <INPUT class=g size=5 value=■><BR><BR>3. 
Generate ASCII: 
&nbsp;&nbsp;<INPUT class=h onclick=e(d.q) type=button value=Run><BR><BR><BR>
<SCRIPT>di(81,'-');di(2,br+'copy & paste:');di(38,sp);</SCRIPT><BR><BR><BR>
<DIV id=p style="WIDTH: auto; POSITION: absolute; HEIGHT: auto"></DIV>
<SCRIPT>di(11,br);di(81,'-');</SCRIPT>
<BR>copy &amp; paste into html:<BR><BR><BR></FORM>
<FORM name=q1><TEXTAREA rows=3 cols=67></TEXTAREA><BR><BR></FORM>
</td></tr>
</table></center>
<br>
<br><br>
<br><br>
<br><br>
<br>

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

[ 本帖最后由 bound0 于 2006-9-10 12:17 编辑 ]

花火博客www.flowerflame.com

TOP

lipengadmin [楼主]

花火博客
中级会员

帖子: 94
体力: 331
威望: 0
当前: 北京海淀区
离线: 46 天

43^# 大中小发表于 2006-4-13 23:41

[收藏] JavaScript经典效果集

美化列表

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> simulate combox control - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body, input
{
	font-family: verdana;
	font-size: 9pt;
}
h1
{
	font-family: tahoma;
	font-size: 22pt;
	text-align: left;
}
pre
{
	font-size: 9pt;
	font-family: verdana;
	border: 1px solid #006600;
	width: 400px;
	padding: 10px;
	background: #ffffff;
	color: #006600;
}
.CtlSelect
{
	border: 1px solid #006600;
	font-family: verdana;
	height: 20px;
	color: #006600;
	background: #ffffff;
	/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected
{
	background: #006600;
	color: #ffffff;
	height: 20px;
}
.unselected
{
	height: 20px;
	color: #006600;
	line-height: 120%;
	border-bottom: 1px solid #006600;
}
.CtlSelect1
{
	border: 1px solid #003399;
	font-family: verdana;
	height: 20px;
	color: #003399;
	background: #ffffff;
	/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected1
{
	background: #003399;
	color: #ffffff;
	height: 20px;
}
.unselected1
{
	height: 20px;
	color: #003399;
	line-height: 120%;
	border-bottom: 1px solid #003399;
}
.CtlSelect2
{
	border: 1px solid #990000;
	font-family: verdana;
	height: 20px;
	color: #990000;
	background: #ffffff;
	/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected2
{
	background: #990000;
	color: #ffffff;
	height: 20px;
}
.unselected2
{
	height: 20px;
	color: #990000;
	line-height: 120%;
	border-bottom: 1px solid #990000;
}
.copyright
{
	margin-top: 10px;
	font-size: 9pt;
	text-align: center;
	color: #333;
	font-weight: bold;
}
</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<h1> simulate combox control </h1>
<h4> demonstrate </h4>
<p>
<select id="s0">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</p>
<p>
<select id="s1">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">1option1</option>
<option value="2">1option2</option>
<option value="3">1option3</option>
<option value="4">1option4</option>
<option value="5">1option5</option>
</select>
</p>
<p>
<select id="s2">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">2option1</option>
<option value="2">2option2</option>
<option value="3">2option3</option>
<option value="4">2option4</option>
<option value="5">2option5</option>
</select>
</p>
<p>
<select id="s3">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">3option1</option>
<option value="2">3option2</option>
<option value="3">3option3</option>
<option value="4">3option4</option>
<option value="5">3option5</option>
</select>
</p>
<button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2'))" class="CtlSelect"> Get value </button>
<SCRIPT LANGUAGE="JavaScript">
<!--
	var a = new simulateSelect();
	a.style("CtlSelect", "selected", "unselected");
	a.init("s1");
	var b = new simulateSelect();
	b.style("CtlSelect1", "selected1", "unsel