gridview图片预览功能

[ysh88gg]

gridview上已经能显示出图片，但我设的很小，（设的太大，gridview 就很难看）
我现在想增加个鼠标事件，当用户把鼠标移动到这个图片上的时候，就变大，离开时就还原
这个效果（前台）JS中怎么实现？

 <asp:TemplateField HeaderText="圖案依據">
                                    <ItemTemplate>   
                                          <div>                           
                                         <asp:Image ID="image" Height="30" Width="50" ImageUrl='<%#Eval("bugimage") %>' runat="server" AlternateText="預覽" />                                     
                                           </div>                    
                                         
                                     </ItemTemplate>
                                </asp:TemplateField>

[huangwenquan123]

$(document).ready(function(){
    $(".tip").hover(function(e){
        $("#box").css("display","block");
        $("#box").html("<img style=\"border:0px;width:300px;height:300px;\" src='http://192.168.0.80"+$(this).attr("tips")+"' />");
        e=e||window.event;
        var x = e.pageX;
        var y = e.pageY;
        var w = $("#box").width();
        var h = $("#box").height();
        var resultY = y+10+"px";
        if(y+h>$(window).height()){
            resultY = y-h-10+"px";
        }
        $("#box").css({"left":x,"top":resultY});
    },function(){
        $("#box").css("display","none");
    })
})

<div id="box" style="position:absolute;display:none;"></div>

[ysh88gg]

JQuery?我没？
要装啥东东？

[huangwenquan123]

下载一个jquery类库就可以！

[cdcdgo88]

http://docs.jquery.com/Downloading_jQuery jquery下載地址

[huangwenquan123]

http://www.javadn.com/read.php?tid-676.html

[ysh88gg]

和VS2005 fwork2.0兼容不

[ysh88gg]

下了，这东西怎么用，直接丢项目的目录下？

[ysh88gg]

不会JQuery，哪位达达说个简单点办法？

[leejelen]

你只要把jquery下下来。然后像引用其他JS文件那样引用。然后用上面那段代码，就可以拉-。-

[ysh88gg]

jquery-1.3.2.js是不是这样的

<script language="javascript" type="text/javascript" src="jquery-1.3.2.js">

这样？

[koukoujiayi]

直接js:
<asp:Image ID="image" Height="30" Width="50" ImageUrl='../../images/b1.jpg' runat="server" onmouseover="iOver(this)" onmouseout="iOut(this)" AlternateText="預覽" />

js:
<script type="text/javascript">
function iOver(obj) {
obj.style.width = 150;
obj.style.height = 100;
}
function iOut(obj) {
obj.style.width = 50;
obj.style.height = 30;
}
</script>

[ysh88gg]

问题补充：我的图片在GridView

<asp:GridView ID="GridView1" runat="server">
<Columns>
 <asp:TemplateField HeaderText="圖案依據">
   <ItemTemplate>   
     <div>                           
      <asp:Image ID="image" Height="30" Width="50" ImageUrl='<%#Eval("bugimage") %>' runat="server" AlternateText="預覽" />                                     
     </div>                    
                                         
   </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

[koukoujiayi]

<asp:Image ID="image" Height="30" Width="50" ImageUrl='<%#Eval("bugimage") %>' runat="server" onmouseover="iOver(this)" onmouseout="iOut(this)" AlternateText="預覽" />

[孟子E章]

无需什么jquery，很简单的东西。

[ysh88gg]

图片是变大了，但是很难看
整个gridview 都撑大了，能不能用另外个层来显示，像CSDN这样，鼠标移动到图像上，就跳出另个层显示相关的数据，它这个是怎么实现的，再麻烦次

[liwentongliunian]

hao