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 相关文章推荐
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
javascript生成大小写字母
Jul 03 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
Python入门之modf()方法的使用
2015/05/15 Python
详解在Python中处理异常的教程
2015/05/24 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
优秀员工年终发言演讲稿
2014/01/01 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
Python实现列表拼接和去重的三种方式
2021/07/02 Python
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle