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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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
提问的智慧
2006/10/09 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
iframe实用操作锦集
2014/04/22 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
浅谈js中的this问题
2017/08/31 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
python实现的简单窗口倒计时界面实例
2015/05/05 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python中functools模块的常用函数解析
2016/06/30 Python
python学生管理系统学习笔记
2019/03/19 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
python装饰器代替set get方法实例
2019/12/19 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
一年级家长会邀请函
2014/01/25 职场文书
安全标准化实施方案
2014/02/20 职场文书
大学生个人总结范文
2015/02/15 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL