澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

自动关闭,鼠标移到图片上变大显示而不是放大

ToopTip.js:

<html>
<head>
<style type="text/css">
#alertMsg {
display: none;
width: 400px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 1px 1px 10px black;
padding: 10px;
font-size: 12px;
position: absolute;
text-align: center;
background: #fff;
z-index: 100000;
}

本文转自:
MessageBox演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MessageBox演示</title>
<script language="javascript">
/*******************************************************************************************  
 *
 * Email:caoailin@gmail.com
 * QQ:38062022
 * Creation date: 2006-11-27
 * 下面的内容可以拷贝到一个JS文件里面
*********************************************************************************************/
// 控制按钮常量
var MB_OK = 0;
var MB_CANCEL = 1;
var MB_OKCANCEL = 2;
var MB_YES = 3;
var MB_NO = 4;
var MB_YESNO = 5;
var MB_YESNOCANCEL = 6;
// 控制按钮文本
var MB_OK_TEXT = "确定";
var MB_CANCEL_TEXT = "取消";
var MB_YES_TEXT = " 是 ";
var MB_NO_TEXT = " 否 ";
//提示图标
var MB_ICON = "";
//委托方法
var MB_OK_METHOD = null;
var MB_CANCEL_METHOD = null;
var MB_YES_METHOD = null;
var MB_NO_METHOD = null;
var MB_BACKCALL = null;
var MB_STR = '<style type="text/css"><!--'
   'body{margin:0px;}'
   '.msgbox_title{background-color: #B1CDF3;height:25px;position:relative;font-size:14px;line-height:25px;padding-left:10px;border-bottom:1px solid #000;}'
   '.msgbox_control{text-align:center;clear:both;height:28px;}'
   '.msgbox_button{background-color: #B1CDF3;border:1px solid #003366;font-size:12px;line-height:20px;height:21px;}'
   '.msgbox_content{padding:10px;float:left;line-height: 20px;}'
   '.msgbox_icon{width: 50px;height: 50px;float: left;text-align: center;line-height:50px;padding-top:10px;}'
   '.msgbox_mask{position:absolute;left:0px;top:0px;z-index:99999;background-color:#333333;width:100%;height:100%;}'

复制代码 代码如下:

