mouse事件（demo：div块变大缩小）

小果浏览博客期间，发现一个很有意思的动画效果，实在喜欢，于是。。。

效果描述：

鼠标进入：div块缓慢变大，周围的div块随着变大，幅度稍小；

鼠标移出：div块缓慢收回，变回原大小；

效果图：

静态图

 

   鼠标进入第1个div块                      鼠标进入第3个div块                         

      

  鼠标进入第5个div块

 

代码实现：

css：

复制代码
<style>
            ul {
                height: 150px;
                width: 300px;
                background-color: black;
                list-style: none;
            }
            ul>li {
                height: 50px;
                width: 50px;
                margin-top: 80px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                float: left;
            }
            
            li:nth-of-type(1) {
                background-image: url(img/left.png);
            }
            
            li:nth-of-type(2) {
                background-image: url(img/right.png);
            }
            
            li:nth-of-type(3) {
                background-image: url(img/left.png);
            }
            
            li:nth-of-type(4) {
                background-image: url(img/right.png);
            }
            
            li:nth-of-type(5) {
                background-image: url(img/left.png);
            }
        </style>
复制代码

body：

?
1
2
3
4
5
6
7
8
9
10
11
<body>
    <div class="container-fluid">
        <ul class="row">
            <li class="col-md-2"></li>
            <li class="col-md-2"></li>
            <li class="col-md-2"></li>
            <li class="col-md-2"></li>
            <li class="col-md-2"></li>
        </ul>
    </div>
</body>

script:

复制代码
<script src="js/jQuery-1.12.4.min.js"></script>
    <script>
        $("ul li").mousemove(function(){
            $(this).stop().animate({
                width:'75px',
                height:'75px'
            },50);
            $(this).prev(1).stop().animate({
                width:'60px',
                height:'60px'
            },50);
            $(this).next(1).stop().animate({
                width:'60px',
                height:'60px'
            },50);
        })
        
        $("ul li").mouseout(function(){
            $(this).stop().animate({
                width:'50px',
                height:'50px'
            },20);
            $(this).prev(1).stop().animate({
                width:'50px',
                height:'50px'
            },20);
            $(this).next(1).stop().animate({
                width:'50px',
                height:'50px'
            },20);
        })
    </script>
复制代码

图片地址：

https://github.com/skyflyscroll/mouseImg.git

耗费精力+脑力两个晚上，实验了Tweenjs、tween.js、以及animation库，还是有好多bug，难以控制，小果最后选择了设定确定值进行动画。动画效果远远不及源页面动画的平滑度和既视感~~~~(>_<)~~~~

源网址：

http://www.linqing07.com/cheats.html#id=5

效果块：

希望各路大神指点迷津，带我飞！O(∩_∩)O

欢迎和小果交流，谢谢阅读。

 

posted @   猕猴桃姑娘  阅读(971)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
点击右上角即可分享
微信分享提示