zoukankan      html  css  js  c++  java
  • jquery鼠标键盘悬停事件,形变动画和淡入淡出

    鼠标和键盘悬停

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>鼠标悬停</title>
        <script type="text/javascript" src='./js/jquery.min.js'></script>
        <script type='text/javascript'> 
            $(function(){
                //监听鼠标悬停事件
                $("#b").mouseover(function(){
    
                    //用类选择器修改元素的样式
                    $(".c").css("background-color","pink")
                    $(".c").css("color","green")
                    $(".c").css("font-size","30px")
                })
            });
            // 用类选择器修改鼠标离开事件
            $(function(){
                //监听鼠标悬停事件
                $("#b").mouseout(function(){
    
                    //用类选择器修改元素的样式
                    $(".c").css("background-color","white")
                    $(".c").css("color","red")
                    $(".c").css("font-size","16px")
                })
            });
            // 用类选择器修改鼠标离开事件
            $(function(){
        
                $("#z").mouseover(function(){    
                    $("#z").css("background-color","pink")
                });
            });
    
        </script>
    
    </head>
    <body>
        <div class="c">风萧萧兮易水寒,壮士一去兮不复返</div><br/><br/>
        <input type="button" id="z" value="悬停变色"><br/><br/>
        <img id="b"  src="./img/微信图片_20181121185908.jpg" /><br/><br/>
    
    </body>
    </html>

    形变动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>animate 动画</title>
        <script type="text/javascript" src="./js/jquery.min.js"></script>
        <script type="text/javascript">
        //jquery单一入口
        
        $(function(){
            $("#b2").click(function(){
                //通过标签选择器来进行动画操作
                $("div").animate({
    
                    left:'400px',
                    '400px',
                    // margin:'200px'
                    height:'300px'        
                });
                $("div").animate({
    
                    left:'600px',
                        
                });
    
        });
    
        });
        </script>
    </head>
    <body>
    <!-- position: absolute  绝对定位 -->
        <div style='background-color:yellow;width :100px;height: 100px;position: absolute;'></div>  
        <br/><br/>
        <input style="margin-top:400px;" type="button" id="b2" value="开始动画"/>
    
        
    </body>
    </html>

    淡入淡出

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jquery的学习</title>
        <script type="text/javascript" src="./js/jquery.min.js"></script>
    
         <!-- jquery代码的入口,用来等待页面元素全部加载完成 -->
        <script type="text/javascript">
        
        $(function() {
            /*  用jquery选择器来选取某一个div的内容*/
            
            var coo=$("#b").html();
        
             var con= $(".a").val();
             alert(con)
            // jquery绑定点击事件 click 单击 hide 隐藏 参数单位是毫秒
            $(".a").click(function(){
                //隐藏div
                // $("#b").hide(3000);
                $("#b").fadeOut(3000); //慢慢消失 淡出
             });
            $(".a1").click(function(){
            
                $("#b").fadeIn(3000); //慢慢出来 淡入
             });
    
            $("#aa").click(function(){
                $("#b").fadeToggle(1000);
            });
    
        });
    
        </script>
    </head>
    <body>
        <div id="b">
     <img src="./img/微信图片_20181121185908.jpg"/>
    </div>
    <input id='b' type="text" width="200" value="默认显示" />
    <input class='a' type="button" value="滚蛋吧肿瘤君"/>
    <input class='a1' type="button" value="出来吧皮卡丘"/>
    <input id="aa" type="button" value="出来再进去">
    
    
    </body>
    </html>
  • 相关阅读:
    一文了解网络编程之走进TCP三次握手和HTTP那些你不知道的事
    并发编程面试必备之ConcurrentHashMap源码解析
    java延迟队列DelayQueue及底层优先队列PriorityQueue实现原理源码详解
    聊一聊面试中常问的延时队列
    面试必备HashMap源码解析
    synchronized解锁源码分析
    synchronized的jvm源码加锁流程分析聊锁的意义
    jvm源码解析java对象头
    从ReentrantLock源码入手看锁的实现
    从synchronized和lock区别入手聊聊java锁机制
  • 原文地址:https://www.cnblogs.com/sunzhiqi/p/10075452.html
Copyright © 2011-2022 走看看