asp.net 鼠标经过缩略图 显示完整图片
4个回答
展开全部
用 Javascript 或 jQuery 实现。
一、用asp.net把缩略图对应的图片url写到 缩略图的一个属性里，我一般写到 alt 或 title 属性里；
二、接下来要用 jQuery ，写一个隐藏的div，鼠标经过时，读取经过对象的属性，把这个url写到隐藏的层里，再移动层，显示层。
三、下面的代码，读取的是鼠标经过的图片的 src ，你稍微改下就能用了。
<!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>
<style type="text/css">
.product li{ float:left; list-style:none; }
.product li img{width:170px; height:140px; margin-left:10px; border:1px solid #000; }
</style>
</head>
<body>
<div class="product">
<ul>
<li><img src="product_files/1.jpg" ></li>
<li><img src="product_files/2.jpg" ></li>
<li><img src="product_files/3.jpg" ></li>
<li><img src="product_files/4.jpg" ></li>
</ul>
</div>
<div id="big" style="position: absolute; border: 1px solid rgb(0, 0, 0); left: 492px; top: 423px; display: none;"><img src="product_files/17.jpg"></div>
<script type="text/javascript" src="product_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//鼠标移上显示大图
$(".product li").mouseover(function(e){
//移动层
$("#big").css({"left":e.pageX , "top":e.pageY});
//层内显示图片
var imgsrc=$(this).find("img").attr("src");
$("#big").attr("innerHTML","<img src='"+ imgsrc +"'/>");
//显示层
$("#big").show();
});
//鼠标移开隐藏
$(".product li").mouseout(function(){$("#big").hide();});
})
</script></body></html>
一、用asp.net把缩略图对应的图片url写到 缩略图的一个属性里，我一般写到 alt 或 title 属性里；
二、接下来要用 jQuery ，写一个隐藏的div，鼠标经过时，读取经过对象的属性，把这个url写到隐藏的层里，再移动层，显示层。
三、下面的代码，读取的是鼠标经过的图片的 src ，你稍微改下就能用了。
<!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>
<style type="text/css">
.product li{ float:left; list-style:none; }
.product li img{width:170px; height:140px; margin-left:10px; border:1px solid #000; }
</style>
</head>
<body>
<div class="product">
<ul>
<li><img src="product_files/1.jpg" ></li>
<li><img src="product_files/2.jpg" ></li>
<li><img src="product_files/3.jpg" ></li>
<li><img src="product_files/4.jpg" ></li>
</ul>
</div>
<div id="big" style="position: absolute; border: 1px solid rgb(0, 0, 0); left: 492px; top: 423px; display: none;"><img src="product_files/17.jpg"></div>
<script type="text/javascript" src="product_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//鼠标移上显示大图
$(".product li").mouseover(function(e){
//移动层
$("#big").css({"left":e.pageX , "top":e.pageY});
//层内显示图片
var imgsrc=$(this).find("img").attr("src");
$("#big").attr("innerHTML","<img src='"+ imgsrc +"'/>");
//显示层
$("#big").show();
});
//鼠标移开隐藏
$(".product li").mouseout(function(){$("#big").hide();});
})
</script></body></html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
onmouseover时间和onmouseout事件
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你在百度里搜索：ImageZoom，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个我也不清楚，不过我在学习php
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
