【web前端设计】jquery图标动画特效

绚烂的萤火

983人浏览 · 2024-10-21 09:00:13

绚烂的萤火 · 2024-10-21 09:00:13 发布

学习目标

学习web前端设计技术（HTML、css、JavaScript、jQuery等），综合运用技术，将其与HTML元素结合，设计样式、监听事件、添加动画等，给用户呈现出更好的视觉交互效果。本文主要学习分页按钮自动放大、元素移入移出、自动轮播动画效果。

一、分页按钮自动放大效果

当鼠标悬停在某个图标上时，这个图标会自动变大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            float: left;
             /* 去除列表元素的样式 */
            list-style: none;
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
            margin: 10px;
             /* 居中显示 */
            text-align: center;
            line-height: 30px;
            /* 绘制正圆，设置鼠标悬停时的鼠标举手样式 */
            border-radius: 50%;
            cursor: pointer;
             /* 设置过渡效果*/
            transition: all .4s;
        }
        li:hover{
            /* 设置鼠标悬停时的效果，正圆半径放大 */
            transform:scale(1.2);
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

二、设置列表元素的移入移出效果

当鼠标悬停在某个/所有图标上时，方块先自动移出再移入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-migrate-1.9.1.min.js"></script>
    <style>
        /*设置所有元素样式*/
        *{
            margin: 0;
            padding:0
        }
        ul{
            list-style: none;
            width:400px;
            height:250px;
             /*设置黑色边框*/
            border: 1px solid black;
            margin:100px auto;

        }
        ul>li{
            width:100px;
            height:50px;
            text-align: center;
            float:left;
            margin-top: 50px;
            /* 隐藏超出的部分 */
            overflow: hidden;
        }
        ul>li>span{
            display: inline-block;
            width:24px;
            height: 24px;
            background-color: red;
             /*设置相对布局*/
            position: relative;

        }
      
        div>ul>li{
            margin: 0px;
            padding:0px;
            float: left;
            width: 300px;
            height: 161px;
        }
        img{
            width: 300px;
            height: 161px;
        }
    </style>
    <script>
	$(function(){
                //鼠标悬停效果
                $("li").mouseenter(function(){
                    $(this).children("span").stop();
                    $(this).children("span").animate({
                    //移出
                        top:-50
                    },1000,function(){
                        //移入
                        $(this).css("top","50px");
                        $(this).animate({top:0},1000)
                    })
                })
          	 autoPlay();
                //监听li的移入和移出
                $("div>ul>li").hover(function(){
                    // 停止滚动
                    clearInterval(timer);
                   
                },function(){
                    // 继续滚动
                    autoPlay();
                    
                })
                
            })
            </script>
</head>
<body>
    <ul>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>百度</p></li>
    </ul>
</body>
</html>

三、自动轮播动画效果

在容器内放置几张图片并为其添加动画，使其自动滚动播放轮播图。当鼠标悬停在某张图片上时，该图片悬停在容器中，同时轮播停止；移出图片时，轮播自动开始。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-migrate-1.9.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding:0
        }
        ul{
            list-style: none;
            width:400px;
            height:250px;
            border: 1px solid black;
            margin:100px auto;

        }
        ul>li{
            width:100px;
            height:50px;
            text-align: center;
            float:left;
            margin-top: 50px;
            /* 隐藏超出的部分 */
            overflow: hidden;
        }
        ul>li>span{
            display: inline-block;
            width:24px;
            height: 24px;
            background-color: red;
            position: relative;

        }
     /* 无限循环滚动图片 */
        div{
            height: 161px;
            width: 600px;
            border:1px solid black;
            margin:100px auto;
            overflow: hidden;
            background-color: black;
            
        }
        div>ul{
            margin: 0px;
            padding:0px;
            list-style: none;
            width: 1800px;
            height: 161px;
            background-color: black;
        }  
        div>ul>li{
            margin: 0px;
            padding:0px;
            float: left;
            width: 300px;
            height: 161px;
        }
        img{
            width: 300px;
            height: 161px;
        }
    </style>
    <script>
	$(function(){
                $("li").mouseenter(function(){
                    $(this).children("span").stop();
                   
                })
	  // 图片滚动章
                var offset=0;
                var timer;
                function autoPlay(){
                    timer=setInterval(function(){
                        offset+=-10;
                        if(offset<=-1200){
                         offset=0;
                        }
                        $("div>ul").css("marginLeft",offset)
                    },50);
                }
          	 autoPlay();
                //监听li的移入和移出
                $("div>ul>li").hover(function(){
                    // 停止滚动
                    clearInterval(timer);
                    //给非当前的图片添加蒙版
                    $(this).siblings().fadeTo(100,0.5);
                    //去除当前选中的蒙版
                    $(this).fadeTo(100,1);
                },function(){
                    // 继续滚动
                    autoPlay();
                    $("div>ul>li").fadeTo(100,1);
                })
                
            })
            </script>
</head>
<body>

    <div>
        <ul>
            <li><img src="img/1.jpg" width=300 height=161></li>
            <li><img src="img/2.jpg"></li>
            <li><img src="img/3.jpg"></li>
            <li><img src="img/4.jpg"></li>
            <li><img src="img/1.jpg" width=300 height=161></li>
            <li><img src="img/2.jpg"></li>
        </ul>
    </div>
</body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模