jquery 视觉特效(当鼠标悬停时,显示大图)
2012-11-21 19:24
501 查看
效果描述:
鼠标hover每个小图片上,相应的在ID为large处显示大图。并且伴有渐隐渐显的效果。
HTML:
CSS:
jquery:
也可以用animate
截图:
鼠标hover每个小图片上,相应的在ID为large处显示大图。并且伴有渐隐渐显的效果。
HTML:
<div id="images"> <a href="pic1.jpg"><img src="pic1.jpg" alt="" /></a> <a href="pic2.jpg"><img src="pic2.jpg" alt="" /></a> <a href="pic3.jpg"><img src="pic3.jpg" alt="" /></a> <a href="pic4.jpg"><img src="pic4.jpg" alt="" /></a> <a href="pic5.jpg"><img src="pic5.jpg" alt="" /></a> <a href="pic6.jpg"><img src="pic6.jpg" alt="" /></a> </div> <!--显示放大图片--> <div><img id="large" src="" alt=""/></div>
CSS:
#images a img{ border: 1px solid black; width: 50px; height: 50px; margin: 10px; }
jquery:
$('#images a').hover(function(){ $imgpath = $(this).attr('href'); $('#large').stop(true,true).fadeTo('normal', 0, function(){ $(this).attr('src', $imgpath); }).fadeTo('normal', 1); } );
也可以用animate
$('#images a').hover(function(){ $imgpath = $(this).attr('href'); $('#large').stop(true,true).animate({ 'opacity':'0' }, 'normal', function(){ $(this).attr('src', $imgpath); $(this).animate({ 'opacity':'1' }, 'normal'); }); } );
截图:
相关文章推荐
- jquery 视觉特效(鼠标悬停时依次显示图片)
- jquery特效--鼠标悬停显示提示信息
- jquery 视觉特效(当鼠标悬停时,放大小图片本身)
- jQuery css3鼠标悬停图片显示遮罩层动画特效
- jquery制作图标导航插件鼠标悬停放大显示特效代码
- jQuery css3鼠标悬停图片显示遮罩层动画特效
- jQuery 实现全选全不选,删除选中复选框所在行,鼠标悬停在图片上显示大图
- jQuery 仿淘宝 鼠标悬停显示大图效果
- jQuery 仿淘宝 鼠标悬停显示大图效果
- jQuery实现鼠标悬停显示提示信息窗口的方法
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
- [jquery实例] 鼠标悬停显示当前隐藏元素
- jQuery制作鼠标经过显示图片大图,生成图片tips效果
- jquery实现鼠标滑过小图时显示大图的方法
- jQuery实现鼠标悬停显示提示信息窗口的方法
- 分享一个jquery插件:实现类似淘宝上鼠标经过图片右侧显示大图的效果
- jquery悬停,鼠标移上去显示全部内容(包括多余隐藏内容)
- 图片上传生成缩略图,并使用JQuery实现鼠标移动到缩略图显示相应的大图的例子
- jquery特效---jquery显示缩略图,点击查看大图,并且大图可自适应原图大小