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 相关文章推荐
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
js简单实现交换Li的值
May 22 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 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数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
小程序Request的另类用法详解
2019/08/09 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python算法学习之基数排序实例
2013/12/18 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python语言进阶知识点总结
2019/05/28 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Python中如何引入第三方模块
2020/05/27 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
python调用win32接口进行截图的示例
2020/11/11 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
营业员个人总结的自我评价
2013/10/25 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
文案策划专业自荐信
2014/07/07 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
如何Tomcat中使用ipv6地址
2022/05/06 Servers