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控制字体大小的代码
Oct 04 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
js实现图片无缝滚动
Dec 23 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 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 PDO函数库详解
2010/04/27 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
php命令行模式代码实例详解
2021/02/26 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
使用python实现BLAST
2018/02/12 Python
python基于SMTP协议发送邮件
2019/05/31 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
几道PHP面试题
2013/04/14 面试题
财务经理的岗位职责
2013/12/17 职场文书
大学军训感言1000字
2014/02/25 职场文书
践行三严三实心得体会
2014/10/13 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
15个值得收藏的JavaScript函数
2021/09/15 Javascript
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server