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实现Sleep函数的代码
Mar 04 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
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/12/28 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
jQuery 插件开发指南
2014/11/14 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
详解JS函数防抖
2020/06/05 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
关于python的list相关知识(推荐)
2017/08/30 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
python加载自定义词典实例
2019/12/06 Python
pycharm永久激活超详细教程
2020/10/29 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
请说出几个常用的异常类
2013/01/08 面试题
介绍一下linux的文件权限
2014/07/20 面试题
绿色环保演讲稿
2014/05/10 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
北京爱情故事观后感
2015/06/12 职场文书
2019年教师入党申请书
2019/06/27 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