• 鼠标滑过,图片放大效果。


    <SCRIPT LANGUAGE="JavaScript">
    var offsetX=120;
    var offsetY=00;
    function Fpop()
    {
    var oImg =event.srcElement;
    var px =oImg.offsetLeft;
    var py =oImg.offsetTop;
    popDiv.innerHTML ="<img src=""+oImg.src+"" />"
    popDiv.style.left =px+offsetX;
    popDiv.style.top =py+offsetY;
    popDiv.style.display="";
    }
    function Fhidden()
    {
    popDiv.style.display="none";
    }
    </SCRIPT>
    <div id="popDiv" style="position:absolute;z-index:10;border:1px solid black;display:none;"></div>
    <img src="http://www.ddvip.com/images/logo1.gif" width="120" height="55" onmouseout="Fhidden()" onmouseover="Fpop()">
    <Img Src="http://www.ddvip.com/images/logo.gif" width=250hight=75 Border=0 onMouseOver='this.width=500' onMouseOut='this.width=250'>
    <Img Src="http://www.ddvip.com/images/logo.gif" width=125 Border=0 onMouseOver='this.width=this.width*2' onMouseOut='this.width=this.width/2'>
    上面这个太垃圾了,下面的比较好.
    <!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>无标题文档</title>
    </head>
    <body>
    <div id="a1" style=" position:absolute; z-index:2;"></div>
    <table width="200" border="1">
       <tr>
         <td>&nbsp;<img src="aa.gif" alt="a" onmousemove="show(event,'aa.gif','来电小精灵')" onmouseout="hide(this)" /></td>
         <td>&nbsp;<img src="aa.gif" alt="a" onmousemove="show(event,'aa.gif','aaa')" onmouseout="hide(this)" /></td>
       </tr>
       <tr>
         <td>&nbsp;<img src="aa.gif" alt="a" onmousemove="show(event,'aa.gif','bbb')" onmouseout="hide(this)" /></td>
         <td>&nbsp;<img src="aa.gif" alt="a" onmousemove="show(event,'aa.gif','ccc')" onmouseout="hide(this)" /></td>
       </tr>
       <tr>
         <td>&nbsp;<img src="aa.gif" alt="a" onmousemove="show(event,'aa.gif','dddd')" onmouseout="hide(this)" /></td>
         <td id="img1" >&nbsp;<img src="aa.gif" alt="a" border="0" onmousemove="show(event,'aa.gif','eeee')" onmouseout="hide(this)"/></td>
       </tr>
    </table>
    <script language="javascript">
    function show(event,_this,mess)
    {
        event = event || window.event;
        var t1="<table     cellspacing='1' cellpadding='10' style='border-color:#CCCCCC;background-color:#FFFFFF;font-size:12px;border-style:solid;    border-thin;text-align:center;'><tr><td><img src='" + _this   + "' width='300' height='225' >    <br>"+mess+"</td></tr></table>";
        document.getElementById("a1").innerHTML =t1;
        //document.getElementById("a1").innerHTML = "<img src='" + _this.src + "' >";
        document.getElementById("a1").style.top   = document.body.scrollTop + event.clientY + 10 + "px";
        document.getElementById("a1").style.left = document.body.scrollLeft + event.clientX + 10 + "px";
        document.getElementById("a1").style.display = "block";
    }
    function hide(_this)
    {
        document.getElementById("a1").innerHTML = "";
        document.getElementById("a1").style.display = "none";
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    【原】Ubuntu13.04安装、卸载Gnome3.8
    【原】安装、卸载、查看软件时常用的命令
    【原】中文Ubuntu主目录下的文档文件夹改回英文
    【原】Ubuntu ATI/Intel双显卡 驱动安装
    【转】Hadoop vs Spark性能对比
    【译】Spark调优
    【转】Spark源码分析之-scheduler模块
    【转】Spark源码分析之-deploy模块
    【转】Spark源码分析之-Storage模块
    【转】弹性分布式数据集:一种基于内存的集群计算的容错性抽象方法
  • 原文地址:https://www.cnblogs.com/subendong/p/2864898.html
Copyright © 2020-2023  润新知