前端学习笔记（2）——鼠标悬浮实现指定区块旋转指定角度

来源：互联网发布：mac maya5.0 编辑：程序博客网时间：2024/05/30 04:49

今天偶然发现了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不能重现。

0 0