彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 新闻动态 > jQuery实现感应鼠标动画效果自动伸长的输入框实

jQuery实现感应鼠标动画效果自动伸长的输入框实

发布时间:2019-08-31 06:26编辑:新闻动态浏览(59)

    jQuery实现感应鼠标动画效果自动伸长的输入框实例,jquery感应

    本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框。分享给大家供大家参考。具体实现方法如下:

    复制代码 代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns=";
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery实现感应鼠标动画效果自动伸长的输入框</title>
    <script type="text/javascript" src="/images/jquery-1.4.2.min.js"></script>
    <style type="text/css">
    body
    {
    margin:0; padding:0; font-size:12px;
    }
    a:link {
    color:#1553a9; text-decoration: none;
    }
    a:visited {
    text-decoration:none; color: #1553a9;
    }
    a:hover {
    text-decoration:none; color: #f46662;
    }
    a:active {
    text-decoration: none; color:#f46662;
    }
    #main
    {
    width:500px; margin:0 auto; margin-top:100px;
    }

    #de
    {
    display:block;width:100px; height:30px; line-height:30px; float:right; border:#b7b7b7 1px solid; padding-left:5px; border-right:0;
    }
    #go
    {
    width:30px; float:right;height:22px; border:#b7b7b7 1px solid; border-left:0; padding-top:10px; padding-left:15px; background-color:#464646; cursor:pointer; color:#FFFFFF;
    }
    </style>
    <script type="text/javascript">
    $(function(){

    $("#de").mouseover(function(){
     $("#de").animate({"width":"250px"});
    }).mouseout(function(){
     $("#de").animate({"width":"100px"});
    });
    });
    </script>
    </head>
    <body>
    <div id="main">
    <div id="ss"><div id="go">→</div><input type="text" id="de"/></div>
    </div>
    </body>
    </html>

    希望本文所述对大家的jQuery程序设计有所帮助。

    本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框。分享给大家供...

    本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框。分享给大家供大家参考。具体实现方法如下:

    复制代码 代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns=";
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery实现感应鼠标动画效果自动伸长的输入框</title>
    <script type="text/javascript" src="/images/jquery-1.4.2.min.js"></script>
    <style type="text/css">
    body
    {
    margin:0; padding:0; font-size:12px;
    }
    a:link {
    color:#1553a9; text-decoration: none;
    }
    a:visited {
    text-decoration:none; color: #1553a9;
    }
    a:hover {
    text-decoration:none; color: #f46662;
    }
    a:active {
    text-decoration: none; color:#f46662;
    }
    #main
    {
    width:500px; margin:0 auto; margin-top:100px;
    }

    #de
    {
    display:block;width:100px; height:30px; line-height:30px; float:right; border:#b7b7b7 1px solid; padding-left:5px; border-right:0;
    }
    #go
    {
    width:30px; float:right;height:22px; border:#b7b7b7 1px solid; border-left:0; padding-top:10px; padding-left:15px; background-color:#464646; cursor:pointer; color:#FFFFFF;
    }
    </style>
    <script type="text/javascript">
    $(function(){

    本文由彩世界平台发布于新闻动态,转载请注明出处:jQuery实现感应鼠标动画效果自动伸长的输入框实

    关键词: