jQuery实现鼠标经过图片预览大图效果

133 阅读 0 评论 88 点赞

我是靠谱客的博主傻傻心情，最近开发中收集的这篇文章主要介绍jQuery实现鼠标经过图片预览大图效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery:是一种客户端的技术，它的诞生的理由是：write less,do more(写更少的代码，做更多的事情).

因此，我们可以借助jQuery来实现一些很酷炫的效果，相比于javaScript来说，同样的效果，但是很简单的代码。jQuery中的核心知识点就是选择器的使用，选择器的内容我会在之后的博客中总结，希望大家去看下，学好了选择我器，相当于完全掌握了jQuery。

这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的：当鼠标经过了图片数，图片会放大进行预览大图。接下来我就粘贴主要代码了哈：首先是$(function(){})中的代码

复制代码代码如下:

 
var x = 5; 
var y = 15; 
$("table tr td img").mousemove(function(e) { 
$("#imageTip").attr("src", this.src)//设置提示图片的路径 
.css({ 
"top" : (e.pageY + y) + "px", 
"left" : (e.pageX + x) + "px" 
}).show(3000);//显示图片 

}); 
$("table tr td img").mouseout(function(){ 
$("#imageTip").hide();//隐藏图片 

}); 

接下来页面布局代码：

复制代码代码如下:

 
<table border="1px"> 
<tr> 
<th>选项</th> 
<th>海报</th> 
<th>名称</th> 
</tr> 
<tr id="0"> 
<td><input type="checkbox" id="Checkbox1" value="0"></td> 
<td><img src="images/xiao01.jpg" alt=""></td> 
<td>杨幂</td> 
</tr> 
<tr id="1"> 
<td><input type="checkbox" id="Checkbox2" value="1"></td> 
<td><img src="images/xiao02.jpg" alt=""></td> 
<td>林萧</td> 
</tr> 
<tr id="0"> 
<td><input type="checkbox" id="Checkbox3" value="2"></td> 
<td><img src="images/xiao03.jpg" alt=""></td> 
<td>宫洺</td> 
</tr> 
</table> 
<table> 
<tr> 
<td style="text-align: left;height: 20px"><span><input 
type="checkbox" id="checkAll">全选</span> <span><input 
id="btnDel" type="button" value="删除"> </span> 
</td> 

</tr> 

</table> 
<img alt="" src="images/xiao01.jpg" class="clsImg" id="imageTip"> 

这里大家只要注意左后一行代码的写法。上面只是表格的布局。

接下来是css:

复制代码代码如下:

 
body { 
font-size: 12px; 
} 

table tr td img { 
border: soild 1px #666; 
width: 240px; 
height: 240px; 
padding: 3px; 
cursor: hand; 
} 

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