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>
  • 相关阅读:
    iOS酷炫动画效果合集
    重载hash与isEqual:方法
    NSObject的hash方法
    带辉光效果的跑马灯
    线性重复动画
    TextKit简单示例
    计算一行文本的高度
    点击cell动态修改高度动画
    FastDFS图片服务器(分布式文件系统)学习。
    Caused by: java.lang.IllegalArgumentException: Could not resolve placeholder 'jdbc.username' in string value "${jdbc.username}"
  • 原文地址:https://www.cnblogs.com/subendong/p/2864898.html
Copyright © 2011-2022 走看看