层的定位以及层的放大显示效果,高手帮忙啊,超急!!!!!!!!!!!!!

lyq708 2007-02-27 10:57:09
就如msn的这种效果
http://search.live.com/images/results.aspx?q=music&FORM=QBIR&mkt=zh-cn#
...全文
215 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
lyq708 2007-02-27
  • 打赏
  • 举报
回复
上面的定位效果不能实现吗
lyq708 2007-02-27
  • 打赏
  • 举报
回复
地址不会错的啊
muxrwc 2007-02-27
  • 打赏
  • 举报
回复
啊哈,斑竹大人中午好,斑竹大人辛苦了。。。。
muxrwc 2007-02-27
  • 打赏
  • 举报
回复
这个收缩特效可以参考下。。
<html>
<head>
<style type="text/css">
.wc, #wc1, #wc2 {
position:absolute;
border-width:0px;
z-index:2;
left:0px;
top:0px;
display:none;
}
#wc1 {
width:320px;
height:240px;
background-color:#FFCC00;
}
#wc2 {
width:420px;
height:340px;
background-color:#CCCCCC;
}
.wc {
z-index:1;
}
</style>
<script type="text/javascript">
(function () {
var interval = window.setInterval;
window.setInterval = function (a, b) {
var fun;
if ("function" == typeof a) {
var arg = Array.prototype.slice.call(arguments, 2);
fun = function () {
a.apply(null, arg);
};
} else {
fun = a;
}
return interval(fun, b);
};
})();

function createOpenMenu(changeTime) {
var intervalTime = 5, wc_number = 0;

function addIframe() {
//添加一个Iframe为了遮盖住IE的Select...
var ifr = document.createElement("iframe");
ifr.setAttribute("id", "ifr_" + (++ wc_number));
ifr.setAttribute("className", "wc");
ifr.setAttribute("class", "wc");
document.body.appendChild(ifr);
return $("ifr_" + wc_number); //返回新加入的Iframe...
}

function changeMenu(o) {
//改变对象属性..以达到收缩效果...
if (eval(o.bool)) {
o.t_iframe.style.width = o.style.width = (o.t_num * o.t_width) + "px"; //设置Iframe和div的宽度..
o.t_iframe.style.height = o.style.height = (o.t_num * o.t_height) + "px"; //设置Ifrmae和div的高度..
o.t_iframe.style.left = o.style.left = o.t_left - o.offsetWidth / 2 + "px"; //设置Iframe和div的Left位置...
} else {
if (/</.test(o.bool)) { //如果是over的时候结束了的话,那么就显示内容..
o.innerHTML = o.context;
} else { //否则就把Iframe和div隐藏...
o.t_iframe.style.display = o.style.display = "none";
}
window.clearInterval(o.timer); //清楚记时器
}
}

function over() {
//当鼠标经过时..执行...
var o = this.o;
var par = this.p;
o.bool = "++ o.t_num < changeTime"; //改变判断..
if (o.t_num <= 0 || "undefined" == typeof o.timer) { //如果记时器为空的时候
o.innerHTML = ""; //内容设置为空
o.t_iframe.style.display = o.style.display = "block"; //设置为显示
o.t_iframe.style.width = o.style.width = "0px";
o.t_iframe.style.height = o.style.height = "0px";
o.t_iframe.style.left = o.style.left = o.t_left - o.offsetWidth / 2 + "px"; //设置Iframe和div的left位置..
o.t_iframe.style.top = o.style.top = par.offsetTop + par.offsetHeight - 5 + "px"; //设置Iframe和div的top位置..
o.timer = window.setInterval(changeMenu, intervalTime, o); //建立记时器
}
window.clearInterval(o.clear);
}

function out(o) {
//当鼠标移开时..执行...
o.bool = "-- o.t_num > 0"; //改变判断..
o.innerHTML = "";
if (o.t_num >= changeTime) {
o.timer = window.setInterval(changeMenu, intervalTime, o); //建立记时器
}
window.clearInterval(o.clear);
}

function execOut() {
var o = this.o;
o.clear = window.setInterval(out, 500, o);
}


this.add = function (to, eo) {
//添加对象,设置一些参数...
eo.t_num = 0;
eo.t_iframe = addIframe();
eo.style.display = "block";
eo.t_left = to.offsetLeft + to.offsetWidth / 2;
eo.t_width = (eo.offsetWidth) / changeTime;
eo.t_height = (eo.offsetHeight) / changeTime;
eo.style.display = "none";
eo.context = eo.innerHTML;
to.o = eo.o = eo;
to.p = eo.p = to;
to.onmouseover = eo.onmouseover = over;
to.onmouseout = eo.onmouseout = execOut;
}
}
function $(id) {
return document.getElementById(id);
}
window.onload = function () {
var menu = new createOpenMenu(20);
menu.add($("show_wc1"), $("wc1"));
menu.add($("show_wc2"), $("wc2"));
menu = null;
}
</script>
</head>
<body>
<div id="wc1">一:好多的内容的说......</div>
<div id="wc2">二:好多的内容的说......</div>
<center>
<button id="show_wc1">show_wc1</button>
<button id="show_wc2">show_wc2</button>
<br />
<select style="width:150px;"></select>
</center>
</body>
</html>
hbhbhbhbhb1021 2007-02-27
  • 打赏
  • 举报
回复
你给的地址我这边会报错,看不到效果
可以试试修改层的zoom属性
lyq708 2007-02-27
  • 打赏
  • 举报
回复
顶一下
怎么没人回答阿
郁闷了,难得问一个问题,就这样冷冷清清的
lyq708 2007-02-27
  • 打赏
  • 举报
回复
muxrwc(王辰—准备消失)
我死搬你的办法应付一下

等有时间慢慢研究
结帖喽
wjsyby 2007-02-27
  • 打赏
  • 举报
回复
我是想问"("function()...................}")();"
是什么意思不明白为什么要把function括起来
wjsyby 2007-02-27
  • 打赏
  • 举报
回复
菜鸟问题
muxrwc(王辰—准备消失)
(function () {
var interval = window.setInterval;
window.setInterval = function (a, b) {
var fun;
if ("function" == typeof a) {
var arg = Array.prototype.slice.call(arguments, 2);
fun = function () {
a.apply(null, arg);
};
} else {
fun = a;
}
return interval(fun, b);
};
})();
是什么意思呀

87,992

社区成员

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

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