页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容 vml圆角矩形最简布局

vml圆角矩形最简布局第2/5页

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

var currTimerlinePoint = 0; 
var totalTimerlineFrames = 2; 
var timerlineTimer; 
var leftLine = 50; 
var timerIn; 
var timerOut;

var timerlineArray = new Array(); 
timerlineArray[0]=''; 
timerlineArray[1]='menuItemOut()';

function runTimerline() 
{ 
//if (totalTimerlineFrames > currTimerlinePoint) 
// { 
// eval( timerlineArray[currTimerlinePoint]); 
// currTimerlinePoint ++; 
// } 
//else {currTimerlinePoint = 0; clearTimeout(window.timerlineTimer); return false;}

//window.timerlineTimer = setTimeout('runTimerline()',1000);

window.timerlineTimer = setTimeout('menuItemOut()',500);

}

function stopTimerline() 
{ 
clearTimeout(window.timerlineTimer); 
//currTimerlinePoint = 0; 
}

self.moveTo(0,0); 
self.resizeTo(screen.availWidth,screen.availHeight); 
</script> 
<div style="position:absolute; left:0px; top:-47px"> 
<div align=center id="menu01" style="position:absolute; left:150px; top:88px; width:100px; height:19px; z-index:1; 
background-color: #000099; layer-background-color: #000099; border: 1px none #000000;padding-top:3;cursor:hand;font-size:9pt" 
onMouseOver='stopTimerline();menuItemIn()' onMouseOut='runTimerline()'><font color=white>主菜单</font></div> 
<div align=center id="item11" style="position:absolute; left:50px; top:110px; width:99px; height:19px; z-index:2; background 
-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding- 
top:4;cursor:hand;font-size:9pt" 
onMouseOver="this.style.backgroundColor= '#006699';stopTimerline()" 
onMouseOut="this.style.backgroundColor= '#0099cc';runTimerline()" class="white">菜单项一</div> 
<div align=center id="item12" style="position:absolute; left:250px; top:132px; width:99px; height:19px; z-index:3; 
background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding- 
top:3;cursor:hand;font-size:9pt" 
onMouseOver="this.style.backgroundColor= '#006699';stopTimerline()" 
onMouseOut="this.style.backgroundColor= '#0099cc';runTimerline()" class="white">菜单项二</div> 
<div align=center id="item13" style="position:absolute; left:50px; top:154px; width:99px; height:19px; z-index:4; background 
-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding- 
top:3;cursor:hand;font-size:9pt" 
onMouseOver="this.style.backgroundColor= '#006699';stopTimerline()" 
onMouseOut="this.style.backgroundColor= '#0099cc';runTimerline()" class="white">菜单项三</div> 
<div align=center id="item14" style="position:absolute; left:250px; top:176px; width:99px; height:19px; z-index:5; 
background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding- 
top:3;cursor:hand;font-size:9pt" 
onMouseOver="this.style.backgroundColor= '#006699';stopTimerline()" 
onMouseOut="this.style.backgroundColor= '#0099cc';runTimerline()" class="white">菜单项四</div> 
<div align=center id="item15" style="position:absolute; left:50px; top:198px; width:99px; height:19px; z-index:6; background 
-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding- 
top:3;cursor:hand;font-size:9pt" 
onMouseOver="this.style.backgroundColor= '#006699';stopTimerline()" 
onMouseOut="this.style.backgroundColor= '#0099cc';runTimerline()" class="white">菜单项五</div> 
<div align=center id="item16" style="position:absolute; left:250px; top:220px; width:99px; height:19px; z-index:6; 
background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding- 
top:3;cursor:hand;font-size:9pt" 
onMouseOver="this.style.backgroundColor= '#006699';stopTimerline()" 
onMouseOut="this.style.backgroundColor= '#0099cc';runTimerline()" class="white">菜单项六</div> 
<div align=center id="item17" style="position:absolute; left:50px; top:242px; width:99px; height:19px; z-index:6; background 
-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding- 
top:3;cursor:hand;font-size:9pt" 
onMouseOver="this.style.backgroundColor= '#006699';stopTimerline()" 
onMouseOut="this.style.backgroundColor= '#0099cc';runTimerline()" class="white">菜单项七</div> 
<div align=center id="item18" style="position:absolute; left:250px; top:264px; width:99px; height:19px; z-index:6; 
background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding- 
top:3;cursor:hand;font-size:9pt" 
onMouseOver="this.style.backgroundColor= '#006699';stopTimerline()" 
onMouseOut="this.style.backgroundColor= '#0099cc';runTimerline()" class="white">菜单项八</div> 
<div align=center id="item19" style="position:absolute; left:49px; top:286px; width:99px; height:19px; z-index:6; background 
-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding- 
top:3;cursor:hand;font-size:9pt" 
onMouseOver="this.style.backgroundColor= '#006699';stopTimerline()" 
onMouseOut="this.style.backgroundColor= '#0099cc';runTimerline()" class="white">菜单项九</div> 
<div align=center id="item20" style="position:absolute; left:250px; top:308px; width:99px; height:19px; z-index:6; 
background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding- 
top:3;cursor:hand;font-size:9pt" 
onMouseOver="this.style.backgroundColor= '#006699';stopTimerline()" 
onMouseOut="this.style.backgroundColor= '#0099cc';runTimerline()" class="white">菜单项十</div>

