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 相关文章推荐
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
Js经典案例的实例代码
May 10 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 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操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
提升Python程序运行效率的6个方法
2015/03/31 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python中的随机函数random的用法示例
2018/01/27 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
Python中常见的数制转换有哪些
2020/05/27 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
应聘自荐书
2013/10/08 职场文书
写给导师的自荐信
2015/03/06 职场文书
2016公司新年问候语
2015/11/11 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python