jquery实现鼠标滑过小图查看大图的方法


Posted in Javascript onJuly 20, 2015

本文实例讲述了jquery实现鼠标滑过小图查看大图的方法。分享给大家供大家参考。具体实现方法如下:

1. CSS部分:

<style type="text/css">
ul{
  list-style:none;
}
li{
  float:left;
  margin-left:10px;
}
img{
  border:#CCCCCC solid 1px;
}
#max{
  position:absolute;
  display:none; /*隐藏层*/
}
</style>

2. HTML部分:

苹果产品列表:
<ul>
<li><a href="images/apple_1_bigger.jpg"><img src="images/apple_1.jpg" /></a>
<li><a href="images/apple_2_bigger.jpg"><img src="images/apple_2.jpg" /></a>
<li><a href="images/apple_3_bigger.jpg"><img src="images/apple_3.jpg" /></a>
<li><a href="images/apple_4_bigger.jpg"><img src="images/apple_4.jpg" /></a>
</ul>

3. javascript部分:

<script>
$(document).ready(function(){
  //e 事件对象,可以通过该事件对象获取事件的参数 e.pageX - X轴,距浏览器的左边的距离 e.pageY - y轴,距浏览器的顶端的距离 
  $("a").mouseover(function(e){
  //鼠标移上去 向body追加大图元素
    //大图的路径:当前连接的href属性值为大图的路径
    var $imgSrc = $(this).attr("href");
    var $maxImg ="<div id='max'><img src='"+$imgSrc+"'></div>";
    //在body中添加元素
    $("body").append($maxImg);
    //设置层的top和left坐标,并动画显示层
    $("#max").css("top", e.pageY+20).css("left",e.pageX+10).show('slow'); 
  }).mouseout(function(){
  //鼠标移开删除大图所在的层
    $("#max").remove();
  }).mousemove(function(e){
  //鼠标移动时改变大图所在的层的坐标
    $("#max").css("top", e.pageY+20).css("left",e.pageX+10);
  });
});
</script>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jquery 简单的进度条实现代码
Mar 11 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
js实现简单的打印表格
Jan 15 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 #Javascript
SWFObject基本用法实例分析
Jul 20 #Javascript
jQuery.prop() 使用详解
Jul 19 #Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 #Javascript
jQuery的position()方法详解
Jul 19 #Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 #Javascript
javascript中mouseover、mouseout使用详解
Jul 19 #Javascript
You might like
php json_encode奇怪问题说明
2011/09/27 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Numpy之reshape()使用详解
2019/12/26 Python
python中如何使用insert函数
2020/01/09 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
企业为何需要商业计划书
2013/12/26 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
法律进机关实施方案
2014/03/12 职场文书
教师自我鉴定范文
2014/03/20 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
python中 Flask Web 表单的使用方法
2022/05/20 Python