zoukankan      html  css  js  c++  java
  • 鼠标滑过,图片放大效果。

    <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>
  • 相关阅读:
    JavaScript箭头函数 和 generator
    JavaScript闭包
    JavaScript高阶函数 map reduce filter sort
    JavaScript函数定义和调用 变量作用域
    python实现遗传算法求函数最大值(人工智能作业)
    PAT 1003
    制作U盘启动盘之后的恢复
    异步IO
    CCF201703-3 Markdown
    SQLAlchemy
  • 原文地址:https://www.cnblogs.com/subendong/p/2864898.html
Copyright © 2011-2022 走看看