本文实例讲述了jQuery实现鼠标滑过商品小图片上显示对应大图片功能。分享给大家供大家参考，具体如下：
1 . 效果截图
2 . 代码
<!doctype html><html><head><meta charset="utf-8"><title>www.jb51.net 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切换特效与技巧总结》、《jQuery动画与特效用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jQuery当鼠标悬停时放大图片的效果实例
- jquery实现鼠标拖动图片效果示例代码
- 基于jquery的滚动鼠标放大缩小图片效果
- Jquery实现鼠标移动放大图片功能实例
- jQuery实现的鼠标滑过弹出放大图片特效
- jQuery实现鼠标经过图片变亮其他变暗效果
- JQuery实现鼠标移动到图片上显示边框效果
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
- jQuery实现鼠标经过图片预览大图效果
- jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
- jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
- jQuery实现鼠标滑过图片移动特效
