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

最新推荐文章于 2026-06-22 10:56:42 发布

原创最新推荐文章于 2026-06-22 10:56:42 发布 · 967 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

html 同时被 2 个专栏收录

6 篇文章

订阅专栏

css

3 篇文章

订阅专栏

本文介绍了使用CSS实现元素旋转效果的方法，并通过jQuery插件改进交互体验，避免鼠标离开后的重复旋转现象。

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