JS图片代码

求一段js代码！
当鼠标放在图片上图片变大
最好是有注释的代码 ？
我可以修改里面的参数
我要绑定的地方时
<asp:DataList id="dl_tupian" runat="server" RepeatColumns="6"><ItemTemplate>
                <table border="0" cellpadding="0" cellspacing="0" height="75" width="100">
                    <tr>
                        <td align="center">
                            <a href="chanpinlist.aspx?id=<%#Eval("id") %>"><img height="70" src="admin/Product/<%# DataBinder.Eval(Container.DataItem, "Product_picture").ToString()%>"  width="70" border=0/></a></td>
                        
                    </tr>
                </table>
            
</ItemTemplate>
</asp:DataList>

解决方案 »

  1.   

    http://www.azuresky.com.cn/read.php/78.htm第8项
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>jQZoom v2.0</title><script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.jqzoom.js"></script>
    <script type="text/javascript">$(document).ready(function(){
    $(".jqzoom").jqueryzoom({
    xzoom: 250, //zooming div default width(default width value is 200)
    yzoom: 250, //zooming div default width(default height value is 200)
    offset: 10, //zooming div default offset(default offset value is 10)
    position: "right" //zooming div position(default position value is "right")
    });
    });
    </script>
    <link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style/jqzoom.css" type="text/css" media="screen" />
    </head>
    <body>
    <div id="wrapper"> <div id="header">
    <a href="http://www.mind-projects.it"><img src="images/mylogo.jpg"></a><a href="" id="version"><h2>jQZoom  Version 2.0 </h2></a>
    </div> <div id="maincontent"> <p><h3 style='color:red;'>New Features</h3></p>

    <p><div><strong>1)A Zooming lens over the images</strong></div></p>
                            <p><div><strong>2)Big Images Preload on page load</strong></div></p>
    <p><div><strong>3)Seo improved</strong></div></p>
                            <h3>jQZoom allows you to realize a small magnifier window close to the image or images on your web page easily.</h3>
    I decided to build this jQuery plugin to embed detailed big images in my B2B.So now in few steps you can have your <strong>jQZoom</strong>
    in your website,eCommerce or whatever you want.<span style="float:left;color:#666666;width:100%;border-bottom:1px solid #333333;text-align:right;">Author: <strong><a href="mailto:[email protected]">Ing. Renzi Marco</a></strong>&nbsp;,December 2007</span><br><br> <p>1)Simply include the <i>jqzoom.css</i> in your page.</p> <span class="code">
    <xmp><link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen"></xmp></span> <p>2)Include jQzoom and jQuery code</p><br> <span class="code"><xmp><script type="text/javascript" src="your_path/jquery.js"></script>
    <script type="text/javascript" src="your_path/jquery.jqzoom.js"></script></xmp></span> <p>3)Now create a container(div is better!!) for the image or images you would like to zoom and assign to it the "<strong>jqzoom</strong>" class.Specify for each image,the <strong>jqimg</strong> attribute,to wich you are going to assign the big image path.</p> <span class="code">
    <xmp><div class="jqzoom"><img src="images/shoe4_small.jpg"  alt="shoe"  jqimg="images/shoe4_big.jpg"></div>
    </xmp></span> <p>4)Load the plugin at window load</p> <span class="code">
    <xmp>$(document).ready(function(){
    $(".jqzoom").jqueryzoom();
    });</xmp>
    </span> <p>You can also specify some <strong>options</strong>:</p>
    <span class="code">
    <xmp>$(document).ready(function(){
          $(".jqzoom").jqueryzoom({ xzoom: 300, //zooming div default width(default width value is 200)
    yzoom: 300, //zooming div default width(default height value is 200)
    offset: 40, //zooming div default offset(default offset value is 10)
    position: "right",  //zooming div position(default position value is "right")
                                                   preload: 1     // 1 by default
    });
    });</xmp>
    </span> <p>5)Sit and wait for people to tell you that what you have done is really cool!!!!:-)</p>

    <h3 style="float:left;clear:both;">Demo</h3>
    <p>Now move the mouse over the images.</p>
    <div style="float:left;width:100%;clear:both;">
    <div class="jqzoom"><img src="images/me_small.jpg"  alt="scarpa"  jqimg="images/me_big.jpg"></div>
                    
    <p><div class="jqzoom"  style='margin-right:5px;'><img src="images/shoe2_small.jpg"  alt="scarpa"  jqimg="images/shoe2_big.jpg"></div>
    <div class="jqzoom" style='margin-right:5px;' ><img src="images/shoe3_small.jpg"  alt="scarpa"  jqimg="images/shoe3_big.jpg"></div>
    <div class="jqzoom"><img src="images/shoe4_small.jpg"  alt="scarpa"  jqimg="images/shoe4_big.jpg"></div></p>
                    </div>
     <span style="float:left;width:100%;height:200px;">&nbsp;</span>
    </div>
    </div></body>
    </html>
      

  3.   


    body{
    text-align: center;
    font-family : Arial, Verdana, Lucida Sans, Helvetica, sans-serif;
    margin : 0px;
    padding : 0px;
    font-size: 12px;
    background: url(images/bg.jpg) top left repeat-x;
    }a{
    text-decoration: none;
    color:#0066CC;
    }img{
    border:0px;
    }h2{
    font-size:20px;
    }h3{
    font-size:13px;
    }div#wrapper{
    width : 970px;
    padding: 0px;
    margin:  0 auto;
    text-align: left;
    }div#header{
    width : 100%;
    clear : both;
    margin: 0 auto;
    height:117px;
    }div#header a{
    float:left;
    text-decoration:none;
    }div#header a#version{
    float:left;
    margin-left:10px;
    }
    div#maincontent{
    width : 970px;
    float: left;
    margin: 0px;
    padding: 5px;
    border:1px solid #EEEEEE;
    }div#maincontent p{
    float:left;
    width:970px;
    clear:both;
    margin-top:5px;
    margin-bottom:5px;
    padding:0px;}
    div#maincontent xmp{
    float:left;
    width:970px;
    clear:both;
    white-space: pre;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
    margin-top:5px;
    margin-bottom:5px;
    }span.code{
    float:left;
    border: 1px dotted #99CC00;
    background-color:#E6FF97;
    clear:both;
    width:970px;
    }span.tozoom{
    float:left;
    width:420px;
    margin:5px;
    }span.tozoom img{
    border: 1px solid #EEEEEE;
    }fieldset{
    float:left;
    clear:both;
    width:400px;
    padding:0px;
    margin-left:300px;
    border:1px solid #CCCCCC;}fieldset a{
    float:left;
    width:80px;
    }.jqzoom{
    border:1px solid #CCCCCC;
    float:left;
    position:relative;
    padding:0px;
    cursor:crosshair;
    }.jqzoom{
    float:left;
    }
    div.zoomdiv {
    z-index                 : 100;
    position                : absolute;
    top:0px;
    left:0px;
    width                   : 200px;
    height                  : 200px;
    background: #ffffff;
    border:1px solid #CCCCCC;
    display:none;
    text-align: center;
    overflow: hidden;
    }div.jqZoomPup {
    z-index                 : 10;
    visibility              : hidden;
    position                : absolute;
    top:0px;
    left:0px;
    /*width                   : 50px;height                  : 50px;
    */
    border: 1px solid #aaa;
    background: #ffffff url(../images/zoomlens.gif) 50% top  no-repeat;
    opacity: 0.3;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    filter: alpha(Opacity=30);
    }