鼠标移出移入、 focus获取焦点和blur失去焦点的运用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标移出移入、 focus获取焦点和blur失去焦点的运用相关的知识,希望对你有一定的参考价值。

参考技术A <head>

<meta charset="UTF-8">

<title>无缝滚动</title>

<style type="text/css">

body,ul,limargin:0;padding:0

ullist-style:none;

.slide

width:500px;

height:100px;

border:1px solid #ddd;

margin:20px auto 0;

position:relative;

overflow:hidden;



.slide ul

position:absolute;/*相对于slide进行绝对定位*/

width:1000px;/*比slide宽度大一倍,做这种连续滚动效果的时候,要在后面把内容复制一份*/

height:100px;

left:0;/*可以改变该值让其动起来*/

top:0;



.slide ul li

width:90px;

height:90px;

margin:5px;

background-color:#ccc;

line-height:90px;

text-align: center;

font-size:30px;

float:left;



.btns

width:500px;

height:50px;

margin:10px auto 0;



</style>

<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(function()

var $ul = $('#slide ul');

var left = 0;

var deraction = 2;//每次滚动的距离

//内容为两套li

$ul.html($ul.html() + $ul.html());

//反复循环定时器,30ms动一下可以看起来比较平滑

var timer = setInterval(move, 30);

function move()

left -= deraction;

//当第2套li完全显示出来的时候,整个移回原点重新移动,实现向左连续滚动

if(left < -500)

left = 0;



//瞬间跳回,实现向右连续滚动

if(left > 0)

left = -500;



$ul.css(left: left);



$('#btn1').click(function()

deraction = 2;

);

$('#btn2').click(function()

deraction = -2;

);

$('#slide').mouseover(function()

clearInterval(timer);

);

$('#slide').mouseout(function()

timer = setInterval(move,30);

);

)

</script>

</head>

<body>

<div class="btns">

<input type="button" name="" value="向左" id="btn1">

<input type="button" name="" value="向右" id="btn2">

</div>

<div class="slide" id="slide">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

</div>

</body>

鼠标移入要做的事情mouseover

鼠标移出要做的事情mouseout

<head>

    <meta charset="UTF-8">

    <title>鼠标移入移出</title>

    <style type="text/css">

        .box

            width: 200px;

            height: 200px;

            background-color: gold;

            margin: 100px auto 0;

        

        .son

                width: 100px;

                height: 100px;

                background-color: green;

        

    </style>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

    <script type="text/javascript">

         $(function()

        /*进入子元素也触发*/

        /*$('#div1').mouseover(function()

        $(this).animate(marginTop: 50);//.stop()

        );

        $('#div1').mouseout(function()

        $(this).animate(marginTop: 100);//.stop()

    );*/

        /*进入子元素不触发*/

        /*$('#div1').mouseenter(function()

        $(this).stop().animate(marginTop: 50);//

        );

        $('#div1').mouseleave(function()

        $(this).stop().animate(marginTop: 100);//

        );*/

        /*通过hover(mouseenter+mouseleave)实现简写*/

        $('#div1').hover(function()

        $(this).stop().animate(marginTop: 50);

        , function()

        $(this).stop().animate(marginTop: 100);

            );

        )

    </script>

</head>

<body>

        <div id="div1" class="box">

                <div class="son"></div>

        </div>

</body>

创建一个子元素 促使鼠标移入到子元素才能移动

是由于时间mouse影响

则要使用mouseenter和mouseleave进行改变

也可以运用hover简化

autofocus

表单元素的值发生变化

<head>

                <meta charset="UTF-8">

                <title>input框事件</title>

                <style type="text/css">

                </style>

                <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

                <script type="text/javascript">

                     $(function()

                    // //一开始就获取焦点,相当于设置了autofocus自动获取焦点了(HTML5 新增表单控件属性)

                    // $('#txt01').focus();

                    // //文本框获取焦点的时候(有光标闪烁的时候)

                    // $('#txt01').focus(function()

                    // alert('focus');

                    // );

                    // //失去焦点的时候(光标离开的时候)

                    // $('#txt01').blur(function()

                    // alert('blur');

                    // );

                    // //输入框内容发生变化的时候,失去焦点后触发,可用于注册时验证用户名是否已存在

                    // $('#txt01').change(function()

                    // alert('change');

                    // );

                    //松开键盘按键就触发

                    $('#txt01').keyup(function()

                    alert('keyup');

                    );

                )

                </script>

</head>

<body>

        <input type="text" id="txt01">

</body>

<head>

            <meta charset="UTF-8">

            <title>jQuery其他事件</title>

            <style type="text/css">

            </style>

            <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

            <script type="text/javascript">

            // // JS原生写法

            // window.onload = function()

            //

            // / /jQuery写法,等同于上面写法

            // $(window).load(function()

            // )

            // //ready的写法

            // $(document).ready(function()

            // )

            // //ready的简写

            // $(function()

            // )

            // 窗口改变尺寸的时候,会高频触发

            $(window).resize(function()

            console.log('3');

            );

            </script>

</head>

<body>

            <div id="div1"></div>

</body>

鼠标移入要做的事情mouseover

鼠标移出要做的事情mouseout

jquery小知识

-jQuery的常用事件

click()   鼠标单击

mouseover() 鼠标进入

mouseout() 鼠标离开

hover(function(),function()) 鼠标持久悬放(函数1写鼠标移入的代码,函数2写鼠标移出的代码)

blur() 元素失去焦点

focus()元素获得焦点

1. 布局上,html中分上下两部分,上面是标题栏,提供给用户点击/鼠标悬放;下面是内容显示栏,里面由多个内容窗口,与标题的数量对应。
2. 批量获取标题栏中的标题,组成一个数组,并给每一个标题,批量绑定事件。
3. 每次用户点击不同的标题,根据标题的下标,控制显示对应序号的内容窗口。
   内容窗口的显示,可以通过left定位来实现,也可以通过display:none;来实现。

2. 对选择的元素进行基本的过滤操作

1.比如选择第一个元素
2.最后一个元素
3.下标为奇数或者偶数的元素
4.具体到哪一个元素,使用eq(n)
5.lt(n)表示选择小于n号索引的元素
6.gt(n)表示选择大于n号索引的元素
7.还可以设置为属性值不等于的情况

$(\'p:first\')
$(\'p:last\')
$(\'p:odd\');
$(\'p:even\')
$(li[data-li = single] > img).addClass(\'img-circle\');
$(li[data-li != single] > img).addClass(\'img-circle\');
$(li[data-lt ~= single])表示含有空格,且有singe属性的元素
无论什么符号分割开的,只要含有就行的,用*=
$= 表示以设置的字符结束的属性
^= 表示以设置的字符开始的属性
$(\'p:eq(1)\');   选择页面中的第二个P元素



 

以上是关于鼠标移出移入、 focus获取焦点和blur失去焦点的运用的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript焦点处理(获取焦点focus()失去焦点blur())

jquery失去焦点与获取焦点事件blur() focus()

DIV的失去焦点(blur)实现

jquery鼠标聚焦和失焦可以用哪个事件

JS—事件类型(焦点事件、鼠标事件(部分))

jquery事件以及监听动态节点事件