JQuery动画总结和理解

原创 2018-11-10 19:46:41 1
摘要:<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <script src="前端课件/jQuery/jquery-3.3.1.min.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="前端课件/jQuery/jquery-3.3.1.min.js"></script>
    <style type="text/css">
       a{
           float: left;
           display: block;
           margin:50px;
           width: 100px;
           line-height: 100px;
           text-align: center;
        text-decoration: none;
        height: 100px;
        color: #fff;
        border-radius: 50px;
       }

    </style>
    <script type="text/javascript">
        function aa(tag){
           var len=document.getElementsByTagName(tag).length
           for(var i=0;i<len;i++){
               document.getElementsByTagName(tag)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'
           }
        }
        $(document).ready(function(){
            aa('a')
            $('a').mouseover(function(){
                $bg=$(this).css('backgroundColor')
                $(this).css('box-shadow','0px 0px 25px '+$bg)
                $(this).css('border-radius','20px')
            })
            $('a').mouseleave(function(){
                $(this).css('box-shadow','none')
                $(this).css('border-radius','50px')
            })
        })
    </script>
</head>
<body>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
</body>
</html>

本节课结合了javaScript和jQuery来实现动画效果,有案例学的还是比较好理解的,要自己想个动画效果还是很难的,没什么思路,只能多找点案例练练

批改老师:灭绝师太批改时间:2018-11-11 09:23:21
老师总结:前端没什么捷径,只能多多练习,写多了就可以熟能生巧哦

发布手记

热门词条