下拉特效与拖动,打开页面与退出页面的特效meta-优快云博客

本文链接：https://blog.youkuaiyun.com/lqscoke/article/details/1653925

本文通过几个具体的HTML页面示例展示了如何使用JavaScript进行页面元素的动态控制与交互，包括弹窗提示、导航菜单等，为网页增加了丰富的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=1, transition=23)">
<head>
</head>
<title>Mapabc地图无限</title>

<body >
<a href="1.html">    ######################################################################</a>

</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cao888---提示</title>
</head>

<body>
<script language=javascript>
var cao_x,cao_y;

function cao888()
{
this.display=display;
}

function display()
{
  document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid

#A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur

()>CAO留言</button></td></tr></table>");
  document.write("<div  id='cao1' style='font-size:12px;position:absolute;display:none;text-

align:center;overflow:visible'>");
  document.write("<div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-

200)/2);width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'>");
  document.write("<table width=200 height=20 bgcolor=green onmousedown='cao_x=event.x-

parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();'

onmousemove='caoMove(this.parentNode)' style='cursor:move;'>");
  document.write("<tr align=center>");
  document.write("<td align=left>提示:CAO888</td>");
  document.write("</tr>");
  document.write("</table>");
  document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><img

src='http://pic1.blueidea.com/bbs/topic5.gif'><br>CAO呀,错误了...<br>[确定]</span>");
  document.write("  </div>");
  document.write("</div>");
}
function caoMove(obj)  //实现层的拖移
{
  if(event.button==1)
  {
    var caoX=obj.clientLeft;
    var caoY=obj.clientTop;
    obj.style.pixelLeft=caoX+(event.x-cao_x);
    obj.style.pixelTop=caoY+(event.y-cao_y);
  }
}
</script>
<script language=javascript>
var mycao=new cao888();
mycao.display();
</script>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模仿as效果的导航菜单</title>
<style type="text/css">

</style>
<script type="text/javascript">
lastNo=0
function re(menu_no){
if(lastNo!=menu_no){
cur=menu_no+1
lastNo=menu_no
rest()
}else{
cur=100
}
document.getElementById("board"+menu_no).style.visibility="visible"
}
function rest(){
for(i=1;i<=4;i++){
document.getElementById("hor"+i).style.top=20*i;
document.getElementById("board"+i).style.visibility="hidden"
}
menu_num=4;
act=1
height=120+20
speed=0;
posY=0;
}
function huke(){
if(act==1&&cur<100){
speed=(height-posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-posY)<0.5){
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout("huke()",50)
}
}

</script>
</head>
<body>
<div id="hor1" onclick="re(1);huke()">News</div>
<div id="hor2" onclick="re(2);huke()">Populor</div>
<div id="hor3" onclick="re(3);huke()">Sports</div>
<div id="hor4" onclick="re(4);huke()">Woman</div>
<div id="board1">1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足？<br />3.没有了。</div>
<div id="board2">1.xhtml+css真的来了吗？<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库？</div>
<div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球？</div>
<div id="board4">1.二十一世纪最缺的是什么?人才<br />
<a href="http://www.gamvan.com" target="_blank">http://www.gamvan.com</a>
<a href="http://www.gamvan.com" target="_blank">http://www.gamvan.com</a></div>
</body>
</html>