#alertMsg_info {
padding: 2px 15px;
line-height: 1.6em;
text-align: left;
}

  •    '.msgbox{background-color: #EFFAFE;position: absolute;height:auto;font-size:12px;top:50%;left:50%;border:1px solid #999999;}'
       '--></style>'
       '<div id="msgBoxMask" class="msgbox_mask" style="filter: alpha(opacity=0);display:none;"></div>'
       '<div class="msgbox" style="display:none; z-index:100000;" id="msgBox">'
       '<div class="msgbox_title" id="msgBoxTitle"></div>'
       '<div class="msgbox_icon" id="msgBoxIcon"></div>'
       '<div class="msgbox_content" id="msgBoxContent"></div>'
  •    '<div class="msgbox_control" id="msgBoxControl"></div></div>';
    var Timer = null;
    document.write(MB_STR);
    var icon = new Image();
    icon.src = MB_ICON;
    /* 提示对话框
     * 参数 1 : 提示内容
     * 参数 2 : 提示标题
     * 参数 3 : 图标路径
     * 参数 4 : 按钮类型
    */
    function MessageBox(){
       var _content = arguments[0] || "这是一个对话框!";
       var _title   = arguments[1] || "提示";
       var _icon    = arguments[2] || MB_ICON;
       var _button  = arguments[3] || MB_OK;
       MB_BACKCALL  = arguments[4];
      
       var _iconStr = '<img src="{0}">';
       var _btnStr  = '<input name="{0}" id="{0}" type="button" class="msgbox_button" value="{1}" onclick="MBMethod(this)" />';
      
      
       switch(_button)
       {     
       case MB_CANCEL      : _btnStr = _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT); break;
     
       case MB_YES         : _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT); break;
      
       case MB_NO          : _btnStr = _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT); break;
      
       case MB_OKCANCEL    :
            _btnStr = _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT)
  • "  "
                    _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);
         break;
        
       case MB_YESNO       :
             _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) "  "
                    _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT);
          break;
      
       case MB_YESNOCANCEL :
             _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) "  "
                    _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT) "  "
           _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);
          break;
         
       default :  _btnStr = _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT);  break; 
      
       }
       //解决 FF 下会复位
       ScrollTop = GetBrowserDocument().scrollTop;
       ScrollLeft = GetBrowserDocument().scrollLeft;
       GetBrowserDocument().style.overflow = "hidden";
       GetBrowserDocument().scrollTop = ScrollTop;  
       GetBrowserDocument().scrollLeft = ScrollLeft;
         
       $("msgBoxTitle").innerHTML = _title;
       $("msgBoxIcon").innerHTML = _iconStr.toFormatString(_icon);
       $("msgBoxContent").innerHTML = _content;
       $("msgBoxControl").innerHTML =  _btnStr;
      
       OpacityValue = 0;
       $("msgBox").style.display = "";   
       try{$("msgBoxMask").filters("alpha").opacity = 0;}catch(e){};
       $("msgBoxMask").style.opacity = 0;
       $("msgBoxMask").style.display = "";
       $("msgBoxMask").style.height = GetBrowserDocument().scrollHeight "px";
       $("msgBoxMask").style.width = GetBrowserDocument().scrollWidth "px";
      
       Timer = setInterval("DoAlpha()",1);
       //设置位置  
       $("msgBox").style.width = "100%";  
       $("msgBox").style.width = ($("msgBoxIcon").offsetWidth $("msgBoxContent").offsetWidth 2) "px";
      
       $("msgBox").style.marginTop = (-$("msgBox").offsetHeight/2 GetBrowserDocument().scrollTop) "px";
       $("msgBox").style.marginLeft = (-$("msgBox").offsetWidth/2 GetBrowserDocument().scrollLeft) "px";  
      
       if(_button == MB_OK || _button == MB_OKCANCEL){
         $("msgBoxBtnOk").focus();
       }else if(_button == MB_YES || _button == MB_YESNO || _button == MB_YESNOCANCEL){
        $("msgBoxBtnYes").focus();
       } 
    }
    var OpacityValue = 0;
    var ScrollTop = 0;
    var ScrollLeft = 0;
    function GetBrowserDocument()
    {
       var _dcw = document.documentElement.clientHeight;
       var _dow = document.documentElement.offsetHeight;
       var _bcw = document.body.clientHeight;
       var _bow = document.body.offsetHeight;
      
       if(_dcw == 0) return document.body;
       if(_dcw == _dow) return document.documentElement;
      
       if(_bcw == _bow && _dcw != 0)
         return document.documentElement;
       else
         return document.body;
    }
    function SetOpacity(obj,opacity){
      if(opacity >=1 ) opacity = opacity / 100; 
       
      try{obj.style.opacity = opacity; }catch(e){}
      
      try{
       if(obj.filters){
        obj.filters("alpha").opacity = opacity * 100;
       }
       
      }catch(e){}
    }
     
    function DoAlpha(){
     if (OpacityValue > 20){clearInterval(Timer);return 0;}
     OpacityValue = 5; 
     SetOpacity($("msgBoxMask"),OpacityValue);
    }
    function MBMethod(obj)
    {  
       switch(obj.id)
       {
          case "msgBoxBtnOk" : if(MB_BACKCALL) {MB_BACKCALL(MB_OK);} else {if(MB_OK_METHOD) MB_OK_METHOD();} break;
       case "msgBoxBtnCancel" : if(MB_BACKCALL) {MB_BACKCALL(MB_CANCEL);} else {if(MB_CANCEL_METHOD) MB_CANCEL_METHOD();} break;
       case "msgBoxBtnYes" : if(MB_BACKCALL) {MB_BACKCALL(MB_YES);} else {if(MB_YES_METHOD) MB_YES_METHOD();} break;
       case "msgBoxBtnNo" : if(MB_BACKCALL) {MB_BACKCALL(MB_NO);} else {if(MB_NO_METHOD) MB_NO_METHOD();} break;
       }  
      
       MB_OK_METHOD = null;
       MB_CANCEL_METHOD = null;
       MB_YES_METHOD = null;
       MB_NO_METHOD = null;
       MB_BACKCALL = null;
      
       MB_OK_TEXT = "确定";
       MB_CANCEL_TEXT = "取消";
       MB_YES_TEXT = " 是 ";
       MB_NO_TEXT = " 否 ";
      
       $("msgBox").style.display = "none"; 
       $("msgBoxMask").style.display = "none";    
       GetBrowserDocument().style.overflow = "";
       GetBrowserDocument().scrollTop = ScrollTop;
       GetBrowserDocument().scrollLeft = ScrollLeft;
    }
    String.prototype.toFormatString = function(){ 
       var _str = this;
       for(var i = 0; i < arguments.length; i ){   
          _str = eval("_str.replace(/\{" i "\}/ig,'" arguments[i] "')");
       }
       return _str;
    }
    function $(obj){
       return document.getElementById(obj);
    }
    ///////////////////////////////////////////////////////////////////////////////////////
    </script>
    <script language="javascript">
    function test()
    {
       var _msg = "<font color=red><b>演示:</b></font><br/>普通对话框!";
       MessageBox(_msg);
    }
    function test1()
    {
      MB_OK_METHOD = function(){alert('你按了OK');}
      MB_YES_METHOD = function(){alert('你按了YES');}
      MB_NO_METHOD = function(){alert('你按了NO');}
      MB_CANCEL_METHOD = function(){alert('你按了CANCEL');}
     
      var _msg = "<font color=red><b>演示:</b></font><br/>调用对话框。是、否、取消";
      MessageBox(_msg,"演示",null,MB_YESNOCANCEL); 
    }
    function test2()
    {
      var _msg = "<font color=red><b>演示:</b></font><br/>调用对话框。是、否、取消";
      MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback);
    }
    function test4()
    {
      var _msg = "<font color=red><b>演示:</b></font><br/>调用对话框。确定、取消";
      MessageBox(_msg,"演示",MB_ICON,MB_OKCANCEL,callback);
    }
    function callback(value)
    {
      switch(value)
      {
         case MB_OK : alert('你按了OK'); break;
         case MB_YES : alert('你按了YES'); break;
         case MB_NO : alert('你按了NO'); break;
         case MB_CANCEL : alert('你按了CANCEL'); break;
       }
    }
    function test3()
    {
      MB_YES_TEXT = "演示一";
      MB_NO_TEXT = "演示二";
      MB_CANCEL_TEXT = "演示三";
      var _msg = "<font color=red><b>演示:</b></font><br/>这是自定义的对话框<br/> <font color=green>MB_YES_TEXT  MB_NO_TEXT MB_CANCEL_TEXT MB_OK_TEXT</font>";
      MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback);
    }
    </script>
    </head>
    <body>
    <table width="1500" height="1000" border="1" bordercolor="#000000">
      <tr>
        <td> </td>
        <td align="center"><a href="javascript:test()">普通演示</a></td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td align="center"><a href="javascript:test1()">回调演示一</a>
        <label></label></td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td align="center"><a href="javascript:test2()">回调演示二
         
        </a></td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td align="center"><a href="javascript:test4()">回调演示三</a><a href="javascript:test3()"></a></td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td align="center"><a href="javascript:test3()">自定义演示
         
        </a></td>
        <td> </td>
      </tr>
    </table>
    </body>
    </html>

