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

2019/6/29 22:38:09

编程Tag： 鼠标经过预览大图

本文主要是介绍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实现鼠标经过图片预览大图效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章