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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
javascript修改图片src的方法
Jan 27 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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 syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python如何生成xml文件
2020/06/04 Python
python selenium 获取接口数据的实现
2020/12/07 Python
新浪网技术部笔试题
2016/08/26 面试题
数据管理员的自我评价分享
2013/11/15 职场文书
给交警的表扬信
2014/01/12 职场文书
监察建议书范文
2014/03/12 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python