鼠标和键盘悬停

<!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',

                width:'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>

jquery鼠标键盘悬停事件，形变动画和淡入淡出的更多相关文章

  1. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  2. Android动画之淡入淡出

    为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见. 我们把当前要显示的View叫 ...

  3. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  4. JQuery动画之淡入淡出动画

    1. 淡入动画 1.1 不带参数的淡入动画 格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...

  5. jQuery-4.动画篇---淡入淡出效果

    jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...

  6. 今天依然是 JQ点击事件之“点击淡入淡出事件”

    废话不多说,先贴代码,再解释 <script> $(document).ready(function(){ $("button").click(function(){ ...

  7. Android 四种简单的动画（淡入淡出、旋转、移动、缩放效果）

    最近在Android开发当中,用到的动画效果. public void onClick(View arg0) { // TODO 自动生成的方法存根 switch (arg0.getId()) { c ...

  8. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

  9. Javascript-- jQuery动画篇(淡入淡出效果)

    淡入淡出效果 jQuery 提供了下面几种方法可以实现显示的淡入淡出效果: fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn()方法 fadeIn()实现 ...

随机推荐

  1. PL/SQL 找到某列都为空的列名

    DECLARE CURSOR temp IS SELECT COLUMN_NAME FROM ALL_TAB_COLUMNS WHERE TABLE_NAME=Upper('xxx'); v_num ...

  2. JS：递归基础及范例——斐波那契数列 、 杨辉三角

    定义:程序调用自身的编程技巧称为递归.一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就 ...

  3. oracle通用帮助类

    需要的dll( EntityFramework.6.0.0Oracle.ManagedDataAccess.12.1.2400System.Configuration.dllEmitMapper.1. ...

  4. git commit -m 和 git commit -am 区别

    git commit -m 和 git commit -am 通常修改一个文件 并且将文件提交到本地分支的命令是: git add . git commit -m 'update' 以上两个命令其实可 ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-info-sign

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. H5页面，百度地图点击事件

    需求:用户点击地图的时候获取地址街道,编码等详细信息. 然后看百度API文档,看到了click事件,关键时候还是需要看文档的. 实现 这样子虽然在浏览器的手机模拟器下是没有问题的 但是放在机器上测试的 ...

  7. UVA - 10635 Prince and Princess（LCS，可转化为LIS）

    题意:有两个长度分别为p+1和q+1的序列,每个序列中的各个元素互不相同,且都是1~n2的整数.两个序列的第一个元素均为1.求出A和B的最长公共子序列长度. 分析: A = {1,7,5,4,8,3, ...

  8. Python自学之路

    2020年春节,受新型冠状病毒影响,整个春节假期,全国人民都在恐慌之中,为了避免大家上班相互传染,公司号召国家政策,开始上班日期延迟,在家呆的实在太无聊,突然感觉自己不能浪费这美好的时光,决定学习Py ...

  9. (转)解决windows解决windows 7 部分程序图标显示不正常的问题

    刚解决计算机的管理选项打开出现问题,又发现系统里部分程序的快捷图标显示不出了, 曾在xp里也出现过同样的问题,常理推断,如果系统没有被病毒破坏那可能就是系统图标缓存出现问题 因此,双管齐下,一边检查系 ...

  10. 四十四、在SAP中冻结第一行表头

    一.表格数据量大了,如果需要界面滚动,则看不到第一行的表头文本 二.代码如下: 二.效果如下,任意滚动,表头还是被冻结可以看到