function getViewportHeight() {
if (window.innerHeight!=window.undefined) return window.innerHeight;
if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
if (document.body) return document.body.clientHeight;

#alertMsg_btn1, #alertMsg_btn2 {
display: inline-block;
background: url(images/gray_btn.png) no-repeat left top;
padding-left: 3px;
color: #000000;
font-size: 12px;
text-decoration: none;
margin-right: 10px;
cursor: pointer;
}

return window.undefined;
}
function getViewportWidth() {
if (window.innerWidth!=window.undefined) return window.innerWidth;
if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth;
if (document.body) return document.body.clientWidth;

#alertMsg_btn1 cite, #alertMsg_btn2 cite {
line-height: 24px;
display: inline-block;
padding: 0 13px 0 10px;
background: url(images/gray_btn.png) no-repeat right top;
font-style: normal;
}
</style>
</head>
<body>
<script>
function alertMsg(msg, mode, hiddenTime) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮
msg = msg || '';
mode = mode || 0;
var top = document.body.scrollTop || document.documentElement.scrollTop;
var isIe = (document.all) ? true : false;
var isIE6 = isIe && !window.XMLHttpRequest;
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var winSize = function () {
var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight;
// innerHeight获取的是可视窗口的高度,IE不支持此属性
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

return window.undefined;
}

if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

