打印

一个简单的效果，看你怎么利用了

hicoool

新手上路

帖子: 3
体力: 11
威望: 0
当前: 浙江杭州
离线: 5 天

91^# 大中小发表于 2008-6-10 14:01

好~~顶~

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

wangxu123981

新手上路

帖子: 2
体力: 9
威望: 0
当前: 北京海淀区
离线: 111 天

92^# 大中小发表于 2008-6-10 15:08

路过,不错,收藏了~~

TOP

美橙vps独立IP月付189元

ren463600

新手上路

帖子: 2
体力: 9
威望: 0
离线: 118 天

93^# 大中小发表于 2008-6-10 15:18

当鼠标经过时候展开，鼠标离开的时候自动关闭的那个呢

TOP

请大家尊重和保护奥运知识产权。

yltfy

高级会员

帖子: 387
体力: 794
威望: 0
当前: 广东广州
离线: 8 天

94^# 大中小发表于 2008-6-26 09:10

能支持多个并且能在未知高度下就更帅了!

学习JavaScript...

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

anly298

初级会员

帖子: 26
体力: 61
威望: 0
离线: 1 天

95^# 大中小发表于 2008-6-26 11:03

看看这个

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>dome1</title>
<style>
* { margin:0; padding:0;}
body {
	text-align:center;
	font:12px;
	background-repeat:no-repeat;
	background-position:center top;
	background-color:#CAC9C5;
	background-image: url(444.jpg);
}
/*.class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}*/
#class1content { height:450px;overflow:hidden; color:#FFFFFF; line-height:20px}
.top_tp{ width:124px; height:57px; background:url(images/88_01.gif); background-repeat:no-repeat}
.middle_tp{ width:124px;  background:url(images/88_02.gif); background-repeat: repeat-y;}
.but_tp{ width:124px; height:17px;  background:url(images/88_03.gif); background-repeat: no-repeat; cursor:pointer}
.black_overlay{ 
            display: none; 
            position: absolute; 
            top: 0%; 
            left: 0%; 
            width: 100%; 
            height: 100%; 
            background-color: black; 
            z-index:1001; 
            -moz-opacity: 0.7; 
            opacity:.70; 
            filter: alpha(opacity=70); 
        } 
        .white_content {
	display: none;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	border: 8px solid orange;
	background-color: white;
	z-index:1002;
	overflow: auto;
	padding-right: 16px;
	padding-bottom: 16px;
	padding-left: 16px;
}
.white_content a:link {  color: #000; text-decoration: none;font-size:12px; }
.white_content a:visited {  color: #000000; text-decoration: none;font-size:12px; }
.white_content a:active {  color: #333333; text-decoration: none;font-size:12px; }
.white_content a:hover {  color: #000;font-size:12px; background: #A60000; line-height:20PX}
a {   font-size: 12px;color: #333333; text-decoration: none}
a:hover {  font-size: 12px; color: #000; text-decoration: none}
a:link {  color: #000; text-decoration: none;font-size:12px; }
a:visited {  color: #000; text-decoration: none;font-size:12px; }
a:active {  color: #ff0000; text-decoration: none;font-size:12px; }
</style>
<script>
function $(element){
return element = document.getElementById(element);
}
function $D(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h+=40; //设置层展开的速度
if(h>=maxh){
d.style.height='450px';
clearInterval(iIntervalId);
}else{
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h-=40;//设置层收缩的速度
if(h<=0){
d.style.display='none';
clearInterval(iIntervalId);
}else{
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $use(){
var d=$('class1content');
var sb=$('stateBut');
if(d.style.display=='none'){
$D();
sb.innerHTML='关闭菜单';
}else{
$D2();
sb.innerHTML='打开菜单';
}
}
</script>
</head>
<body >
<div id="light"  class="white_content" >
<div align="right"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="images/close01.jpg" border="0"></a></div>
 <div > <iframe src="tp.html" width="920" height="600" scrolling="auto" frameborder="0" style="overflow-x:hidden;overflow-y:scroll;"></iframe></div>
 </div>
 
<div id="fade" class="black_overlay" style="z-index:2;"></div>
<div class="class1">
<div style="float:left">
<div class="top_tp"></div>
<div id="class1content" class="middle_tp"> 
 test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br />
</div>
<div  class="but_tp" id="stateBut" onClick="$use()">关闭菜单</div>
</div>
<div style="float:left; width:90%"> 
 <div></div>
<div style=" margin-top:350px; align="center"> 
  </div></div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 caiying2007 于 2008-6-29 22:17 编辑 ]

TOP

ry99cn

中级会员

帖子: 104
体力: 213
威望: 0
当前: 广西南宁
离线: 5 天

专长 平面,PHP,UE

96^# 大中小发表于 2008-6-26 21:48

FF下没效果!!

永远dēˇｍ舞★ゞ

TOP

fanadu

新手上路

帖子: 9
体力: 22
威望: 0
当前: 山东青岛
离线: 14 天

97^# 大中小发表于 2008-6-27 14:11

都是高手啊。。。。。除了我之外。。
哎。。。。

TOP

qqhu

创想设计

高级会员

帖子: 344
体力: 591
威望: 0
当前: 北京海淀区
离线: 9 天

专长 网页设计,策划

98^# 大中小发表于 2008-6-27 14:30

不支持火狐？

笨鸟先飞素材网

TOP

kth007

初级会员

帖子: 27
体力: 62
威望: 0
离线: 1 天

99^# 大中小发表于 2008-6-29 22:04

jquery 默认支持呵呵！

TOP

jovijian

初级会员

帖子: 36
体力: 80
威望: 0
当前: 海南三亚
离线: 34 天

100^# 大中小发表于 2008-6-29 22:12

在FIREFOX下都不能正常运行！！！！！！

TOP

hotlover

初级会员

帖子: 95
体力: 151
威望: 0
当前: 河南洛阳

专长 网页设计,前端制作

101^# 大中小发表于 2008-6-29 22:22

把兼容IE FF 的代码都放在楼顶吧,要不好多好的东西就被埋没了!

TOP

hotlover

初级会员

帖子: 95
体力: 151
威望: 0
当前: 河南洛阳

专长 网页设计,前端制作

102^# 大中小发表于 2008-6-29 22:23

谢谢高手们的奉献!

TOP