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 相关文章推荐
Jquery截取中文字符串的实现代码
Dec 22 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
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 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
node.js require() 源码解读
2015/12/13 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python 不同对象比较大小示例探讨
2014/08/21 Python
python字符串中的单双引
2017/02/16 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python3调用R的示例代码
2018/02/23 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python实现简单的文字识别
2018/11/27 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
python实现维吉尼亚加密法
2019/03/20 Python
python网络应用开发知识点浅析
2019/05/28 Python
python 常见的反爬虫策略
2020/09/27 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
研究生自我鉴定范文
2013/10/30 职场文书
兼职学生的自我评价
2013/11/24 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
房地产开发项目建议书
2014/05/16 职场文书
父亲节活动总结
2015/02/12 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript