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; 
 
}

频道导航

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

您可能感兴趣的文章: