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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
window.open()弹出居中的窗口
Feb 01 Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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生成zip压缩文件的方法详解
2013/06/09 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
Dojo 学习要点
2010/09/03 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
python格式化字符串实例总结
2014/09/28 Python
Python中title()方法的使用简介
2015/05/20 Python
Python中文字符串截取问题
2015/06/15 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
Python如何实现机器人聊天
2020/09/10 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
实习生个人找工作的自我评价
2013/10/30 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记