</div>

<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> 
<HEAD> 
<META name="Gemeratpr" content="FlashVml(璀灿之星)4.0"> 
<META http-equiv="Content-Type" content="text/html;charset=gb2312"> 
<META name="KeyWords" content="<a href="http://www.jb51.net/list/list_55_1.htm" target="_blank"><font color=red>我的作品</font></a>flashvml-璀灿之星-璀灿之星-vml极道教程-vml-vmlflash-沐缘华-FYW-lshdic-风云舞"> 
<TITLE><a href="http://www.jb51.net/list/list_55_1.htm" target="_blank"><font color=red>我的作品</font></a></TITLE> 
<STYLE> 
v\:*{behavior:url(#default#VML);position:absolute;} 
o\:*{behavior:url(#default#VML);} 
</STYLE> 
<script> 
function window.onerror(){return true;} //防止您的程序出现错误时弹出提示 
</script> 
</HEAD> 
<BODY bgcolor="#ffffff" style='scrollbar-base-color:purple;scrollbar-shadow-color:white;scrollbar-highlight- 
color:white;scrollbar-arrow-color:white;filter:progid:DXImageTransform.microsoft.gradient 
(gradienttype=1,startColorStr=#007700,endColorStr=white);'> 
<bgsound loop=1 id=bgsound1> 
<bgsound loop=-1 id=bgsound2> 
<script> 
//启动更新函数,更新所有使用隐藏功能的物件初期视图 
var loadtime=null,loadtext='if(document.readyState!="complete"){window.status=window.status+"."}else{clearInterval 
(loadtime);window.status=""}'; 
window.status='相关数据资源正在加载，请等待' 
loadtime=setInterval(loadtext,200) 
function window.onload(){ 
} 
</script> 
<v:roundrect id=vml1 style="Z-INDEX:3004;LEFT:277;WIDTH:450;TOP:74;HEIGHT:550" arcsize="9830f" filled="t" fillcolor="#54d136" 
stroked="t" strokecolor="#fb4798" strokeweight="1px"> 
<v:fill type="gradientRadial" opacity=".5" color2="#feba73"/> 
<v:stroke opacity="1" startarrow="none" endarrow="none" dashstyle="dot"/> 
<v:shadow on="f" color="#de9b29" opacity="22937f" offset="2.25pt,2.25pt"/>

function highlightit(cur2){ 
if (cur2.filters.alpha.opacity<100) 
cur2.filters.alpha.opacity+=10 
else if (window.highlighting) 
clearInterval(highlighting) 
} 
</script> 
<a href="http://www"><img border="0" src="http://www.blueidea.com/articleimg/usericon/qy.gif" width="32" height="32" 
onmouseout=low(this) onmouseover=high(this) style="FILTER: alpha(opacity=30)"></a>

/* 链接颜色 */ 
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> 
　　章子怡日前和霍启山闹分手，前晚(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> 
</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> 
　　《日月凌空》正紧张拍摄,刘晓庆再次扮演武则天,记者通过特殊渠道获得了两张被称为剧组顶级机密的造型照。 <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> 
</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,1 
10,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,1 
10,312,330,332,364,582,733,734&Redirect=http://ent.163.com/special/00031SST/FQ.html">赢飞利浦768手机</a></h2> 
　　参加飞利浦手机娱乐关键字专题活动，赢取飞利浦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,1 
10,312,330,332,364,582,733,734&Redirect=http://ent.163.com/special/00031SST/FQ.html" class="cDRed">详细</a> 
</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,1 
10,312,330,332,364,586,702,733,734&Redirect=http://pepsi.163.com/">中国无名小子挑战球星贝克汉姆</a></h2> 
　　两个中国无名小子将会亲身与贝克汉姆、罗纳尔迪尼奥、亨利等世界顶级球星面对面。 <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,1 
10,312,330,332,364,586,702,733,734&Redirect=http://pepsi.163.com/" class="cDRed">详细</a> 
</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>

</v:roundrect> 
<SCRIPT> //以下程序快速执行使预隐藏图形及时隐藏 
try{var bodyobjs=document.body.children;for(i=0;i<bodyobjs.length;i++){ 
if(bodyobjs[i].ych!=null)bodyobjs[i].style.display='none'; 
if(bodyobjs[i].tagName=="group"){ 
bodyobjs[i].contentEditable=false; 
for(r=0;r<bodyobjs[i].children.length;r++){if(bodyobjs[i].children[r].ych!=null)bodyobjs[i].children[r].style.display='none 
';} 
} 
}}catch(e){} 
</SCRIPT> 
</BODY> 
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

当前2/5页上一页 1 2 3 4 5 下一页

Tags：vml圆角矩形最简布局