无忧源码-网页特效 为广大网页制作爱好者提供学习、交流场所。在这里你可以找到背景特效、图象特效、时间日期特效、状态栏特效等各种网页特效。这些特效可以让你的网页变得更加美丽,从而吸引更多的网友访问你的网站。

网站首页 常用软件 站长工具 网页特效 网页配色 网页模板 背景音乐 杀毒频道 娱乐频道 访客留言
  特效分类

  点击排行 更多..
  不错的下拉菜单
  实用下拉导航条
  点击图片从而改变网页背景图..
  腾讯QQ网页在线客服,随网页..
  经典实用的触发型导航菜单
  超强论坛灌水工具---写大字板..
  腾讯QQ网页在线客服,隐藏在..
  通过滤镜实现的发光字体
  非常棒的绿色下拉透明菜单
  星星从背景中飞出
  页面内的超级酷浮动窗口
  Flash和JS实现的图片幻灯片切..


  推荐特效 更多..
  仿yahoo首页特色服务内容切换..
  可关闭并且能最大化的用层模..
  数字选中放大
  模仿3D的消息,太酷了!
  可以任意编辑的动态表格(特别..
  CSS超酷网页导航实例!网页导..
  效果直逼flash的css+div+js菜..
  网易娱乐头图新闻代码,推荐..
  类似与QQ的好友之类的树型菜..
  各种用途的按钮大集合
  用CSS设计的导航实例
  用CSS实现的一张图完成的导航..
您的位置:首页 >> 网页特效 >>  窗口特效 >  可关闭并且能最大化的用层模拟的网页浏览器视窗
可关闭并且能最大化的用层模拟的网页浏览器视窗
[ 发布:wuymadmin | 来源:本站整理 | 时间:2007-11-11 21:36:52 | 次 ]      [复制]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|www.wuym.com/Js---可关闭并且能最大化的用层模拟的网页浏览器视窗</title>
<style>
div,table,tr,td,a{font-size:12px};
</style>
<script language="JavaScript">
var x_open_path =""; //设置图标地址
</script>
<script language="JavaScript">
<!-- 
if(!x_open_path)
var x_open_path = '/js/img/'; 
var symbol_img = x_open_path + "symbol.gif";
var max_img = x_open_path + "max.gif";
var restore_img = x_open_path + "min.gif";
var close_img = x_open_path + "close.gif";
var help_img = x_open_path + "help.gif";
var title_img = x_open_path + "title.gif";
var bottom_img = x_open_path + "bottom.gif";
var intern_img = x_open_path + "intern.gif";
var grip_img = x_open_path + "grip.gif";
var forward_img = x_open_path + "forward.gif";
var back_img = x_open_path + "back.gif";
var border_img = x_open_path + "border.gif";
var loading_page = x_open_path + "loading.htm";

win_frame = "<div id='x_open_win' style='position:absolute;z-index:100; width: 420px; height: 350px ;left:10px;top:10px;font-size:12px; display:none ' onselectstart='return false'>\r\n";
win_frame += "<div>\r\n";
win_frame += "<table width='100%'  border='0' cellspacing='0' cellpadding='0'>\r\n";
win_frame += " <tr>\r\n";
win_frame += "  <td width='19'><img src='" + symbol_img + "' width='19' height='21' border='0'  title='重新载入当前网页' onclick='xopen_reload();'//></td>\r\n";
win_frame += "  <td width='5' style='background: url(" + title_img + "); padding:0px'></td><td style='background: url(" + title_img + "); padding:0px' onmousedown='initialize_drag(event)' ondblclick='maximize()'><font color='#333333'><div id='title_msg_layer'><strong>title</strong></div></font>\r\n";
win_frame += "  </td>\r\n";
win_frame += "  <td style='background: url(" + title_img + "); padding:0px' onmousedown='initialize_drag(event)' ondblclick='maximize()'></td>\r\n";
win_frame += " <td width='44' style='cursor:default; ' align='center'>";
win_frame += "<img src='" + help_img + "' width='12' height='21' border='0' onclick='xopen_about()' title='关于本程式' />";
win_frame += "<img src='" + max_img + "' id='max_button_name' onclick='maximize()' width='16' height='21' border='0' title='放大窗口' />";
win_frame += "<img src='" + close_img + "' onclick='closeit()' width='16' height='21' border='0' title='关闭窗口' />";
win_frame += "</td>\r\n";
win_frame += " </tr>\r\n";
win_frame += "</table>\r\n";
win_frame += "</div>\r\n";
win_frame += "<div id='x_open_content' align=center style='width:100%;  margin: 0px;background-color: #ffffff; MOZ-OPACITY:0.50;FILTER :  Alpha(opacity=100);'>\r\n";
win_frame += "<table style='width:100%; height:100%; margin: 0px;' border='0' cellpadding='0' cellspacing='0'>\r\n";
win_frame += " <tr>\r\n";
win_frame += "  <td width='1'><img src='" + border_img + "' id='border_img_name1' border='0' style='border:0px; width:1px; height:317px; margin: 0px;' /></td>\r\n";
win_frame += "  <td>\r\n";
win_frame += "  <iframe id='x_open_frame' name='x_open_frame' src='" + loading_page + "' frameborder=0 noresize style='width:100%; height:100%;background-color: #ffffff;color: #333;margin: 0px; padding: 0px;border:0px '></iframe>\r\n";
win_frame += "  </td>\r\n";
win_frame += "  <td width='1'><img src='" + border_img + "' id='border_img_name2' border='0' style='border:0px; width:1px; height:317px; margin: 0px;' /></td>\r\n";
win_frame += " </tr>\r\n";
win_frame += "</table>\r\n";
win_frame += "</div>\r\n";
win_frame += "<div align='center' style='width:100%;height:15px;background: url(" + bottom_img + ");' onselectstart='return false'>\r\n";
win_frame += "<table width='100%'  border='0' cellspacing='0' cellpadding='0'>\r\n";
win_frame += " <tr>\r\n";
win_frame += "  <td width='19'><img src='" + intern_img + "' width='28' height='15' border='0' /></td>\r\n";
win_frame += "   <td width='42'><img src='" + back_img + "' width='19' height='13' border='0' title='后退' onclick='xopen_back();'/><img src='" + forward_img + "' width='19' height='13' border='0'  title='前进' onclick='xopen_forward();'/></td>\r\n";
win_frame += "  <td><div id='size_info_layer'>&nbsp;</div></td>\r\n";
win_frame += "  <td>&nbsp;</td>\r\n";
win_frame += "  <td width='19'><img src='" + grip_img + "' width='19' height='15' border='0' style='cursor:nw-resize' title='改变窗口大小' onmousedown='return initialize_resize(event)' /></td>\r\n";
win_frame += " </tr>\r\n";
win_frame += "</table>\r\n";
win_frame += "</div>\r\n";
win_frame += "</div>\r\n";
win_frame += "<div id='x_open_win_border' style='position:absolute;z-index:100;width:0px;height:0px;display:none'></div>\r\n";
window.document.write(win_frame);

// obj
var x_open_win_id = document.getElementById("x_open_win");
var x_open_content_id = document.getElementById("x_open_content");
var title_msg_layer_id = document.getElementById("title_msg_layer");
var x_open_frame_id = document.getElementById("x_open_frame");
var max_button_name_id = document.getElementById("max_button_name");
var border_img_name1_id = document.getElementById("border_img_name1");
var border_img_name2_id = document.getElementById("border_img_name2");
var x_open_win_border_id = document.getElementById("x_open_win_border"); 
var size_info_layer_id =  document.getElementById("size_info_layer"); 

var dragapproved = false;
var dragresized = false;
var minrestore = 0;
var initialwidth, initialheight;
var x_open_ie5 = document.all && document.getElementById;
var x_open_ns6 = document.getElementById && !document.all;
var title_height = 36;
 
function x_open(title, url, width, height){
if (!x_open_ie5 && !x_open_ns6)
  window.open(url, "", "width=width,height=height,scrollbars=1");
 else{
  x_open_win_id.style.display = '';

  initialwidth = width;
  initialheight = height ;
  change_size(initialwidth, initialheight);
  x_open_win_id.style.left = "10px";
  x_open_win_id.style.top=x_open_ns6 ? window.pageYOffset * 1 + 10 + "px" : iecompattest().scrollTop * 1 + 10 + "px";
  x_open_frame_id.src = url;
  title_msg_layer_id.innerHTML = '<font color=#333333>' + title + '</font>';
 }
}

function iecompattest(){
 return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function xopen_about(){
 str = "算法之家(http://www.getcn.net)版权所有";
 alert(str);
}
function xopen_back(){
 x_open_frame.history.back();
}
function xopen_forward(){
 x_open_frame.history.go(1);
}
function xopen_reload(){
 x_open_frame.location.reload();
}
function closeit(){
 x_open_frame_id.src = loading_page;
 x_open_win_id.style.display = "none";
 return true;
}

 function maximize(){
 if (minrestore == 0){
  minrestore = 1; //maximize window
  max_button_name_id.setAttribute("src", restore_img);
  max_button_name_id.setAttribute("title", '还原窗口');
  w = x_open_ns6 ? window.innerWidth - 40 : iecompattest().clientWidth - 20;
  h = x_open_ns6 ? window.innerHeight - 40 : iecompattest().clientHeight - 20;
  change_size(w, h);
 }
 else{
  minrestore=0; //restore window
  max_button_name_id.setAttribute("src", max_img);
  max_button_name_id.setAttribute("title", '放大窗口');
  change_size(initialwidth, initialheight);
 }
 x_open_win_id.style.left = x_open_ns6 ? window.pageXOffset + 10 + "px" : iecompattest().scrollLeft + 10 + "px";
 x_open_win_id.style.top = x_open_ns6 ? window.pageYOffset + 10 + "px" : iecompattest().scrollTop + 10 + "px";
}

function change_size(w, h){
  if(w > 150 ) {
   x_open_win_id.style.width = w;
  }else{
   x_open_win_id.style.width = 150;
  }
  if(h > 0 ) {
   x_open_win_id.style.height = border_img_name1_id.style.height = border_img_name2_id.style.height = x_open_frame_id.style.height = h;
  }else{
   x_open_win_id.style.height = border_img_name1_id.style.height = border_img_name2_id.style.height = x_open_frame_id.style.height = 0;
   
  }
  size_info_layer_id.innerHTML = '<font style="font-size:11px;font-family:Courier New">size:' + remove_units(x_open_win_id.style.width) + 'x' + remove_units(x_open_win_id.style.height) + '</font>';
}
 
function remove_units(elem){
 return(parseInt(elem.replace(/px/g,"")));   
}
//<<<drag move

function initialize_drag(e){
 var evt = x_open_ns6 ? e : event;
 offsetx = evt.clientX;
 offsety = evt.clientY;
 tempx = parseInt(x_open_win_id.style.left);
 tempy = parseInt(x_open_win_id.style.top);

 dragapproved = true;
 //x_open_frame.style.display = 'none';
 x_open_frame_id.style.display = 'none';
 document.body.style.cursor = 'move';
 document.onmousemove = drag_drop;
 x_open_win_id.onmouseup = drag_drop_stop;
}

function drag_drop(e){
 if(dragapproved){
  var evt = x_open_ns6 ? e : event;
  x_open_win_id.style.left = tempx + evt.clientX - offsetx + "px";
  x_open_win_id.style.top = tempy + evt.clientY - offsety + "px";
 }
 return false;
}
function drag_drop_stop(e){
 dragapproved = false;
 //x_open_content_id.style.display = '';
 x_open_frame_id.style.display = '';
 document.body.style.cursor = 'default';
 document.onmousemove=null;
}
 
//>>>drag move

//resize===<<<
function initialize_resize(e){
 evt = x_open_ns6 ? e : event;
 x_open_win_border_id.style.left = x_open_win_id.style.left;
 x_open_win_border_id.style.top = x_open_win_id.style.top;
 x_open_win_border_id.style.width = x_open_win_id.style.width;
 x_open_win_border_id.style.height = x_open_win_id.style.height;
 click_x = evt.clientX;
 click_y = evt.clientY;
 evt_width = click_x - remove_units(x_open_win_id.style.left);
 evt_height = click_y - remove_units(x_open_win_id.style.top);
 dragresized = true;
 x_open_win_border_id.style.display = '';
 x_open_win_border_id.style.border='1px #808080 solid';
 
 document.body.style.cursor = 'nw-resize';
 document.onmousemove = drag_resize;
 document.onmouseup = drag_resize_stop;
 return false;
}
function drag_resize(e){
 if(dragresized){
  var evt = x_open_ns6 ? e : event;
  w = evt_width + (evt.clientX - click_x);
  h = evt_height + (evt.clientY - click_y);
  if(w > 0 ) {
   x_open_win_border_id.style.width = w;
  }
  if(h > 0 ) {
   x_open_win_border_id.style.height = h;
  }
 }
 document.body.style.cursor = 'nw-resize';
 return false;
}
function drag_resize_stop(e){
 dragresized=false;
 change_size(remove_units(x_open_win_border_id.style.width), remove_units(x_open_win_border_id.style.height));
 x_open_win_border_id.style.border='0px';
 x_open_win_border_id.style.display = 'none';
 document.body.style.cursor='default';
 document.onmousemove=null;
}
//resize===>>>
 
//-->
</script>
</head>
<body>
演示: <a href="javascript:x_open('google', 'http://www.google.com/',600,400)">打开 Google</a>
- <a href="javascript:x_open('网页特效酷', 'http://www.wuym.com/js',600,400)">打开网页特效酷'</a>
- <a href="javascript:x_open('无忧源码网', 'http://www.wuym.com/',500,350)">打开无忧源码网</a>
</body>
</html>


请将上面的代码复制到下面的文本框中进行预览     
         
上一个特效:数字选中放大
 特效: 可关闭并且能最大化的用层模拟的网页浏览器视窗 的评论   我要评论...
 
关于本站 | 广告合作 | 免责声明 | 网站帮助 | 网站地图  | 滇ICP备06001292号

Copyright ©2005 - 2008 wuym.com.All Rights Reserved.