/**
* Gets the real scroll top
*/
function getScrollTop() {
if (self.pageYOffset) // all except Explorer
{
return self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
return document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
return document.body.scrollTop;
}
}
function getScrollLeft() {
if (self.pageXOffset) // all except Explorer
{
return self.pageXOffset;
}
else if (document.documentElement && document.documentElement.scrollLeft)
// Explorer 6 Strict
{
return document.documentElement.scrollLeft;
}
else if (document.body) // all other Explorers
{
return document.body.scrollLeft;
}
}
/*
[html]
渐变的弹出图片
使用方法:
将ToolTip.js包含在网页body的结束标签后
调用方法:
[code]
<a href="pages.jpg" target='_blank' onMouseOver="toolTip('<img src=;')" onMouseOut="toolTip()"><img src='pages_small.jpg' border=0 width=30 height=20 align="absmiddle" title="点击看大图"></a>

// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

必须CSS样式

// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}

复制代码 代码如下:

return {
'pageWidth': pageWidth,
'pageHeight': pageHeight,
'windowWidth': windowWidth,
'windowHeight': windowHeight
}
}();
//alert(winSize.pageWidth);
//遮罩层
var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' winSize.pageWidth 'px;height:' (winSize.pageHeight 30) 'px;';
styleStr = (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩层DIV
var shadowDiv = document.createElement('div'); //添加阴影DIV
shadowDiv.style.cssText = styleStr; //添加样式
shadowDiv.id = "shadowDiv";
//如果是IE6则创建IFRAME遮罩SELECT
if (isIE6) {
var maskIframe = document.createElement('iframe');
maskIframe.style.cssText = 'width:' winSize.pageWidth 'px;height:' (winSize.pageHeight 30) 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);';
maskIframe.frameborder = 0;
maskIframe.src = "about:blank";
shadowDiv.appendChild(maskIframe);
}
document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩层加入文档
//弹出框
var styleStr1 = 'display:block;position:fixed;_position:absolute;left:'

.trans_msg
{
filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
}
*/
//--初始化变量--
var rT=true;//允许图像过渡
var bT=true;//允许图像淡入淡出
var tw=150;//提示框宽度
var endaction=false;//结束动画
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 10;
offsetY = 20;
var toolTipSTYLE="";
function initToolTips()
{
tempDiv = document.createElement("div");
tempDiv.id = "toolTipLayer";
tempDiv.style.position = "absolute";
tempDiv.style.display = "none";
document.body.appendChild(tempDiv);
if(ns4||ns6||ie4)
{
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE);
else
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg, fg, bg)
{
try {
if(toolTip.arguments.length < 1) // hide
{
if(ns4)
{
toolTipSTYLE.visibility = "hidden";
}
else
{
//--图象过渡,淡出处理--
if (!endaction) {toolTipSTYLE.display = "none";}
if (rT) document.all("msg1").filters[1].Apply();
if (bT) document.all("msg1").filters[2].Apply();
document.all("msg1").filters[0].opacity=0;
if (rT) document.all("msg1").filters[1].Play();
if (bT) document.all("msg1").filters[2].Play();
if (rT){
if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){
toolTipSTYLE.display = "none";}
}
if (bT){
if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){
toolTipSTYLE.display = "none";}
}
if (!rT && !bT) toolTipSTYLE.display = "none";
//----------------------
}
}
else // show
{
if(!fg) fg = "#777777";
if(!bg) bg = "#eeeeee";
var content =
'<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' fg '" class="trans_msg"><td>'

  • (winSize.windowWidth / 2 - 200) 'px;top:' (winSize.windowHeight / 2 - 150) 'px;_top:' (winSize.windowHeight / 2 top - 150) 'px;'; //弹出框的位置
    var alertBox = document.createElement('div');
    alertBox.id = 'alertMsg';
    alertBox.style.cssText = styleStr1;
    //创建弹出框里面的内容P标签
    var alertMsg_info = document.createElement('P');
    alertMsg_info.id = 'alertMsg_info';
    alertMsg_info.innerHTML = msg;
    alertBox.appendChild(alertMsg_info);
    //创建按钮
    var btn1 = document.createElement('a');
    btn1.id = 'alertMsg_btn1';
    btn1.href = 'javas' 'cript:void(0)';
    btn1.innerHTML = '<cite>确定</cite>';
    btn1.onclick = function () {
    document.body.removeChild(alertBox);
    document.body.removeChild(shadowDiv);
    return true;
    };
    alertBox.appendChild(btn1);
    if (mode === 1) {
    var btn2 = document.createElement('a');
    btn2.id = 'alertMsg_btn2';
    btn2.href = 'javas' 'cript:void(0)';
    btn2.innerHTML = '<cite>取消</cite>';
    btn2.onclick = function () {
    document.body.removeChild(alertBox);
    document.body.removeChild(shadowDiv);
    return false;
    };
    alertBox.appendChild(btn2);
    }
    document.body.appendChild(alertBox);
    if (hiddenTime) {
    setTimeout(btn1.onclick, hiddenTime * 1000)
    }
    }
    alertMsg("测试", 1, 5)//测试
    </script>
    </body>
    </html>

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:自动关闭,鼠标移到图片上变大显示而不是放大