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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
js格式化时间的简单实例
Nov 27 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
js中的面向对象入门
Mar 06 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php GUID生成函数和类
2014/03/10 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
php多进程应用场景实例详解
2019/07/22 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
HTML5应用之文件上传
2016/12/30 HTML / CSS
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
公司建议书怎么写
2014/05/15 职场文书
大学生创业计划书
2014/08/14 职场文书
技术员个人工作总结
2015/03/03 职场文书
春节慰问简报
2015/07/21 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
初中语文教学研修日志
2015/11/13 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript