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 键盘事件的使用方法详解
Sep 13 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
使用jQuery实现购物车
Oct 29 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
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
python数据爬下来保存的位置
2020/02/17 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
购房意向书范本
2014/04/01 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
小学工作总结2015
2015/05/04 职场文书
教师师德工作总结2015
2015/07/22 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书