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

1 .效果截图

2 .代码

！doctype html html ownerta charset=' utf-8 '标题www。jb51。net jQuery图片变换/title/headstyle type='text/css ' .显示{ width :330 pxh three : auto margin :50 px汽车；背景：#eee} .项目{ background: # fff宽度width :300 pxh three : autofloat 3360 leftmargin :15 px } p { padd :15 pxcolor : # ff 6600 } .大照片img { width:300px高度：300 pxborder:1px实心#e0e0e0} .des-small img { width :30 px；高度：30 pxborder:1px实心# e0e0e0}。des-small img :悬停{边框：1 px实线# ff 6600 } .clear { clear : both }/style script src=' http :3358 libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(function(){/* *)更换小图片*/$('.项目a ').hover(function(){ changeImg($(this))})；});功能更改img(obj){ if(obj。查找(' img ').attr(' alt ')==' small '){ var temp _ big _ src=obj。姐弟(' a ').find('img[alt=big]).attr(' src ')；var temp_big_url=obj。姐弟(' a[class=big-photo]).attr(' href ')；var temp _ small _ src=obj。查找(' img ').attr(' src ')；var temp _ small _ URL=obj。attr(' href ')；兄弟姐妹find('img[alt=big]).attr('src '，temp _ small _ src)；} }/脚本正文div class=' show ' pJquery实现鼠标移动/移过到商品小图片上时替换掉大图片上的图片/p div class=' item ' a class=' big-photo ' img src=' Http : WR _ 00001。jpg ' alt=' big '/a class=' des-small ' img src=' Http : WR _ 00002。jpg ' alt=' small '/a class=' des-small ' img src=' Http : WR _ 00003。jpg ' alt=' small '/a/a附：完整实例代码点击此处本站下载。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery动画与特效用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。