图片显示

[麦子的春天到了]

我用GridView显示图片，能不能然鼠标移动到图片上自动显示出大图来！

[子夜__]

[Quote=引用 2 楼 hangtongilu 的回复:]

<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_imag……
[/Quote]
放大镜
jQuery放大镜

[chenbinqq164]

可以啊，<img onmouseover='此处为显示大图的方法'>

[porschev]

可以自己在旁边布局一个层。。。

里面可以放张大图，也可以在鼠标移上去时再加载这张图

鼠标移上去。。。层显示。。。

[麦子的春天到了]

<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
var ts = gg[i];
ts.onmousemove = function(event){
event = event || window.event;
ei.style.display = "block";
ei.innerHTML = '<img src="' + this.src + '" />';
ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function(){
ei.innerHTML = "";
ei.style.display = "none";
}
ts.onclick = function(){
window.open( this.src );
}
}
</script>


这个是显示图片的代码显示小图片，鼠标移动到上面自动显示大图片！

[xq870723]

在Gridview的具体项添加鼠标经过事件，传送图片地址，接着加个隐藏的层，用于显示前者的图片地址，只是这里的height和width大了些。

[麦子的春天到了]

谢谢各位！

[lifusong890910]

<td class="info1" > <a href="#"><%# Eval("Name") %></a>
<div style=" display:none; font-family:宋体; font-size:12pt; word-spacing:5px;">
<img src="<%# Eval("url")%>"/>
</div>
</td>

<script type="text/javascript" language="javascript">
$(function() {
$(".info1 img").hover(function() {
var left = parseFloat($(this).offset().left) + parseFloat($(this).width()) + 5;
var top = $(this).offset().top;
$("body").append("<img id=\"iz\" src=\"" + $(this).attr("src") + "\" style=\" position:absolute; left:" + left + "px; top:" + top + "px;\" />");
}, function() {
$("#iz").remove();
});

$(".info1 a").hover(function() {
var left = parseFloat($(this).offset().left);
var top = $(this).offset().top + 25;
$("body").append("<div id=\"iz2\" style=\" background:#fff; position:absolute; border:1px solid #ccc; width:200px; left:" + left + "px; top:" + top + "px;\" >" + $(this).parent().find("div").html() + "</div>");
}, function() {
$("#iz2").remove();
});
});</script>