js弹出菜单，修改求助？

nicejava 2008-12-30 06:58:30
大家好，我这里有一个js文件求各位帮忙。我改了好久，无收获。真心的肯求和帮忙看看，先谢谢了。
有一个js文件和一个html文件。是一种弹出菜单特效，本没有错误,特效如下：
鼠标经过图片，以渐变方式弹出一个层，鼠标移出，层渐变消失。
您只需要把代码保存在同一目录下 ，即可看到效果

我的修改目的是把它弹出层在上面显示，最好是紧贴图片。＝＝＝＝＝＝＝＝＝？？

以相同的文件名保存下面的代码：

第一个文件 文件名是zoomx.js 代码如下
function initZoomX(o,c,delay){
var steps=12,intv=20;
var state="hide",tobe="",timer;
var tw,th;
var z;
c.style.display="block";
tw=c.offsetWidth,th=c.offsetHeight;
c.style.display="none";
z=document.createElement("div");
with(z.style){
position="absolute";
zIndex="99";
margin="0px";
padding="0px";
overflow="hidden";
backgroundColor=(c.currentStyle||window.getComputedStyle(c,null)).backgroundColor;
}
z.appendChild(c.parentNode.removeChild(c));
document.body.appendChild(z);
setRect(z,[-20,-20,10,10]);
addEvent(o,"mouseover",doover);
addEvent(c,"mouseover",doover);
addEvent(o,"mouseout",doout);
addEvent(c,"mouseout",doout);
function doover(){
tobe="show";
setTimeout(function(){
if(state=="hide"&&tobe=="show"){
state="showing";
ani(true);
}
},delay);
}
function doout(){
tobe="hide";
setTimeout(function(){
if(state=="show"&&tobe=="hide"){
state="hidding";
ani(false);
}
},delay);
}
function ani(bshow){
var f=bshow?0:steps-1;
var t=bshow?steps-1:0;
var x=bshow?1:-1;
var rects=build(getRect(o),tw,th);
alpha(z,50);
for(var i=f,k=0;i!=t+x;i+=x)(function(){
var j=i;
setTimeout(function(){
setRect(z,rects[j]);
if(j==f&&!bshow)
c.style.display="none";
else if(j==t){
if(bshow){
c.style.display="block";
alpha(z,100);
state="show";
if(tobe=="hide")
doout();
}
else{
setTimeout(function(){
setRect(z,[-20,-20,10,10]);
state="hide";
if(tobe=="show")
doover();
},intv);
}
}
},(++k)*intv);
})();
}
function build(r,w,h){
var ret=[];
var d=[r[0]+(r[2]-w)/2,r[1]+r[3]+5,w,h];
if(d[0]<0)
c[0]=r[0];
for(var i=0;i<steps-1;i++){
var t=[];
for(var j=0;j<4;j++)
t[j]=r[j]+(d[j]-r[j])*i/(steps-1);
ret.push(t);
}
ret.push(d);
return ret;
}
function alpha(ele,n){
if(ele.filters)
ele.style.filter="alpha(opacity="+n+")";
else
ele.style.opacity=n/100;
}
}

function $(sid){
return document.getElementById(sid);
}

function addEvent(obj,evt,func){
if(obj.attachEvent)
obj.attachEvent("on"+evt,func);
else if(obj.addEventListener)
obj.addEventListener(evt,func,false);
else
return false;
return true;
}

var _firefox=navigator.userAgent.indexOf("Firefox")>=0;
var _opera=navigator.userAgent.indexOf("Opera")>=0;
var _ie=!_firefox&&!_opera;
function getRect(obj){
var left=0,top=0;
var width=obj.offsetWidth,height=obj.offsetHeight;
var op=obj,st;
var abs=false;
if(_firefox)
while((op=op.parentNode).tagName!="HTML"){
var st=getComputedStyle(op,null);
if(st.MozBoxSizing!="border-box"){
left+=parseInt(st.borderLeftWidth);
top+=parseInt(st.borderTopWidth);
}
}
while(true){
left+=obj.offsetLeft;
top+=obj.offsetTop;
if(!(op=obj.offsetParent))
break;
if(_ie){
left+=op.clientLeft;
top+=op.clientTop;
if(!abs&&obj.currentStyle.position=="absolute")
abs=true;
}
obj=op;
}
if(_ie){
if(!document.documentElement.clientWidth){
var t=document.body.currentStyle;
var lx=parseInt(t.borderLeftWidth);
var tx=parseInt(t.borderTopWidth);
left-=isNaN(lx)?2:lx;
top-=isNaN(tx)?2:tx;
}
else if(abs){
left-=2;
top-=2;
}
}
return [left,top,width,height];
}

