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实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python多线程抽象编程模型详解
2019/03/20 Python
计算机专业毕业生的自我评价
2013/11/18 职场文书
职务聘任书范文
2014/03/29 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
走群众路线剖析材料
2014/10/09 职场文书
2014全年工作总结
2014/11/27 职场文书
逃课检讨书
2015/01/26 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS