css代码:
<style type="text/css">
.enlarge_div{
width:640px; margin:100px auto;
}
.enlarge_ul{
list-style-type:none;
float:left;
}
.enlarge_ul li a{
display:block;
position:relative;
height:150px;
}
.enlarge_ul li img{
position:absolute;
left:0;
top:0;
height:140px;
width:140px;
border:solid 2px #DDDDDD
}
.enlarge_ul li img.on{
border:solid 4px #DDDDDD
}
</style>
jQuery代码:
<script type="text/javascript">
$(document).ready(function(){
$(".enlarge_ul > li > a").each(function(){
$(this).find('img').hover(
function(){
$(this).animate({
width:"280px",
height:"280px",
top:"-70px",
left:"-70px"
}, 200).addClass('on');
},
function(){
$(this).animate({
width:"140px",
height:"140px",
top:"0",
left:"0"
}, 200).removeClass('on');
}
);
$(this).hover(
function(){
$(this).css("z-index", 1);
},
function(){
$(this).css("z-index", 0);
});
});
});
</script>
html代码:
<div class="enlarge_div">
<ul class="enlarge_ul">
<li class="enlarge_li">
<a href="#">
<img src="/images/小鸟1.jpg"/>
</a>
</li>
<li class="enlarge_li">
<a href="#">
<img src="/images/小鸟2.jpg"/>
</a>
</li>
<li class="enlarge_li">
<a href="#">
<img src="/images/小鸟3.jpg"/>
</a>
</li>
<li class="enlarge_li">
<a href="#">
<img src="/images/小鸟4.jpg"/>
</a>
</li>
</ul>
</div>
分享到:
相关推荐
鼠标经过图片放大效果[放大镜]\鼠标经过图片放大效果[放大镜]
JS脚本特效,实现鼠标移动放大图片,类似于一个图片放大镜。当移动鼠标时,会在右侧缩略图中生成一个边框以确定放大位置,然后随着你的鼠标移动左侧经放大的图像显示出来,看上去很逼真。
jQuery实现鼠标经过图片放大特效是一款简单的带有实用性的Query实现鼠标经过图片放大特效。
JS+CSS鼠标经过放大图片(很酷).自己下载研究一下吧
Jquery相册鼠标经过放大图片插件实例源码,供大家一起参考学习。
jQuery插件鼠标经过图片放大预览 只要提供弹出层ID和预览图片结点集合
NULL 博文链接:https://chenshuai365-163-com.iteye.com/blog/734264
CSS3鼠标经过图片旋转放大特效是一款采用CSS3结合图片实现的鼠标悬停到图标上面旋转放大展示效果。
刚入行业下载的juqery特效。 很好的一个特效,图片放大
鼠标经过图片会放大图片 同时显示图片的代替文本alt属性值
类似于淘宝浏览商品,当鼠标悬停在图片时,图片会放大
鼠标滑过显示放大图片,自适应浏览器显示
Android图片浏览,图片放大缩小平移,使用多点触控和双击。 滚动,以平滑滚动甩。
鼠标点击图片、图片放大、自定义图片样式、图片居中显示
非常好用的CSS鼠标经过图片变大代码,可以好看,可以试着下载看看
jQuery实现鼠标经过图片放大特效是一款简单的带有实用性的Query实现鼠标经过图片放大特效。