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


Posted in Javascript onApril 10, 2014

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>宫??lt;/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实现鼠标经过图片预览大图效果
Javascript 相关文章推荐
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
浅谈javascript中的闭包
May 13 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
微信小程序选择图片控件
Jan 19 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 #Javascript
js获取视频时长代码
Apr 10 #Javascript
js转化毫秒为时间格式代码
Apr 10 #Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 #Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 #Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 #Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 #Javascript
You might like
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
通过cmd进入python的实例操作
2019/06/26 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
python如何控制进程或者线程的个数
2020/10/16 Python
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
护理专业学生职业生涯规划范文
2014/03/11 职场文书
安全生产标语
2014/06/06 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
医院营销工作计划
2015/01/16 职场文书
医学会议开幕词
2016/03/03 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL