今天偶然发现了css的过渡样式,wscshool的案例中实现了div的增大和旋转。
刚好今天项目中有一个按钮周围有很多开口的圈,我想通过这个样式实现鼠标悬浮在链接上,实现圈的旋转
<style type="text/css">
#xuanzhuan:hover img{opacity: 1; transform:rotate(-360deg);}
</style>
<div style="max-height: 360px">
<img id="ljty"src="image/lijty.png" style="width:100%;vertical-align:bottom;position: absolute;>
<div id="xuanzhuan" style="height: 360px;padding-left: 750px">
<img class="pic1" src="image/xuanzhuan1.png" style="position: absolute;transition: transform 1s ease-out;">
<img class="pic2" src="image/xuanzhuan2.png" style="position: absolute;transition: transform 0.8s ease-out">
<img class="pic3" src="image/xuanzhuan3.png" style="position: absolute;transition: transform 0.4s ease-out">
<a style="position:absolute;padding-top: 145px;padding-left: 140px" >
<img src="image/tiyan.png" >
</a>
</div>
</div>
以上代码实现了旋转的功能,但是有一个缺陷是鼠标悬浮---实现旋转,鼠标离开——又旋转,挺影响美观的
于是我想通过js实现鼠标悬浮——旋转,鼠标离开——不旋转,去网上查了些资料,发现jquery.transit插件有这个功能。以下是我通过mouseover事件实现的功能
<div style="max-height: 360px">
<img id="ljty" src="image/lijty.png" style="width:100%;vertical-align:bottom;position: absolute">
<div id="xuanzhuan" style="height: 360px;padding-left: 750px">
<img id="pic1" src="image/xuanzhuan1.png" style="position: absolute;transition: transform 1s ease-out;">
<img id="pic2" src="image/xuanzhuan2.png" style="position: absolute;transition: transform 1s ease-out">
<img id="pic3" src="image/xuanzhuan3.png" style="position: absolute;transition: transform 1s ease-out">
<a class="tiyan" style="position:absolute;padding-top: 145px;padding-left: 140px;" href="">
<img src="image/tiyan.png" >
</a>
</div>
</div>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.transit.js" type="text/javascript"></script>
<script type="text/javascript">
$('.tiyan').bind("mouseover",function(){
$('#pic2').css({ rotate:'-360deg' });//最外圈顺时针旋转360度
$('#pic1').css({ rotate:'360deg' });//中层逆时针旋转360度
$('#pic3').css({ rotate:'360deg' });//里层顺时针旋转360度
});
</script>
但是这个也有一个缺陷,就是如果不重新加载页面,js不能重现。