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 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
javascript if条件判断方法小结
May 17 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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 批量删除数据的方法分析
2009/10/30 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
php实现的http请求封装示例
2016/11/08 PHP
用js来解决ajax读取页面乱码
2010/11/28 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
JS实现简易日历效果
2021/01/25 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python爬虫---requests库的用法详解
2020/09/28 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
资料员的岗位职责
2013/11/20 职场文书
擅自离岗检讨书
2014/09/12 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Python基础之常用库常用方法整理
2021/04/30 Python
Go语言编译原理之变量捕获
2022/08/05 Golang