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

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

时间:2016-04-18 11:39:01      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:

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" ></td> 
<td>杨幂</td> 
</tr> 
<tr id="1"> 
<td><input type="checkbox" id="Checkbox2" value="1"></td> 
<td><img src="images/xiao02.jpg" ></td> 
<td>林萧</td> 
</tr> 
<tr id="0"> 
<td><input type="checkbox" id="Checkbox3" value="2"></td> 
<td><img src="images/xiao03.jpg" ></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 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实现鼠标经过图片预览大图效果

标签:

原文地址:http://www.cnblogs.com/zxtceq/p/5403480.html

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