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扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
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
Protoss魔法科技
2020/03/14 星际争霸
ajax php 实现写入数据库
2009/09/02 PHP
php字符串截取的简单方法
2013/07/04 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
非常实用的php验证码类
2016/05/15 PHP
php设计模式之单例模式代码
2016/06/11 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
vue实现简单的MVVM框架
2018/08/05 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Python中自定义函数的教程
2015/04/27 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
python实现泊松图像融合
2018/07/26 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python实现图片压缩代码实例
2019/08/12 Python
python递归下载文件夹下所有文件
2019/08/31 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
党员干部承诺书
2014/03/25 职场文书
二审答辩状范文
2015/05/22 职场文书
机械生产实习心得体会
2016/01/22 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android