jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】


Posted in jQuery onApril 27, 2018

本文实例讲述了jQuery实现鼠标滑过商品小图片上显示对应大图片功能。分享给大家供大家参考,具体如下:

1 . 效果截图

jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】

2 . 代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3water.com jQuery图片变换</title>
</head>
<style type="text/css">
 .show{width:330px; height:auto; margin:50px auto; background:#eee}
 .item{background:#fff; width:300px; height:auto; float:left; margin:15px;}
 p{ padding:15px; color:#ff6600}
 .big-photo img{ width:300px; height:300px; border:1px solid #e0e0e0}
 .des-small img{ width:30px; height:30px;border:1px solid #e0e0e0; }
 .des-small img:hover{ border:1px solid #ff6600}
 .clear{clear:both}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function() {
  /** 更换小图片 */
  $(".item a").hover(function(){
   changeImg($(this))
  }); 
 });
 function changeImg(obj){
  if(obj.find("img").attr("alt")=="small"){
   var temp_big_src = obj.siblings('a').find('img[alt=big]').attr('src');
   var temp_big_url = obj.siblings('a[class=big-photo]').attr('href');
   var temp_small_src = obj.find('img').attr('src');
   var temp_small_url = obj.attr('href');
   obj.siblings('a').find('img[alt=big]').attr('src',temp_small_src);
  }
 }
</script>
<body>
 <div class="show">
  <p>Jquery实现鼠标移动/移过到商品小图片上时替换掉大图片上的图片</p>
  <div class="item">
   <a class="big-photo">
    <img src="WR_00001.jpg" alt="big"/>
   </a>
   <a class="des-small">
    <img src="WR_00002.jpg" alt="small"/>
   </a>
   <a class="des-small">
    <img src="WR_00003.jpg" alt="small"/>
   </a>
   <a class="des-small">
    <img src="WR_00004.jpg" alt="small"/>
   </a>
  </div>
  <div class="clear"></div>
 </div>
</body>
</html>
jQuery 相关文章推荐
关于jQuery库冲突的完美解决办法
May 20 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 #jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 #jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 #jQuery
jQuery length 和 size()区别总结
Apr 26 #jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 #jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 #jQuery
You might like
用Zend Encode编写开发PHP程序
2006/10/09 PHP
php SQL之where语句生成器
2009/03/24 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
python图像处理之镜像实现方法
2015/05/30 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
盛大二次面试题
2016/11/18 面试题
餐饮业会计岗位职责
2013/12/19 职场文书
四个太阳教学反思
2014/02/01 职场文书
法律进机关实施方案
2014/03/12 职场文书
质量保证书格式模板
2015/02/27 职场文书
遗嘱范文
2015/08/07 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
导游词之台湾阿里山
2019/10/23 职场文书