码迷,mamicode.com
首页 > 移动开发 > 详细

鼠标移动到图片上时,显示大图片

时间:2014-05-07 20:36:33      阅读:436      评论:0      收藏:0      [点我收藏+]

标签:class   java   ext   width   javascript   c   

 

HTML标签中的一部分,仅供参考

<tr>
<td><input type="checkbox" class="checkbox1"/></td>
<td>1002</td>
<td>小猫咪</td>
<td><img src="img/02.jpg" height="100" width="100" /></td>               //图片
<td>200</td>
<td><input type="button" value="添加"/></td>
</tr>

 

<img id="imgTip" class="clsImg" src="img/04.jpg" />    //写在外面,隐藏显示,定位提示图片的位置

.clsImg{
position:absolute;
border:1px solid #ccc;
width:200px;
height:200px;
display:none;

}

JS部分实现功能:

<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){

 $("table tr:nth-child(odd)").css("background","#CCF");    //奇偶行变色

var x=5; var y=15;
$("table tr td img").mousemove(function(e) {
$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(600);
});

$("table tr td img").mouseout(function() {
$("#imgTip").hide();
});

 

/*复选框单机事件*/

$("#checkAll").click(function() {
if(this.checked){
$("table tr td input[type=checkbox]").attr("checked",true);
}else
{
$("table tr td input[type=checkbox]").attr("checked",false);
}
});



});
</script>

鼠标移动到图片上时,显示大图片,布布扣,bubuko.com

鼠标移动到图片上时,显示大图片

标签:class   java   ext   width   javascript   c   

原文地址:http://www.cnblogs.com/eyunhua/p/3714150.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!