code/JTree/demo.htm
下拉滑出
[code] // Ver: 4.1 var nOP=0,nOP5=0,nIE=0,nIE4=0,nIE5=0 […]
css_menu
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 T […]
侧边伸缩菜单
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 |
<style type="text/css"> #master { LEFT:-100px; POSITION:absolute; TOP:25px; VISIBILITY:visible; WIDTH:200px; Z-INDEX:2 } #menu { LEFT:100px; POSITION:absolute; TOP:25px; VISIBILITY:visible; WIDTH:18px; Z-INDEX:5 } #top { LEFT:0px; POSITION:absolute; TOP:25px; VISIBILITY:visible; WIDTH:100px; Z-INDEX:5 } #screen { LEFT:0px; POSITION:absolute; TOP:31px; VISIBILITY:visible; WIDTH:100px; Z-INDEX:5 } #screenlinks { LEFT:0px; POSITION:absolute; TOP:31px; VISIBILITY:visible; WIDTH:100px; Z-INDEX: 5 } </style> <script> var ie = document.all ? 1 : 0 var ns = document.layers ? 1 : 0 if(ie){ document.write('<style type="text/css">') document.write("#screen {filter:Alpha(Opacity=30);}") document.write("</style>") } if(ns){ document.write('<style type="text/css">') document.write("#master {clip:rect(0,150,250,0);}") document.write("</style>") } var ie = document.all ? 1 : 0 var ns = document.layers ? 1 : 0 var master = new Object("element") master.curLeft = -100; master.curTop = 10; master.gapLeft = 0; master.gapTop = 0; master.timer = null; function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop) { clearTimeout(eval(layerName).timer); if (eval(layerName).curLeft != fromLeft) { if ((Math.max(eval(layerName).curLeft, fromLeft)-Math.min(eval(layerName).curLeft, fromLeft)) < paceLeft) { eval(layerName).curLeft = fromLeft; } else if (eval(layerName).curLeft < fromLeft) { eval(layerName).curLeft = eval(layerName).curLeft + paceLeft; } else if (eval(layerName).curLeft > fromLeft) { eval(layerName).curLeft = eval(layerName).curLeft - paceLeft; } if (ie) { document.all[layerName].style.left = eval(layerName).curLeft; } if (ns) { document[layerName].left = eval(layerName).curLeft; } } if (eval(layerName).curTop != fromTop) { if ((Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) < paceTop) { eval(layerName).curTop = fromTop; } else if (eval(layerName).curTop < fromTop) { eval(layerName).curTop = eval(layerName).curTop + paceTop; } else if (eval(layerName).curTop > fromTop) { eval(layerName).curTop = eval(layerName).curTop - paceTop; } if (ie) { document.all[layerName].style.top = eval(layerName).curTop; } if (ns) { document[layerName].top = eval(layerName).curTop; } } eval(layerName).timer = setTimeout('moveAlong(" + layerName + ",' + paceLeft + ',' + paceTop + ',' + fromLeft + ',' + fromTop + ')', 30) } function setPace(layerName, fromLeft, fromTop, motionSpeed) { eval(layerName).gapLeft = (Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) / motionSpeed; eval(layerName).gapTop = (Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) / motionSpeed; moveAlong(layerName, eval(layerName).gapLeft, eval(layerName).gapTop, fromLeft, fromTop); } var expandState = 0 function expand() { if (expandState == 0) { setPace("master", 0, 10, 10); if (ie) { document.menutop.src = "menub.gif" }; expandState = 1; } else { setPace("master", -100, 10, 10); if (ie) { document.menutop.src = "menu.gif" }; expandState = 0; } } </script> <div id='master'> <div id='menu' onmouseover="javascript: expand() "> <table border='0' cellpadding='0' cellspacing='0' width='18'> <tbody> <tr> <td width=" 100 % "> <a href="javascript:expand()" onfocus ='this.blur()' > <img alt ='点击这里展开 / 关闭快捷菜单' border ='' 0 height ='' 70 name ='menutop' src ="menu.gif" width='18'></a> </td> </tr> </tbody> </table> </div> <div id='top'> <table border='0' cellpadding='0' cellspacing='0' width='100'> <tbody> <tr> <td width=" 100 % "> <img border='0' height='6' src="top.gif" width ='100' ></td> </tr> </tbody> </table> </div> <div id='screen' onmouseout="javascript:expand()"> <table border ='0' cellpadding ='5' cellspacing ='0' width ='100' > <tbody><tr><td bgcolor ='#336666' width= "100%"> <table bgcolor ='#336666' border='0' cellpadding ='0' cellspacing ='0' width = "100%" height='213'> <tbody> <tr> <td width="100%"> <table border='0' cellpadding='5' cellspacing='1' width="100%"> <tbody><tr><td bgcolor ='#ecf6f5' width ="100%"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <div id='screenlinks'> <table border='0' cellpadding='6' cellspacing='0' width='100'> <tbody> <tr> <td style="FILTER:alpha(opacity='90)" width="100%"> <table bgcolor='#336666' border='0' cellpadding='0' cellspacing='0' width="100%"> <tbody> <tr> <td width="100%"> <table border='0' cellpadding='6' cellspacing='1' width="100%"> <tbody> <tr> <td bgcolor='#ecf6f5' width="100%" align="center"> <font color='999900'>闪客服务导航</font> ├<a href="bank.asp" target="_BLANK">闪客银行</a> ├<a href="gupiao.ASP">股票市场</a> ├<a href="caipiao.ASP">福利彩票</a> ├<a href="GUESS.ASP" target="_BLANK">猜 点 数</a> ├<a href="BET.ASP" target="_BLANK">赌 大 小</a> ├<a href="RACE.ASP" target="_BLANK">赛 马 场</a> ├<a href="TIGER.ASP" target="_BLANK">老 虎 机</a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </div> <script> if (ie) { var sidemenu = document.all.master; } if (ns) { var sidemenu = document.master; } function FixY() { if (ie) { sidemenu.style.top = document.body.scrollTop + 10 } if (ns) { sidemenu.top = window.pageYOffset + 10 } } setInterval("FixY()", 100); </script> |
TabControl搜索菜单
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 |
<!–搜索开始–><!– iAsk begin –><!– iAsk begin –> <style type="text/css">.s_on { background-image:url(http://image2.sina.com.cn/pfp/ask/0208/images/l_tbg_on.gif); background-repeat:no-repeat; padding-top:5px; cursor:hand; background-color:#ffc52e; } .s_of { background-image:url(http://image2.sina.com.cn/pfp/ask/0208/images/l_tbg_off.gif); background-repeat:no-repeat; padding-top:5px; cursor:hand; background-color:#f0f0f0; } .m_on { background-image:url(http://image2.sina.com.cn/pfp/ask/0208/images/l_ms_on.gif); background-repeat:no-repeat; padding-top:5px; cursor:hand; } .bk_n { height:22px; width:100%; font-size:14px; } .eg { color:#999999; font-size:12px; } .pt2 { padding-top:2px; } .pl5 { padding-left:5px; } .blbr1d9 { border-left:1px solid #d9d9d9; border-right: 1px solid #d9d9d9; } </style> <script type="text/javascript"> function s_chg(td_now, mCols, fn) { s_td_1.className = s_td_2.className = s_td_3.className = s_td_4.className = s_td_6.className = s_td_7.className = "s_of"; td_now.className = "s_on"; move_xjt.colSpan = mCols; if (td_now.id == "s_td_1") { lc.style.display = "none"; btn1.height = "35"; btn1.innerHTML = " <input id = btn_i type = submit value = '搜索' style = 'width: 60px;'> <input type = button value = '提问' style = 'width: 60px;' onClick = 'ask(this.form);'> "; eg2.style.display = "none"; fn.i_k.name = "k"; fn.action = "http://iask.com/s"; } if (td_now.id == "s_td_3") { lc.style.display = "none"; btn1.height = "35"; btn1.innerHTML = " <input id = btn_i type = submit value = '搜索' style = 'width: 60px;'> "; eg2.style.display = "none"; fn.i_k.name = "k"; fn.action = "http://iask.com/n"; } if (td_now.id == "s_td_4") { lc.style.display = "none"; btn1.height = "35"; btn1.innerHTML = " <input id = btn_i type = submit value = '搜索' style = 'width: 60px;'> "; eg2.style.display = "none"; fn.i_k.name = "k"; fn.action = "http://p.iask.com/p"; } if (td_now.id == "s_td_6") { lc.style.display = "none"; btn1.height = "35"; btn1.innerHTML = " <input id = btn_i type = submit value = '搜索' style = 'width: 60px;'> "; eg2.style.display = "none"; fn.i_k.name = "k"; fn.action = "http://m.iask.com/g"; } if (td_now.id == "s_td_5") { lc.style.display = "none"; btn1.height = "35"; btn1.innerHTML = " <input id = btn_i type = submit value = '搜索' style = 'width: 60px;'> "; eg2.style.display = "none"; fn.i_k.name = "k"; fn.action = "http://iask.com/v"; } if (td_now.id == "s_td_2") { lc.style.display = "none"; btn1.height = "35"; btn1.innerHTML = " <input id = btn_i type = submit value = '提问' style = 'width: 60px;'> "; eg2.style.display = "none"; fn.i_k.name = "title"; fn.action = "http://iask.sina.com.cn/question/ask_new_2.php"; } if (td_now.id == "s_td_7") { lc.style.display = "block"; lc.style.paddingTop = "0"; btn1.height = "25"; btn1.innerHTML = " <input id = btn_i type = submit value = '搜索' style = 'width: 60px;'> "; eg2.style.display = "block"; fn.i_k.name = "key"; fn.action = "http://bendi.iask.com/r.php"; } } function mouse_on(td_now) { if (td_now.className == "s_on") return false; else td_now.className = "m_on"; } function mouse_of(td_now) { if (td_now.className == "s_on") return false; else td_now.className = "s_of"; } </script> <script language="javascript"> function iask_ck(fn) { if (fn.i_k.value == "") { if (fn.btn_i.value == "提问") { window.open("http: /iask.sina.com.cn/"); return false; } } } function ask(fn) { if (fn.k.value == "") { window.open("http://iask.sina.com.cn/"); return false; } else { window.open("http://iask.sina.com.cn/question/ask_new_2.php?title = " + fn.k.value); } } </script> <table border="0" width="286" cellpadding="0" cellspacing="0"> <tr> <td height="3"> <img src="http://image2.sina.com.cn/pfp/ask/0208/images/l_top.gif" border="0" width="286" height="3"> </td> </tr> <tr> <td height="36" class="blbr1d9"> <table border="0" width="100%"> <tr> <td width="80" height="20" align="center"> <a href="http://iask.com/" target="_blank"> <img src="http://image2.sina.com.cn/pfp/ask/0208/images/l_iask_logo2.gif" border="0" width="60" height="15" alt="爱问搜索"></a> </td> <td valign="bottom"> <a href="http://zhishi.iask.com/" target="_blank">知识人,亿万网民帮您解决困难!</a> </td> </tr> <tr> <td height="5"> </td> </tr> </table> </td> </tr> <tr> <td height="30" class="blbr1d9"> <table border="0" width="100%" cellpadding="0" cellspacing="0" background="http://image2.sina.com.cn/pfp/ask/0208/images/t_bg.gif"> <tr align="center"> <td width="11" height="21"> </td> <td width="42" id="s_td_1" class="s_on" onclick="s_chg(this,1,f);" onmouseover="mouse_on(this);" onmouseout="mouse_of(this);"> 网页 </td> <td width="2"> </td> <td width="42" id="s_td_3" class="s_of" onclick="s_chg(this,3,f);" onmouseover="mouse_on(this);" onmouseout="mouse_of(this);"> 新闻 </td> <td width="2"> </td> <td width="42" id="s_td_7" class="s_of" onclick="s_chg(this,5,f);" onmouseover="mouse_on(this);" onmouseout="mouse_of(this);"> 本地 </td> <td width="2"> </td> <td width="42" id="s_td_2" class="s_of" onclick="s_chg(this,7,f);" onmouseover="mouse_on(this);" onmouseout="mouse_of(this);"> 知识人 </td> <td width="2"> </td> <td width="42" id="s_td_4" class="s_of" onclick="s_chg(this,9,f);" onmouseover="mouse_on(this);" onmouseout="mouse_of(this);"> 图片 </td> <td width="2"> </td> <td width="42" id="s_td_6" class="s_of" onclick="s_chg(this,11,f);" onmouseover="mouse_on(this);" onmouseout="mouse_of(this);"> MP3 </td> <td> </td> </tr> <tr> <td id="move_xjt" colspan="1"> </td> <td height="9" align="center"> <img src="http://image2.sina.com.cn/pfp/ask/0208/images/t_xjt.gif" border="0" width="13" height="9"> </td> <td> </td> </tr> </table> </td> </tr> <tr> <form name='f' action='http://iask.com/s' target='_blank' onsubmit="return iask_ck(this)"> <td height="71" align="center" valign="top" bgcolor="#f9f9fa" class="blbr1d9"> <table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr> <td height="2"> </td> </tr> <tr valign="top"> <td width="15"> </td> <td> <input type="text" id="i_k" name="k" size="20" class="bk_n"> <div id="eg2" class="eg' pt2" style="display:none;"> 例:餐厅,酒吧,金陵饭店 </div> </td> <td width="110" id="lc" class="pl5" style="display:none;"> <input type="text" name="cl" id="location" size="15" class="bk_n"> <div class="eg' pt2"> 例:南京,广州中山路 </div> </td> <td width="15"> </td> </tr> </table> <table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr align="center" valign="bottom"> <td id="btn1" height="35"> <input id='btn_i' type='submit' value='搜 索' style='width:60px;'> <input type='button' value='提 问' style='width:60px;' onclick='ask(this.form);'> </td> </tr> </table> </td> <input type="hidden" name="fsh_s"> </form> </tr> </table> <!– iAsk end –><!– iAsk end –><!–搜索结束–> |
点击按钮自动变化
[code] ?<!–搜索开始–> ? ?<!– iAs […]
TabControl菜单
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<html> <head> <title>Hiker 's BLOG</title> <style> body { font-size:12px; font-family:宋体 } ul.TabBarLevel1 { list-style:none; margin:0; padding:0; height:29px; background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif); } ul.TabBarLevel1 li { float:left; padding:0; height:29px; margin-right:1px; background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li a { display:block; line-height:29px; padding:0 20px; color:#333; background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat; white-space:nowrap; } ul.TabBarLevel1 li.Selected { background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li.Selected a { background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat; } ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited { color:#333; } ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active { color:#F30; text-decoration:none; } ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited { color:#000; } ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active { color:#F30; text-decoration:none; } div.HackBox { padding:2px 2px; border-left:2px solid #6697CD; border-right:2px solid #6697CD; border-bottom:2px solid #6697CD; } </style> </head> <body> <div id="Whatever"> <ul class="TabBarLevel1" id="TabPage1"> <li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1'); ">宝贝详情</a></li> <li id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2'); ">其他信息</a></li> <li id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3'); ">出价记录</a></li> <li id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4'); ">留言簿</a></li> </ul> <div class="HackBox"> XXXXXXXX </div> </div> <script language="JavaScript">//Switch Tab Effect function switchTab(tabpage,tabid) { var oItem = document.getElementById(tabpage); for(var i=0;i<oItem.children.length;i++) { var x = oItem.children[i]; x.className = ""; var y = x.getElementsByTagName('a'); y[0].style.color="#333333"; } document.getElementById(tabid).className = "Selected"; } </script> </body> </html> |
点击改变的菜单
[code] ?<html> ?<head> ? ?<title>Hike […]
仿Windows菜单
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 |
<style type='text/css'>#menubar { BACKGROUND:rgb(212,208,200); FONT:menu; CURSOR:default; POSITION:relative } #menubar .root { BORDER-RIGHT:rgb(212,208,200) 1px solid; PADDING-RIGHT:2pt; BORDER-TOP:rgb(212,208,200) 1px solid; PADDING-LEFT:2pt; BORDER-LEFT:rgb(212,208,200) 1px solid; BORDER-BOTTOM:rgb(212,208,200) 1px solid } #menubar TABLE { BORDER-RIGHT:gray 2px solid; PADDING-RIGHT:0pt; BORDER-TOP:#eeeeee 2px solid; DISPLAY:none; PADDING-LEFT:0pt; BACKGROUND:rgb(212,208,200); PADDING-BOTTOM:0pt; MARGIN:0pt; FONT:menu; BORDER-LEFT:#eeeeee 2px solid; PADDING-TOP:0pt; BORDER-BOTTOM:gray 2px solid; POSITION:absolute } #menubar TABLE TD { PADDING-RIGHT:15pt; PADDING-LEFT:12pt; PADDING-BOTTOM:2pt; MARGIN:0pt; PADDING-TOP:2pt } #menubar .highlight { BACKGROUND:#08246B; COLOR:white; } #menubar .disabledhighlight { BACKGROUND:rgb(212,208,200); COLOR:gray } #menubar #break { COLOR:gray } #menubar .disabled { COLOR:gray } #menubar #break { PADDING-RIGHT:0pt; PADDING-LEFT:0pt; PADDING-BOTTOM:0pt; MARGIN:0pt; PADDING-TOP:0pt } #menubar SPAN.more { PADDING-RIGHT:0pt; PADDING-LEFT:0pt; LEFT:14pt; FLOAT:right; PADDING-BOTTOM:0pt; MARGIN:0pt; FONT:9pt webdings; WIDTH:0.8em; PADDING-TOP:0pt; POSITION:relative; TOP:-2pt; HEIGHT:9pt } #menubar .TBHandle { BACKGROUND-COLOR:menu; BORDER-LEFT:buttonhighlight 1px solid; BORDER-RIGHT:buttonshadow 1px solid; BORDER-TOP:buttonhighlight 1px solid; FONT-SIZE:1px; HEIGHT:22px; POSITION:absolute; TOP:1px; WIDTH:3px } #menubar .yToolbar { BACKGROUND-COLOR:menu; BORDER-BOTTOM:buttonshadow 1px solid; BORDER-LEFT:buttonhighlight 1px solid; BORDER-RIGHT:buttonshadow 1px solid; BORDER-TOP:buttonhighlight 1px solid; HEIGHT:27px; LEFT:0px; POSITION:relative; TOP:0px; } .handbtn { BACKGROUND:buttonface; BORDER-BOTTOM:buttonshadow 1px solid; BORDER-LEFT:buttonhighlight 1px solid; BORDER-RIGHT:buttonshadow 1px solid; BORDER-TOP:buttonhighlight 1px solid; HEIGHT:21px; WIDTH:3px } .sepbtn1 { BORDER-LEFT:buttonshadow 1px ridge; BORDER-RIGHT:buttonhighlight 1px solid; WIDTH: 2px } </style> <script language='javascript'> //数组名+次序号码 //数组内容第一个值为标题 //"样式名称","字体颜色","名称","连接","目标窗口" OutBarFolder1 = new Array("系统功能", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "浏览管理人员", "none", "_blank", "none", "default", "修改管理人员资料", "none", "_blank", "none", "default", "更改密码", "none", "_blank", "none", "default", "权限分配", "none", "none", "break", "default", "<hr>", "none", "none", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "备份数据", "none", "_top", "none", "default", "恢复数据", "none", "_top", "break", "default", "<hr>", "none", "none", "none", "default", "更改个人资料", "none", "_blank", "none", "default", "更改个人密码", "none", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "退出管理系统", "none", "_top"); OutBarFolder2 = new Array("系统功能", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "浏览管理人员", "none", "_blank", "none", "default", "修改管理人员资料", "none", "_blank", "none", "default", "更改密码", "none", "_blank", "none", "default", "权限分配", "none", "none", "break", "default", "<hr>", "none", "none", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "备份数据", "none", "_top", "none", "default", "恢复数据", "none", "_top", "break", "default", "<hr>", "none", "none", "none", "default", "更改个人资料", "none", "_blank", "none", "default", "更改个人密码", "none", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "退出管理系统", "none", "_top"); OutBarFolder3 = new Array("系统功能", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "浏览管理人员", "none", "_blank", "none", "default", "修改管理人员资料", "none", "_blank", "none", "default", "更改密码", "none", "_blank", "none", "default", "权限分配", "none", "none", "break", "default", "<hr>", "none", "none", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "备份数据", "none", "_top", "none", "default", "恢复数据", "none", "_top", "break", "default", "<hr>", "none", "none", "none", "default", "更改个人资料", "none", "_blank", "none", "default", "更改个人密码", "none", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "退出管理系统", "none", "_top"); var childActive = null var menuActive = null var lastHighlight = null var active = false function getReal(el) { // Find a table cell element in the parent chain */ temp = el while ((temp != null) && (temp.tagName != "TABLE") && (temp.className != "root") && (temp.id != "menuBar")) { if (temp.tagName == "TD") el = temp; temp = temp.parentElement } return el } function raiseMenu(el) { el.style.borderLeft = "1px #08246B solid" el.style.borderTop = "1px #08246B solid" el.style.borderRight = "1px #08246B solid" el.style.borderBottom = "1px #08246B solid" el.style.background = "#B5BED6" } function clearHighlight(el) { if (el == null) return el.style.borderRight = "1px lightgrey solid" el.style.borderBottom = "1px lightgrey solid" el.style.borderTop = "1px lightgrey solid" el.style.borderLeft = "1px lightgrey solid" el.style.background = "rgb(212,208,200)" } function sinkMenu(el) { el.style.borderRight = "1px #EEEEEE solid" el.style.borderBottom = "1px #EEEEEE solid" el.style.borderTop = "1px gray solid" el.style.borderLeft = "1px gray solid" el.style.background = "rgb(212,208,200)" } function menuHandler(menuItem) { // Write generic menu handlers here! // Returning true collapses the menu. Returning false does not collapse the menu return true } function getOffsetPos(which, el, tagName) { var pos = 0 // el["offset" + which] while (el.tagName != tagName) { pos += el["offset" + which]; el = el.offsetParent; } return pos } function getRootTable(el) { el = el.offsetParent if (el.tagName == "TR") el = el.offsetParent return el } function getElement(el, tagName) { while ((el != null) && (el.tagName != tagName)) el = el.parentElement return el } function processClick() { var el = getReal(event.srcElement); if ((getRootTable(el).id == "menuBar") && (active)) { cleanupMenu(menuActive); clearHighlight(menuActive); active = false; lastHighlight = null; doHighlight(el); } else { if ((el.className == "root") || (!menuHandler(el))) doMenuDown(el); else { if (el._childItem == null) el._childItem = getChildren(el); if (el._childItem != null) return; if ((el.id != "break") && (el.className != "disabled") && (el.className != "disabledhighlight") && (el.className != "clear")) { if (menuHandler(el)) { cleanupMenu(menuActive); clearHighlight(menuActive); active = false; lastHighlight = null; } } } } } function getChildren(el) { var tList = el.children.tags("TABLE"); var i = 0; while ((i < tList.length) && (tList[i].tagName != "TABLE")) i++; if (i == tList.length) return null else return tList[i] } function doMenuDown(el) { if (el._childItem == null) el._childItem = getChildren(el); if ((el._childItem != null) && (el.className != "disabled") && (el.className != "disabledhighlight")) { // Performance Optimization - Cache child element ch = el._childItem if (ch.style.display == "block") { removeHighlight(ch.active); return; } ch.style.display = "block"; if (el.className == "root") { ch.style.pixelTop = el.offsetHeight + el.offsetTop + 2; ch.style.pixelLeft = el.offsetLeft + 1; if (ch.style.pixelWidth == 0) ch.style.pixelWidth = ch.rows[0].offsetWidth + 50; sinkMenu(el); active = true; menuActive = el; } else { childActive = el; ch.style.pixelTop = getOffsetPos("Top", el, "TABLE") - 3; // el.offsetTop + el.offsetParent.offsetTop - 3; ch.style.pixelLeft = el.offsetLeft + el.offsetWidth; if (ch.style.pixelWidth == 0) ch.style.pixelWidth = ch.offsetWidth + 50; } } } function doHighlight(el) { el = getReal(el); if ("root" == el.className) { if ((menuActive != null) && (menuActive != el)) { clearHighlight(menuActive) } if (!active) { raiseMenu(el); } else { sinkMenu(el); } if ((active) && (menuActive != el)) { cleanupMenu(menuActive); doMenuDown(el); } menuActive = el; lastHighlight = null; } else { if (childActive != null) if (!childActive.contains(el)) closeMenu(childActive, el); if (("TD" == el.tagName) && ("clear" != el.className)) { var ch = getRootTable(el); if (ch.active != null) { if (ch.active != el) { if (ch.active.className == "disabledhighlight") ch.active.className = "disabled" else ch.active.className = ""; } } ch.active = el; lastHighlight = el; if ((el.className == "disabled") || (el.className == "disabledhighlight") || (el.id == "break")) el.className = "disabledhighlight" else { if (el.id != "break") { el.className = "highlight" if (el._childItem == null) el._childItem = getChildren(el); if (el._childItem != null) { doMenuDown(el) } } } } } } function removeHighlight(el) { if (el != null) if ((el.className == "disabled") || (el.className == "disabledhighlight")) el.className = "disabled" else el.className = ""; } function cleanupMenu(el) { if (el == null) return; for (var i = 0; i < el.all.length; i++) { var item = el.all[i] if (item.tagName == "TABLE") item.style.display = ""; removeHighlight(item.active); item.active = null; } } function closeMenu(ch, el) { var start = ch while (ch.className != "root") { ch = ch.parentElement if (((!ch.contains(el)) && (ch.className != "root"))) { start = ch } } cleanupMenu(start) } function checkMenu() { if (document.all.menuBar == null) return; if ((!document.all.menuBar.contains(event.srcElement)) && (menuActive != null)) { clearHighlight(menuActive); closeMenu(menuActive); active = false; menuActive = null; choiceActive = null; } } function doCheckOut() { var el = event.toElement; if ((!active) && (menuActive != null) && (!menuActive.contains(el))) { clearHighlight(menuActive); menuActive = null } } function processKey() { if (active) { switch (event.keyCode) { case 13: lastHighlight.click(); break; case 39: // right if ((lastHighlight == null) || (lastHighlight._childItem == null)) { var idx = menuActive.cellIndex; // if (idx == menuActive.offsetParent.cells.length - 2) if (idx == getElement(menuActive, "TR").cells.length - 2) idx = 0 else idx++; newItem = getElement(menuActive, "TR").cells[idx]; } else { newItem = lastHighlight._childItem.rows[0].cells[0]; } doHighlight(newItem); break; case 37: //left if ((lastHighlight == null) || (getElement(getRootTable(lastHighlight), "TR").id == "menuBar")) { var idx = menuActive.cellIndex; if (idx == 0) idx = getElement(menuActive, "TR").cells.length - 2; else idx--; newItem = getElement(menuActive, "TR").cells[idx]; } else { newItem = getElement(lastHighlight, "TR"); while (newItem.tagName != "TD") newItem = newItem.parentElement; } doHighlight(newItem); break; case 40: // down if (lastHighlight == null) { itemCell = menuActive._childItem; curCell = 0; curRow = 0; } else { itemCell = getRootTable(lastHighlight); if (lastHighlight.cellIndex == getElement(lastHighlight, "TR").cells.length - 1) { curCell = 0; curRow = getElement(lastHighlight, "TR").rowIndex + 1; if (getElement(lastHighlight, "TR").rowIndex == itemCell.rows.length - 1) curRow = 0; } else { curCell = lastHighlight.cellIndex + 1; curRow = getElement(lastHighlight, "TR").rowIndex; } } doHighlight(itemCell.rows[curRow].cells[curCell]); break; case 38: // up if (lastHighlight == null) { itemCell = menuActive._childItem; curRow = itemCell.rows.length - 1; curCell = itemCell.rows[curRow].cells.length - 1; } else { itemCell = getRootTable(lastHighlight); if (lastHighlight.cellIndex == 0) { curRow = getElement(lastHighlight, "TR").rowIndex - 1; if (curRow == -1) curRow = itemCell.rows.length - 1; curCell = itemCell.rows[curRow].cells.length - 1; } else { curCell = lastHighlight.cellIndex - 1; curRow = getElement(lastHighlight, "TR").rowIndex; } } doHighlight(itemCell.rows[curRow].cells[curCell]); break; if (lastHighlight == null) { curCell = menuActive._childItem; curRow = curCell.rows.length - 1 } else { curCell = getRootTable(lastHighlight); if (getElement(lastHighlight, "TR").rowIndex == 0) curRow = curCell.rows.length - 1; else curRow = getElement(lastHighlight, "TR").rowIndex - 1; } doHighlight(curCell.rows[curRow].cells[0]); break; } } } function make_menu() { document.write("<table width='100%' cellpadding='0' cellspacing='0' border='0' style='background=rgb(212,208,200); BACKGROUND: buttonface; BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid;'>"); document.write("<tr><TD><SPAN class=handbtn></SPAN></TD><td>"); document.write("<TABLE ID=menuBar ONSelectSTART='return false' ONCLICK='processClick()' ONMOUSEOVER='doHighlight(event.toElement)' ONMOUSEOUT='doCheckOut()' ONKEYDOWN='processKey()'><TR>"); j = 1; while (eval("window.OutBarFolder" + j)) j++; i = 1; while (i < j) { Folder = eval("OutBarFolder" + i); document.write("<TD NOWRAP CLASS=root>" + Folder[0] + "<TABLE CELLSPACING=0 CELLPADDING=0>"); MakeItems(Folder); document.write("</TABLE>"); i++; } document.write("</TD></TR></TABLE>"); document.write("</td><td width=100% ONMOUSEOVER='processClick()'></td></tr></table>"); } function MakeItems(Folder) { var items = 0; while (Folder[items + 1]) items += 5; items /= 5; for (var i = 1; i < items * 5; i += 5) { /* if(Folder[i+1]=="BREAK") { document.write("<TD NOWRAP ID=break><HR></TD>"); } else { document.write("<TR><TD NOWRAP>"+Folder[i+1]+"</TD></TR>"); } */ document.write("<TR><TD NOWRAP" + ((Folder[i + 0] == "none") ? "" : " ID='" + Folder[i + 0] + "'") + ((Folder[i + 3] == "none") ? "" : " onclick=\"go(1, '"+Folder[i+3]+"')\"") + ">" + ((Folder[i + 1] == "default") ? "" : "<font color=" + Folder[i + 1] + ">") + Folder[i + 2] + ((Folder[i + 1] == "default") ? "" : "</font>") + "</TD></TR>"); //alert("<TR><TD NOWRAP "+((Folder[i+0]=="none")?"":"ID='"+Folder[i+0]+"'")+((Folder[i+3]=="none")?"":" onclick=go(1,'"+Folder[i+3]+"')")+">"+((Folder[i+1]=="default")?"":"<font color="+Folder[i+1]+">")+Folder[i+2]+((Folder[i+1]=="default")?"":"</font>")+"</TD></TR>"); } } function go(i, iurl) { switch (i) { case 1: parent.location = iurl; break; //返回首页 case 2: top.main.location = 'login.htm'; break; //登录 case 3: top.main.location = 'shenqing.htm'; break; //注册 case 4: top.main.location = 'addnew.asp'; break; //增加新贴 case 5: top.main.location = 'index1.asp'; break; //第一页 case 6: //上一页 var obj = top.main var str = obj.location.href; if (str.indexOf("index1") > 0) obj.location = "index1.asp@page=" + obj.document.all("ppage").value; else obj.location = "index1.asp"; break; case 7: //下一页 var obj = top.main var str = obj.location.href; if (str.indexOf("index1") > 0) obj.location = "index1.asp@page=" + obj.document.all("npage").value; else obj.location = "index1.asp"; break; case 8: //最后一页 var obj = top.main var str = obj.location.href; if (str.indexOf("index1") > 0) obj.location = "index1.asp@page=" + obj.document.all("epage").value; else obj.location = "index1.asp"; break; case 9: top.main.location = 'editinfo.asp'; break; case 10: top.main.location = 'quit.asp'; break; case 11: top.main.location = 'userinfo.asp'; break; case 12: var newwin = top.open("../../../../waha.3322.net/default.htm"); newwin.focus(); break; } } make_menu(); </script> |
梦幻下拉菜单
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<!--将以下代码加入HTML的<body></body>之间--> <style> #iewrap { position:relative; height:30px } #iewrap2 { position:absolute } #dropmenu03 { filter:revealTrans(Duration=1.5,Transition=12) visibility:hide } a:hover { color:#FF0000 } body { font-family:"宋体"; font-size:9pt; text-decoration:none } a { font-family:"宋体"; font-size:9pt; text-decoration: none } </style> <ilayer id="dropmenu01" height='35px'> <layer id="dropmenu02" visibility='show'> <span id="iewrap"> <span id="iewrap2" onmouseover="dropit2();event.cancelBubble=true;return false"> <font face="宋体"><a href="#"> 梦幻下拉菜单 </a></font></span></span> </layer> </ilayer> <script language="JavaScript1.2"> var enableeffect = true; var selection = new Array(); selection[0] = '<font face="宋体"><a href="http://www.163.com">网易</a></font>'; selection[1] = '<font face="宋体"><a href="www.sohu.com">搜狐</a></font>'; selection[2] = '<font face="宋体"><a href="http://www.sina.com.cn">新浪</a></font>'; selection[3] = '<font face="宋体"><a href="http://www.pconline.com.cn">太平洋电脑网</a></font>'; if (document.layers) document.dropmenu01.document.dropmenu02.visibility = 'show'; function dropit2() { if (document.all) { dropmenu03.style.left = document.body.scrollLeft + event.clientX - event.offsetX; dropmenu03.style.top = document.body.scrollTop + event.clientY - event.offsetY + 18; if (dropmenu03.style.visibility == "hidden") { if (enableeffect) dropmenu03.filters.revealTrans.apply(); dropmenu03.style.visibility = "visible"; if (enableeffect) dropmenu03.filters.revealTrans.play(); } else { hidemenu(); } } } function dropit(e) { if (document.dropmenu03.visibility == "hide") document.dropmenu03.visibility = "show"; else document.dropmenu03.visibility = "hide"; document.dropmenu03.left = e.pageX - e.layerX; document.dropmenu03.top = e.pageY - e.layerY + 19; return false } function hidemenu() { if (enableeffect) dropmenu03.filters.revealTrans.stop();dropmenu03.style.visibility = "hidden"; } function hidemenu2() { document.dropmenu03.visibility = "hide" } if (document.layers) { document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK); document.dropmenu01.document.dropmenu02.onclick = dropit; } else if (document.all) document.body.onclick = hidemenu; </script> <div id="dropmenu03" style="position:absolute;left:0;top:0;layer-background-color:seashell;background-color:seashell;width:120;visibility:hidden;border:1px solid black;padding:0px"> <script language="JavaScript1.2"> if (document.all) dropmenu03.style.padding='4px'; for (i=0;i<selection.length;i++) document.write(selection[i]); </script> </div> <script language="JavaScript1.2"> if (document.layers){ document.dropmenu03.captureEvents(Event.CLICK); document.dropmenu03.onclick=hidemenu2; } </script> </tr> </table> |
Javascript的Tab标签页变换
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<script> function changeJobTab(tabIndex) { tabJobCount = 4; for (i = 1; i <= tabJobCount; i++) { tab = document.getElementById("JobTab" + i); content = document.getElementById("JobDescription" + i); if (i == tabIndex) { tab.className = "ActiveJobTab"; content.className = "ActiveJobDescription"; } else { tab.className = ""; content.className = "HiddenJobDescription"; } } } </script> <div id="zhaopin"> <div id="zptitle"><a href="http://job.csdn.net" target="_blank" >人才招聘榜</a></div> <div id="zpnav"> <ul id="JobTab"> <li> <a id="JobTab1" onclick="changeJobTab(1); return false;" class="ActiveJobTab" href="#">企业榜</a> </li> <li> <a id="JobTab2" onclick="changeJobTab(2); return false;" href="#">职位榜</a> </li> <li> <a id="JobTab3" onclick="changeJobTab(3); return false;" href="#">新闻榜</a> </li> <li> <a id="JobTab4" onclick="changeJobTab(4); return false;" href="#">简历榜</a> </li> </ul> </div> </div> <dl class="RightContentBlock" id="SpecRecomm"> <dd id="JobInfomation_Description"> <ul> <div id="JobDescription1" class="ActiveJobDescription" > <li></li> </div> <div id="JobDescription2" class="HiddenJobDescription" > <li></li> </div> <div id="JobDescription3" class="HiddenJobDescription" > <li></li> </div> <div id="JobDescription4" class="HiddenJobDescription" > <li></li> </div> </ul> </dd> </dl> |
表格变换
[code] function changeJobTab(tabIndex) { for (i = 1; i […]
表格图片阴影
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 |
<div id='Layer1' style='position:absolute;left:50px;top:50px;width:246px;height:186px;z-index:1'> <img src='http://www.baidu.com/img/baidu_sylogo1.gif' width='240' height='180' style="border:white 3 solid"> <div id='Layer2' style='position:relative;left:10px;top:-180px;width:260px;height:200px;z-index:-1;background-color:#000000;layer-background-color:#000000;border:1pxnone#000000;filter:Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=0,StartY=85,FinishX=0,FinishY=100)Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=90,StartY=0,FinishX=100,FinishY=0)Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=10,StartY=0,FinishX=0,FinishY=0)Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=0,StartY=10,FinishX=0,FinishY=0)'> </div> </div> <div style="height:300px;"></div> <table width='263' border='1' cellspacing='0' cellpadding='0' height='203'> <tr> <td valign='top' width='243' height='183' colspan='2' rowspan='2'> <img src='http://www.baidu.com/img/baidu_sylogo1.gif' width='240' height='180'> </td> <td width='20' height='20'> </td> </tr> <tr> <td width='20' height='163' bgcolor='#000000' style='filter:Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=0,StartY=0,FinishX=100,FinishY=0)Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=0,StartY=10,FinishX=0,FinishY=0)'> </td> </tr> <tr> <td width='20' height='20'> </td> <td width='223' height='20' bgcolor='#000000' style='filter:Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=0,StartY=0,FinishX=0,FinishY=100)Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=10,StartY=0,FinishX=0,FinishY=0)'> </td> <td width='20' height='20' bgcolor='#000000' style='filter:Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=0,StartY=0,FinishX=0,FinishY=100)Alpha(Opacity=100,FinishOpacity=0,Style=1,StartX=0,StartY=0,FinishX=100,FinishY=0)'> </td> </tr> </table> <div style="height:100px;"></div> <img src='http://www.baidu.com/img/baidu_sylogo1.gif' style='FILTER:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#808080,strength=5);' border='0' alt='按此在新窗口浏览图片' onload='javascript:if(this.width>screen.width-500) this.style.width=screen.width-500;'> |
显示大图
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<td align="center" bgcolor="#FFFFFF"> <a href="/gb/prodshow.asp?id=846"> <img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="136" height="132" border=0 onMouseOver="showImage(this,'http://www.baidu.com/img/baidu_sylogo1.gif','3')"></a> </td> <script> if (document.all["_showImage"] == null) document.write(' <img id = _showImage style = "z-index: 999;display: none;position: absolute;border: 1 solid black" onmouseout = "style.display = \'none\'">'); /** * 显示弹出图片。 * @param tag 目标元素。弹出的框将显示在其旁边 * @param url 需要弹出的图片的URL * @param pos 弹出位置。0=右,1=上,2=左,3=下,缺省为自动选择最佳方位。 */ function showImage(tag, url, pos) { tag.attachEvent("onmouseout", mouseout); var helper = document.all["_showImage"]; helper.removeAttribute("src"); helper.removeAttribute("width"); helper.removeAttribute("height"); helper.onload = showImage_show; helper.src = url; function mouseout() { //if(event.toElement != helper) //注释本行将使鼠标移出原图时弹出图立即关闭 helper.onmouseout(); helper.onload = null; helper.removeAttribute("src"); tag.detachEvent("onmouoseout", arguments.callee); } function showImage_show() { var rc = tag.getBoundingClientRect(); helper.style.display = ""; var rc2 = helper.getBoundingClientRect(); helper.alt = (rc2.right-rc2.left)+"x"+(rc2.bottom-rc2.top); var body = document.body; var l = rc.left; var t = rc.top; var r = body.clientWidth-rc.right; var b = body.clientHeight-rc.bottom; var ratio = (rc2.bottom-rc2.top) / (rc2.right-rc2.left); var pos = typeof(pos)!='undefined'?pos:-1; if(pos >= 0) { //指定了显示方位 var w = pos==1||pos==3?body.clientWidth : pos==0?r:l; var h = pos==0||pos==2?body.clientHeight : pos==1?t:b; if(h < w*ratio) w = h/ratio; else if(w < h/ratio) h = w*ratio; } else { //未指定显示方位,自动选择 var pos0_2 = l < r ? 0 : 2; var pos1_3 = t < b ? 3 : 1; var w = l < r ? r : l; var h = t < b ? b : t; var h1 = w*ratio; if(h1 > body.clientHeight) h1 = body.clientHeight; var h2 = body.clientWidth*ratio; if(h2 > h) h2 = h; if(h1 > h2) { var pos = pos0_2; h = h1; w = h1 / ratio; } else { var pos = pos1_3; h = h2; w = h2 / ratio; } } if(rc2.bottom-rc2.top > h || rc2.right-rc2.left > w) { helper.width = w; helper.height = h; } var rc2 = helper.getBoundingClientRect(); l = (pos==1||pos==3?rc.left:pos==0?rc.right:rc.left-(rc2.right-rc2.left))+150; t = (pos==0||pos==2?rc.top:pos==3?rc.bottom:rc.top-(rc2.bottom-rc2.top)); var k = body.clientWidth-(l+rc2.right-rc2.left); if(k < 0) l += k; var k = body.clientHeight-(t+rc2.bottom-rc2.top); if(k < 0) t += k; helper.style.left = -2+body.scrollLeft+l; helper.style.top = -2+body.scrollTop+t; } } </script> |
显示图片
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<html> <head> <meta http-equiv='"Content-Type"' content='"text/html;' charset='gb2312"'> <title>利郎(福建)时装有限公司</title> <body onmousemove='"move()"' onmouseup='"down=false"'> <style type='"text/css"'> body,td,a { font-size: 9pt; color: #330000; text-decoration: none} .aa {filter:alpha(opacity=70)} </style> <script> var over = false, down = false, divleft, divtop, n; function clase(x) { document.all['plane' + x].style.visibility = 'hidden' } function down1(m) { n = m; down = true; divleft = event.clientX - parseInt(m.style.left); divtop = event.clientY - parseInt(m.style.top) } function move() { if (down) { n.style.left = event.clientX - divleft; n.style.top = event.clientY - divtop; } } Phrase = "" Balises = "" Taille = 15; Midx = 70; Decal = 0.5; nb = Phrase.length; y = -10000; for (x = 0; x < nb; x++) { Balises = Balises + ' <div Id = L' + x + 'STYLE = "width: 3;font-family: 宋体;position: absolute;z-index: 0" > ' + Phrase.charAt(x) + ' </div>' } document.write(Balises); Time = window.setInterval("Alors()", 50); Alpha = 50; I_Alpha = 0.05; function Alors() { Alpha = Alpha - I_Alpha; for (x = 0; x < nb; x++) { Alpha1 = Alpha + Decal * x; Cosine = Math.cos(Alpha1); Ob = document.all("L" + x); Ob.style.posLeft = Midx + 100 * Math.sin(Alpha1) + 50; Ob.style.zIndex = 20 * Cosine; Ob.style.fontSize = Taille + 3 * Cosine; Ob.style.color = "rgb(" + (27 + Cosine * 80 + 50) + "," + (127 + Cosine * 80 + 50) + ",0)"; } } var num = 15; function chFilter() { if (num > 2) { num -= 1; img1.style.filter = "progid: DXImageTransform.Microsoft.Pixelate(MaxSquare = " + num + ")"; setTimeout("chFilter()", 5) } else { img1.style.filter = "" } } </script> </head> <body ondragstart="return false;" text='#000000' bgcolor='#ffffff' leftmargin='0' topmargin='0' onload="img1.style.visibility='';chFilter()"> <img id='img1' style='FILTER:progid:dximagetransform.microsoft.pixelate(maxsquare=50);visibility:hidden' src='http://www.baidu.com/img/baidu_sylogo1.gif' class="Img"> </body> </html> |
图片随滚动上下动
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 |
<p style="height:500px">a</p> <p style="height:500px">a</p> <p style="height:500px">a</p> <div id="floater" style="position:absolute; left:820px; top:140px; width:167px; height:364px; z-index:0; overflow: hidden;"> <table width="100%" cellspacing="0" cellpadding="0"> <tr> <td> <img src="../images/temp_img.gif" width="167" height="43"> </td> </tr> <tr> <td valign="top" background="images/you2.gif"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"> <table border="0" cellpadding="2" cellspacing="2"> <tr> <td> <table border='0' cellpadding='0' cellspacing='0'> <tbody> <tr> <td align="center" valign="middle"> <a href="/gb/prodshow.asp?id=783" target="_blank"><img src="/up/prod/783_1.gif" width="100" height="120" border='0'></a> </td> </tr> </tbody> </table> </td> </tr> </table> </td> </tr> <tr> <td align="center"> <b>03</b> </td> </tr> <tr> <td align="center"> <table border="0" cellpadding="2" cellspacing="2"> <tr> <td> <table border='0' cellpadding='0' cellspacing='0'> <tbody> <tr> <td align="center" valign="middle"> <a href="/gb/prodshow.asp?id=766" target="_blank"><img src="/up/prod/766_1.gif" width="100" height="120" border='0'></a> </td> </tr> </tbody> </table> </td> </tr> </table> </td> </tr> <tr> <td align="center"> <b>06</b> </td> </tr> </table> </td> </tr> <tr> <td> <img src="images/you3.gif" width="167" height="12"> </td> </tr> </table> </div> <script language="JavaScript"> self.onError = null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1 : 0; function heartBeat() { if (IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if (NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } if (diffY != lastScrollY) { percent = .1 * (diffY - lastScrollY); if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if (IE) document.all.floater.style.pixelTop += percent; if (NS) document.floater.top += percent; lastScrollY = lastScrollY + percent; } if (diffX != lastScrollX) { percent = .1 * (diffX - lastScrollX); if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if (IE) document.all.floater.style.pixelLeft += percent; if (NS) document.floater.left += percent; lastScrollX = lastScrollX + percent; } } function checkFocus(x, y) { stalkerx = document.floater.pageX; stalkery = document.floater.pageY; stalkerwidth = document.floater.clip.width; stalkerheight = document.floater.clip.height; if ((x > stalkerx && x < (stalkerx + stalkerwidth)) && (y > stalkery && y < (stalkery + stalkerheight))) return true; else return false; } function grabIt(e) { if (IE) { whichIt = event.srcElement; while (whichIt.id.indexOf("floater") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); } else { window.captureEvents(Event.MOUSEMOVE); if (checkFocus(e.pageX, e.pageY)) { whichIt = document.floater; StalkerTouchedX = e.pageX - document.floater.pageX; StalkerTouchedY = e.pageY - document.floater.pageY; } } return true; } function moveIt(e) { if (whichIt == null) { return false; } if (IE) { newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY; if (whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if (whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if (whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; if (whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; event.returnValue = false; } else { whichIt.moveTo(e.pageX - StalkerTouchedX, e.pageY - StalkerTouchedY); if (whichIt.left < 0 + self.pageXOffset) whichIt.left = 0 + self.pageXOffset; if (whichIt.top < 0 + self.pageYOffset) whichIt.top = 0 + self.pageYOffset; if ((whichIt.left + whichIt.clip.width) >= (window.innerWidth + self.pageXOffset - 17)) whichIt.left = ((window.innerWidth + self.pageXOffset) - whichIt.clip.width) - 17; if ((whichIt.top + whichIt.clip.height) >= (window.innerHeight + self.pageYOffset - 17)) whichIt.top = ((window.innerHeight + self.pageYOffset) - whichIt.clip.height) - 17; return false; } return false; } function dropIt() { whichIt = null; if (NS) window.releaseEvents(Event.MOUSEMOVE); return true; } if (NS) { window.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN); window.onmousedown = grabIt; window.onmousemove = moveIt; window.onmouseup = dropIt; } if(IE) { document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; } if(NS || IE) action = window.setInterval("heartBeat()", 1); </script> |
图片切换
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<table border='"0"' cellpadding='"0"' cellspacing='"0"' align='"center"'> <tr> <td> <script language='JavaScript'> var bannerAD = new Array(); var bannerADlink = new Array(); var adNum = 0; bannerAD[0] = "http: //img1.qq.com/edu/20050922/2358881.jpg"; bannerADlink[0] = "http: //edu.qq.com/a/20050921/000100.htm"; bannerAD[1] = "http: //img1.qq.com/edu/20050927/2384917.jpg"; bannerADlink[1] = "http: //edu.qq.com/kaoyan/yzzxh.shtml"; bannerAD[2] = "http: //img1.qq.com/edu/20050928/2392784.jpg"; bannerADlink[2] = "http: //edu.qq.com/photo/photo.shtml"; bannerAD[3] = "http: //img1.qq.com/edu/20050922/2358906.gif"; bannerADlink[3] = "http: //edu.qq.com/a/20050920/000114.htm"; var preloadedimages = new Array(); for (i = 0; i < 4; i++) { preloadedimages[i] = new Image(); preloadedimages[i].src = bannerAD[i]; } function setTransition() { if (document.all) { bannerADrotator.filters.revealTrans.Transition = Math.floor(Math.random() * 23); bannerADrotator.filters.revealTrans.apply(); } } function playTransition() { if (document.all) bannerADrotator.filters.revealTrans.play() } function nextAd() { if (adNum < bannerAD.length - 1) adNum++; else adNum = 0; setTransition(); document.images.bannerADrotator.src = bannerAD[adNum]; playTransition(); theTimer = setTimeout("nextAd()", 4000); } function jump2url() { jumpUrl = bannerADlink[adNum]; jumpTarget = '_blank'; if (jumpUrl != "") { if (jumpTarget != "") window.open(jumpUrl, jumpTarget); else location.href = jumpUrl; } } function displayStatusMsg() { status = bannerADlink[adNum]; document.returnValue = true; } </script> <a onmouseover='displayStatusMsg();return document.returnvalue' href='javascript:jump2url();'> <img style="FILTER: revealtrans(duration=2,transition=20)" height='230' src="javascript:nextAd()" width='200' border='0' name='bannerADrotator'></a> </td> </tr> </table> |
图片连接
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 |
<head> <script type="text/javascript"> function toup2(theobject) { logo = 1; gogo(theobject); } function todown2(theobject) { logo = 0; down(theobject); } function gogo(image) { theobject = image; if (logo == 1 && theobject.filters.alpha.opacity < 100) { theobject.filters.alpha.opacity += 20; var upalpha = setTimeout("gogo(theobject)", 300) } } function down(theobject) { if (logo == 0 && theobject.filters.alpha.opacity > 80) { theobject.filters.alpha.opacity -= 20; var downalpha = setTimeout("down(theobject)", 300) } } function MM_openBrWindow(theURL, winName, features) { //v2.0 window.open(theURL, winName, features); } function MM_goToURL() { //v3.0 var i, args = MM_goToURL.arguments; document.MM_returnValue = false; for (i = 0; i < (args.length - 1); i += 2) eval(args[i] + ".location='" + args[i + 1] + "'"); } function MM_findObj(n, d) { //v4.01 var p, i, x; if (!d) d = document; if ((p = n.indexOf("?")) > 0 && parent.frames.length) { d = parent.frames[n.substring(p + 1)].document; n = n.substring(0, p); } if (!(x = d[n]) && d.all) x = d.all[n]; for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n]; for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document); if (!x && d.getElementById) x = d.getElementById(n); return x; } function setAuthor(str) { var obj = document.form2.name; obj.value = str; } function setAuthor1(str) { var obj = document.form1.news_author; obj.value = str; } function YY_checkform() { var args = YY_checkform.arguments; var myDot = true; var myV = ''; var myErr = ''; var addErr = false; var myReq; for (var i = 1; i < args.length; i = i + 4) { if (args[i + 1].charAt(0) == '#') { myReq = true; args[i + 1] = args[i + 1].substring(1); } else { myReq = false } var myObj = MM_findObj(args[i].replace(/[/d+/]/ig, "")); myV = myObj.value; if (myObj.type == 'text' || myObj.type == 'password' || myObj.type == 'hidden') { if (myReq && myObj.value.length == 0) { addErr = true; } if ((myV.length > 0) && (args[i + 2] == 1)) { //fromto var myMa = args[i + 1].split('_'); if (isNaN(myV) || myV < myMa[0] / 1 || myV > myMa[1] / 1) { addErr = true; } } else if ((myV.length > 0) && (args[i + 2] == 2)) { var rx = new RegExp("^[//w/.=-]+@[//w//.-]+//.[a-z]{2,4}$"); if (!rx.test(myV)) addErr = true; } else if ((myV.length > 0) && (args[i + 2] == 3)) { // date var myMa = args[i + 1].split("#"); var myAt = myV.match(myMa[0]); if (myAt) { var myD = (myAt[myMa[1]]) ? myAt[myMa[1]] : 1; var myM = myAt[myMa[2]] - 1; var myY = myAt[myMa[3]]; var myDate = new Date(myY, myM, myD); if (myDate.getFullYear() != myY || myDate.getDate() != myD || myDate.getMonth() != myM) { addErr = true }; } else { addErr = true } } else if ((myV.length > 0) && (args[i + 2] == 4)) { // time var myMa = args[i + 1].split("#"); var myAt = myV.match(myMa[0]); i f(!myAt) { addErr = true } } else if (myV.length > 0 && args[i + 2] == 5) { // check this 2 var myObj1 = MM_findObj(args[i + 1].replace(/[/d+/]/ig, "")); if (myObj1.length) myObj1 = myObj1[args[i + 1].replace(/(.*/[)|(/].*)/ig, "")]; if (!myObj1.checked) { addErr = true } } else if (myV.length > 0 && args[i + 2] == 6) { // the same var myObj1 = MM_findObj(args[i + 1]); if (myV != myObj1.value) { addErr = true } } } else if (!myObj.type && myObj.length > 0 && myObj[0].type == 'radio') { var myTest = args[i].match(/(.*)/ [(/d+)/]. * /i); var myObj1=(myObj.length>1)?myObj[myTest[2]]:myObj; if (args[i+2]==1&&myObj1&&myObj1.checked&&MM_findObj(args[i+1]).value.length/1 == 0) { addErr = true } if (args[i + 2] == 2) { var myDot = false; for (var j = 0; j < myObj.length; j++) { myDot = myDot || myObj[j].checked } if (!myDot) { myErr += '* ' + args[i + 3] + '/n' } } } else if (myObj.type == 'checkbox') { if (args[i + 2] == 1 && myObj.checked == false) { addErr = true } if (args[i + 2] == 2 && myObj.checked && MM_findObj(args[i + 1]).value.length / 1 == 0) { addErr = true } } else if (myObj.type == 'select-one' || myObj.type == 'select-multiple') { if (args[i + 2] == 1 && myObj.selectedIndex / 1 == 0) { addErr = true } } else if (myObj.type == 'textarea') { if (myV.length < args[i + 1]) { addErr = true } } if (addErr) { myErr += '* ' + args[i + 3] + '/n'; addErr = false } } if (myErr != '') { alert('错误:/t/t/t/t/t/n/n' + myErr) } document.MM_returnValue = (myErr == ''); } </script> </head> <body> <table width="525" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="113" align="center"> <!--img src="http://www.lilang.com/pic/cdm06x.jpg" border="1" width="160" height="120" onclick="newimg('picredirectcs.asp?cs_id=48')" style="CURSOR: hand"--> <img src="images/temp_img.gif" border="1" onclick="window.open('picredirectcs.asp?cs_id=48','newwin');return false;" style="CURSOR: hand;filter:alpha(opacity=70)" onmouseover="javascript:toup2(this)" onmouseout="javascript:todown2(this)"> </td> </tr> </table> </body> |
图片精灵-图片拖动
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<style type='text/css'> #floater { LEFT: 445px; POSITION: absolute; TOP: 15px; VISIBILITY: visible; WIDTH: 125px; Z-INDEX: 10} </style> <script language='JavaScript'> self.onError = null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1 : 0; function heartBeat() { if (IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if (NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } if (diffY != lastScrollY) { percent = .1 * (diffY - lastScrollY); if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if (IE) document.all.floater.style.pixelTop += percent; if (NS) document.floater.top += percent; lastScrollY = lastScrollY + percent; } if (diffX != lastScrollX) { percent = .1 * (diffX - lastScrollX); if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if (IE) document.all.floater.style.pixelLeft += percent; if (NS) document.floater.left += percent; lastScrollX = lastScrollX + percent; } } function checkFocus(x, y) { stalkerx = document.floater.pageX; stalkery = document.floater.pageY; stalkerwidth = document.floater.clip.width; stalkerheight = document.floater.clip.height; if ((x > stalkerx && x < (stalkerx + stalkerwidth)) && (y > stalkery && y < (stalkery + stalkerheight))) return true; else return false; } function grabIt(e) { if (IE) { whichIt = event.srcElement; while (whichIt.id.indexOf("floater") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); } else { window.captureEvents(Event.MOUSEMOVE); if (checkFocus(e.pageX, e.pageY)) { whichIt = document.floater; StalkerTouchedX = e.pageX - document.floater.pageX; StalkerTouchedY = e.pageY - document.floater.pageY; } } return true; } function moveIt(e) { if (whichIt == null) { return false; } if (IE) { newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY; if (whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if (whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if (whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; if (whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; event.returnValue = false; } else { whichIt.moveTo(e.pageX - StalkerTouchedX, e.pageY - StalkerTouchedY); if (whichIt.left < 0 + self.pageXOffset) whichIt.left = 0 + self.pageXOffset; if (whichIt.top < 0 + self.pageYOffset) whichIt.top = 0 + self.pageYOffset; if ((whichIt.left + whichIt.clip.width) >= (window.innerWidth + self.pageXOffset - 17)) whichIt.left = ((window.innerWidth + self.pageXOffset) - whichIt.clip.width) - 17; if ((whichIt.top + whichIt.clip.height) >= (window.innerHeight + self.pageYOffset - 17)) whichIt.top = ((window.innerHeight + self.pageYOffset) - whichIt.clip.height) - 17; return false; } return false; } function dropIt() {whichIt = null; if (NS) window.releaseEvents(Event.MOUSEMOVE); return true; } if (NS) { window.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN); window.onmousedown = grabIt; window.onmousemove = moveIt; window.onmouseup = dropIt; } if(IE) { document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; } if(NS || IE) action = window.setInterval("heartBeat()", 1); </script> <div align='center' id='floater'> <table height='10' width='24'> <tbody> <tr> <td align='middle' height='6' valign='center' width='76'> <!-- 注意更改图片所在路径--> <img border='0' src="C:/My Documents/My Pictures/74.gif"> </td> </tr> </tbody> </table> </div> |
图片精灵
[code] <style type=text/css>#floater { LEFT: 445p […]
图片渐变切换
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<html> <head> <title> 图片特效 </title> </head> <body topmargin="0" leftmargin="0" oncontextmenu="return false"> <noscript> <iframe src="*.html"> </iframe> </noscript> <center> <table style='font-size:9pt' width="100%"> <tr> <td align='center'> <script> var i = 0; var pictures = new Array(); pictures[i++] = "http: //www.lilang.com/pic/hopeshow/hopeshow1.jpg"; pictures[i++] = "http://www.lilang.com/pic/hopeshow/hopeshow2.jpg"; pictures[i++] = "http://www.lilang.com/pic/hopeshow/hopeshow3.jpg"; pictures[i++] = "http://www.lilang.com/pic/hopeshow/hopeshow4.jpg"; pictures[i++] = "http://www.lilang.com/pic/hopeshow/hopeshow5.jpg"; pictures[i++] = "http://www.lilang.com/pic/hopeshow/hopeshow6.jpg"; pictures[i++] = "http://www.lilang.com/pic/hopeshow/hopeshow7.jpg"; var picturewidth = 180; var pictureheight = 144; var delay = 3; if (document.all) { document.write(' <object ID = "DAControl_Wipe"'); document.write('STYLE = "width: ' + picturewidth + ';height: ' + pictureheight + '"'); document.write('CLASSID = "CLSID: B6FFC24C-7E13-11D0-9B47-00C04FC2F51D"> '); document.write(' </object>'); m = DAControl_Wipe.MeterLibrary; whatTransformation = new ActiveXObject("DXImageTransform.Microsoft.Wipe"); whatTransformation.GradientSize = 1.0; whatTransformation.WipeStyle = 0; var myArr = new Array(), myArr2 = new Array(); var len = Math.floor(pictures.length / 2) for (var i = 0; i < len; i++) { myArr[i] = m.ImportImage(pictures[2 * i]); myArr2[i] = m.ImportImage(pictures[2 * i + 1]); } myArr[i] = m.ImportImage(pictures[2 * i]); myArr = m.Array(myArr); myArr2 = m.Array(myArr2); Index = m.Interpolate(0.5, len + 0.5, len * 2 * delay).RepeatForever(); Index2 = m.Interpolate(0, len, len * 2 * delay).RepeatForever(); var whatPictures = new Array(); whatPictures[0] = myArr.NthAnim(Index); whatPictures[1] = myArr2.NthAnim(Index2); forward = m.Interpolate(0, 1, delay); back = m.Interpolate(1, 0, delay); whatMovement = m.Sequence(forward, back).RepeatForever(); theResult = m.ApplyDXTransform(whatTransformation, whatPictures, whatMovement); DAControl_Wipe.Image = theResult.OutputBvr; DAControl_Wipe.Start(); } </script> </td> </tr> </table> </center> </body> </html> |
取得上传图片的大小
取得上传文件的大小,客户端检测~~
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 |
<script> var img = null; function s() { if (img) { img.removeNode(true); } img = document.createElement("img"); img.style.position = "absolute"; img.style.visibility = "hidden"; img.attachEvent("onreadystatechange", orsc); img.attachEvent("onerror", oe); document.body.insertAdjacentElement("beforeend", img); img.src = inp.value; } function oe() { alert("cant load img"); } function orsc() { if (img.readyState != "complete") return false; alert("图片大小:" + img.offsetWidth + "X" + img.offsetHeight); alert("图片尺寸:" + img.fileSize); } </script> <input id=inp type="file"> <button onclick="s()"> Test </button> |
&nbs […]
横向不间断连续滚动图片效果
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<head> <script type="text/javascript"> imgArr = new Array(); imgArr[0] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover = 'javascript:outHover = true'; onMouseout = 'javascript: outHover = false;mvStart()'><img src = /eWebEditor/UploadFile / 2005327204719938.gif border = 0> </a>"; imgArr[1] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725420.gif border = 0> </a>"; imgArr[2] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725360.gif border = 0> </a>"; imgArr[3] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725406.gif border = 0> </a>"; imgArr[4] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725266.gif border = 0> </a>"; imgArr[5] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725696.gif border = 0> </a>"; imgArr[6] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725993.gif border = 0> </a>"; imgArr[7] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726451.gif border = 0> </a>"; imgArr[8] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726631.gif border = 0> </a>"; imgArr[9] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726764.gif border = 0> </a>"; imgArr[10] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726655.gif border = 0> </a>"; var moveStep = 4; //步长,单位:pixel var moveRelax = 100; //移动时间间隔,单位:ms ns4 = (document.layers) ? true : false; var displayImgAmount = 5; //视区窗口可显示个数 var divWidth = 88; //每块图片占位宽 var divHeight = 31; //每块图片占位高 var startDnum = 0; var nextDnum = startDnum + displayImgAmount; var timeID; var outHover = false; var startDivClipLeft; var nextDivClipRight; function initDivPlace() { if (ns4) { for (i = 0; i < displayImgAmount; i++) { eval("document.divOuter.document.divAds" + i + ".left = " + divWidth * i); } for (i = displayImgAmount; i < imgArr.length; i++) { eval("document.divOuter.document.divAds" + i + ".left = " + divWidth * displayImgAmount); } } else { for (i = 0; i < displayImgAmount; i++) { eval("document.all.divAds" + i + ".style.left = " + divWidth * i); } for (i = displayImgAmount; i < imgArr.length; i++) { eval("document.all.divAds" + i + ".style.left = " + divWidth * displayImgAmount); } } } function mvStart() { timeID = setTimeout(moveLeftDiv, moveRelax); } function mvStop() { clearTimeout(timeID); } function moveLeftDiv() { if (ns4) { for (i = 0; i <= displayImgAmount; i++) { eval("document.divOuter.document.divAds" + parseInt((startDnum + i) % imgArr.length) + ".left = document.divOuter.document.divAds" + parseInt((startDnum + i) % imgArr.length) + ".left - moveStep"); } startDivClipLeft = parseInt(eval("document.divOuter.document.divAds" + startDnum + ".clip.left")); nextDivClipRight = parseInt(eval("document.divOuter.document.divAds" + nextDnum + ".clip.right")); if (startDivClipLeft + moveStep > divWidth) { eval("document.divOuter.document.divAds" + nextDnum + ".clip.right = " + divWidth); eval("document.divOuter.document.divAds" + startDnum + ".left = " + divWidth * displayImgAmount); eval("document.divOuter.document.divAds" + parseInt((nextDnum + 1) % imgArr.length) + ".left = document.divOuter.document.divAds" + nextDnum + ".left + " + divWidth); eval("document.divOuter.document.divAds" + parseInt((nextDnum + 1) % imgArr.length) + ".clip.left = 0"); startDnum = (++startDnum) % imgArr.length; nextDnum = (startDnum + displayImgAmount) % imgArr.length; startDivClipLeft = moveStep - (divWidth - startDivClipLeft); nextDivClipRight = moveStep - (divWidth - nextDivClipRight); } else { eval("document.divOuter.document.divAds" + nextDnum + ".clip.left = 0"); startDivClipLeft += moveStep; nextDivClipRight += moveStep; } eval("document.divOuter.document.divAds" + startDnum + ".clip.left = " + startDivClipLeft); eval("document.divOuter.document.divAds" + nextDnum + ".clip.right = " + nextDivClipRight); } else { for (i = 0; i <= displayImgAmount; i++) { eval("document.all.divAds" + parseInt((startDnum + i) % imgArr.length) + ".style.left = document.all.divAds" + parseInt((startDnum + i) % imgArr.length) + ".style.pixelLeft - moveStep"); } startDivClipLeft = parseInt(eval("document.all.divAds" + startDnum + ".currentStyle.clipLeft")); nextDivClipRight = parseInt(eval("document.all.divAds" + nextDnum + ".currentStyle.clipRight")); if (startDivClipLeft + moveStep > divWidth) { eval("document.all.divAds" + nextDnum + ".style.clip = 'rect(0, " + divWidth + ", " + divHeight + ", 0" + ")'"); eval("document.all.divAds" + startDnum + ".style.left = " + divWidth * displayImgAmount); eval("document.all.divAds" + parseInt((nextDnum + 1) % imgArr.length) + ".style.left = document.all.divAds" + nextDnum + ".style.pixelLeft + " + divWidth); startDnum = (++startDnum) % imgArr.length; nextDnum = (startDnum + displayImgAmount) % imgArr.length; startDivClipLeft = moveStep - (divWidth - startDivClipLeft); nextDivClipRight = moveStep - (divWidth - nextDivClipRight); } else { startDivClipLeft += moveStep; nextDivClipRight += moveStep; } eval("document.all.divAds" + startDnum + ".style.clip = 'rect(0, " + divWidth + ", " + divHeight + ", " + startDivClipLeft + ")'"); eval("document.all.divAds" + nextDnum + ".style.clip = 'rect(0, " + nextDivClipRight + ", " + divHeight + ", 0)'"); } if (outHover) { mvStop(); } else { mvStart(); } } function writeDivs() { if (ns4) { document.write(" <ilayer name = divOuter width = 750 height = " + divHeight + "> "); for (i = 0; i < imgArr.length; i++) { document.write(" <layer name = divAds" + i + "> "); document.write(imgArr[i] + ""); document.write(" </layer>"); } document.write("</ilayer> "); document.close(); for (i = displayImgAmount; i < imgArr.length; i++) { eval("document.divOuter.document.divAds" + i + ".clip.right = 0"); } } else { document.write(" <div id = divOuter style = 'position: relative'width = 750 height = " + divHeight + "> "); for (i = 0; i < imgArr.length; i++) { document.write(" <div id = divAds" + i + " style = 'position: absolute;clip: rect(0, " + divWidth + ", " + divHeight + ", 0)'> "); document.write(imgArr[i] + ""); document.write(" </div>") } document.write("</div> "); for (i = displayImgAmount; i < imgArr.length; i++) { eval("document.all.divAds" + i + ".style.clip = 'rect(0, 0, " + divHeight + ", 0)'"); } } } </script> </head> <body onload=javascript:mvStart()> <script type="text/javascript"> writeDivs(); initDivPlace(); </script> </body> |
不间断连续图片滚动效果的制作方法
以前我们站点也介绍过连续滚动的图片,但缺陷是有间断。如何制作连续不间断的播放滚动呢?请参看制作方法: 先制 […]
背景时钟
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<html> <head> <title> Background Clock </title> <script language=javaScript> function clockon() { thistime = new Date(); var hours = thistime.getHours(); var minutes = thistime.getMinutes(); var seconds = thistime.getSeconds(); if (eval(hours) < 10) { hours = "0" + hours; } if (eval(minutes) < 10) { minutes = "0" + minutes; } if (seconds < 10) { seconds = "0" + seconds; } thistime = hours + ": " + minutes + ": " + seconds; if (document.all) { bgclocknoshade.innerHTML = thistime; bgclockshade.innerHTML = thistime; } if (document.layers) { document.bgclockshade.document.write(' <div id = "bgclockshade" style = "position: absolute;visibility: visible;font-family: Verdana;color: FFAAAAA;font - size: 120px;top: 10px;left: 152px"> ' + thistime + ' </div>'); document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px">' + thistime + '</div > '); document.close(); } var timer = setTimeout("clockon()", 200); } </script> <link rel="stylesheet" href="../style.css"> </head> <body onLoad="clockon()"> 说明:时钟显示的位置需要你修正TOP,LEFT参数来确定。TOP表示层距离显示器顶部的象素值,LEFT表示距离左侧的象素值。 <div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px;"> </div> <div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:DDDDDD;font-size:120px;top:100px;left:150px;"> </div> <div id="mainbody" style="position:absolute; visibility:visible;"> </div> </body> </html> |