function setRect(obj,rect){
with(obj.style){
left=Math.round(rect[0])+"px";
top=Math.round(rect[1])+"px";
width=Math.round(rect[2])+"px";
height=Math.round(rect[3])+"px";
}
}

addEvent(window,"load",function(){
for(var i=0,m=document.getElementsByTagName("*");i<m.length;i++){
var urn=m[i].getAttribute("urn");
if(urn&&/^zoomx#.+/.test(urn)){
var a=urn.split("#");
var target=$(a[1]),delay=a[2]||200;
if(target)
initZoomX(m[i],target,parseInt(delay));
}
}
});

第二个html文件，代码如下：
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Test page</title>
<style type="text/css">
/*<![CDATA[*/
body{
text-align:center;
padding-top:40px;
}
.hello{
display:none;
width:200px;
height:200px;
padding:25px;
background-color:#cccccc;
color:white;
font:bold 16px verdana;
}
/*]]>*/
</style>
<script language="javascript" type="text/javascript" src="zoomx.js"></script>
</head>
<body>
<img urn="zoomx#y0#200" src="http://www.blueidea.com/logo.gif" />
<img urn="zoomx#y1#200" src="http://www.blueidea.com/logo.gif" />
<img urn="zoomx#y2#200" src="http://www.blueidea.com/logo.gif" />
<img urn="zoomx#y3#200" src="http://www.blueidea.com/logo.gif" />
<div id="y0" class="hello" boder="2">BlueIdea1 <br /><br /><small>mozart0,2007.05</small></div>
<div id="y1" class="hello">BlueIdea2 <br /><br /><small>mozart0,2007.05</small></div>
<div id="y2" class="hello">BlueIdea3 <br /><br /><small>mozart0,2007.05</small></div>
<div id="y3" class="hello">BlueIdea4 <br /><br /><small>mozart0,2007.05</small></div>
</body>
</html>
...全文
627 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
dehexiao 2009-10-12
  • 打赏
  • 举报
 回复
路过，up!
nicejava 2008-12-31
  • 打赏
  • 举报
 回复
向上弹出。就是把那种效果，方向向上。
您可以先把图片往下移，到一屏底部。
最好，贴着图片。
不悲不喜 2008-12-31
  • 打赏
  • 举报
 回复
这里有一个问题，
你的菜单效果是希望向下拉还是向上拉？
nicejava 2008-12-31
  • 打赏
  • 举报
 回复
非常感谢syukugai
我的问题终于解决了。
不悲不喜 2008-12-31
  • 打赏
  • 举报
 回复
zoomx.js的79行，像下面这样改一下。

//        var d = [r[0] + (r[2] - w) / 2, r[1] + r[3] + 5, w, h];

		var d = [r[0] + (r[2] - w) / 2, r[1] - 1 - h, w, h];

nicejava 2008-12-30
  • 打赏
  • 举报
 回复
我做的是单页，一屏全显示的网页，就是一个主页。
这个弹出菜单在最下面一个角。
求您帮帮忙吧！
不悲不喜 2008-12-30
  • 打赏
  • 举报
 回复
显示在图片上方吗?
空间不够怎么办?
ExtJS 界面设计器
1. **ExtJS框架**：ExtJS是Sencha公司开发的一个开源JavaScript库，它提供了大量的预定义组件，如表格、面板、菜单、按钮等，用于构建复杂的、数据驱动的Web应用。它的MVC（模型-视图-控制器）架构和数据绑定机制...
jquery-ui
例如，使用 Dialog 组件可以创建弹出式窗口，用于显示警告、确认信息或者复杂的内容；使用 Draggable 和 Sortable 可以实现拖放操作，让用户的操作更加直观和自由。 标签 "jquery-ui" 明确指出这是一个关于 jQuery ...
使用easyui dialog 弹出框的一些注意事项
使用easy ui 的dialog弹出框制作后台管理系统时需要点击按钮弹出个新的弹出框，为了保持每次点击显示出来的数据都是重新渲染，从后台获取的，可以这样来写：function piliangchuli(){ $("").dialog({ title: '...
Delphi实现Image拖动窗体与点击弹出菜单效果完整示例
本文还有配套的精品资源，点击获取 简介：本项目“Image拖动窗体效果演示，点击图片弹出菜单”基于Delphi开发环境，融合了图像处理、事件驱动编程和用户界面设计等关键技术。通过TImage控件实现图片显示与点击响应，...
关于界面弹出框的问题
我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。   LANGUAGE=javascript>  <!--  window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0...
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章