jquery实现鼠标滑过小图时显示大图的方法


Posted in Javascript onJanuary 14, 2015

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

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title></title>

</head>

<style type="text/css">

li{list-style:none;float:left;margin-left:10px;}

</style>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

 var data = {

  "images/11_s.jpg":["images/11_b.jpg","美人1"],

  "images/22_s.jpg":["images/22_b.jpg","美人2"],

  "images/33_s.jpg":["images/33_b.jpg","美人3"],

  "images/44_s.jpg":["images/44_b.jpg","美人4"]

 };

 $(function(){

  $.each(data,function(key,value){

   //初始化最后一个div为隐藏

   $("div").last().hide();

   //创建小图的节点

   var smallPath = $("<img src='" + key + "' />").css({"margin":"5px","padding":"2px","border":"1px solid #000"});

   //设置大图地址和名称

   bigImgPath = smallPath.attr("bigMapPath",value[0]);

   bigImgName = smallPath.attr("bigMapName",value[1]);
   $("div").first().append(smallPath);
   //小图上添加事件

   smallPath.mouseover(function(){

    //最后一个div淡入效果

    $("div").last().fadeIn("fast");

    //获取大图地址

    $("#show").attr("src",$(this).attr("bigMapPath"));

    //获取大图名称并设置样式

    $("#imgTitle").text($(this).attr("bigMapName")).css({"background":"#ebf1de","padding":"10px","margin-bottom":"10px"});

   });

   smallPath.mouseout(function(){

    $("div").last().fadeOut("fast");

   });

  });

 });

</script>

<body>

<div></div>

<div>

 <img id="show" src="" />

</div>

</body>

</html>

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

Javascript 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
详解js加减乘除精确计算
Mar 19 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
js实现禁止中文输入的方法
Jan 14 #Javascript
JavaScript 学习笔记之语句
Jan 14 #Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 #Javascript
JavaScript 学习笔记之操作符
Jan 14 #Javascript
Node.js的包详细介绍
Jan 14 #Javascript
JavaScript 学习笔记之数据类型
Jan 14 #Javascript
ExpressJS入门实例
Jan 14 #Javascript
You might like
php 魔术函数使用说明
2010/02/21 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
高中同学聚会邀请函
2014/01/11 职场文书
回门宴父母答谢词
2014/01/26 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
运动会口号8字
2014/06/07 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2016十一国庆节感言
2015/12/09 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技