搜索框可以左右伸缩的滑动效果 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>可以左右伸缩的搜索框</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .box{
            width:100%;
            height:auto;
            overflow:hidden;
            background-color: #83c1ad;
            padding-top:10px;
            padding-bottom:10px;
        }
        .box .left{
            width:auto;
            height:auto;
            overflow:hidden;
            margin-left:50px;
            float:left;
        }
        .box .left img{
            display:block;
            float:left;
            width:30px;
            height:30px;
        }
        .box .left span{
            display:block;
            float:left;
            margin-top:7px;
            margin-left:5px;
        }
        .box ul{
            margin-left:15%;
            float:left;
            margin-top:8px;
        }
        .box ul li{
            list-style-type:none;
            display:inline-block;
            margin-left:20px;
        }
        .box ul li a{
            text-decoration:none;
            text-align:center;
            font-size:15px;
            color:#269abc;
        }
        .box .right{
            width:auto;
            height:auto;
            float:right;
            overflow:hidden;
            margin-right:40px;
        }
        .box .right img{
            width:25px;
            height:25px;
            display:block;
            margin-top:3px;
            float:left;
        }
        .box .right input{
            width:300px;
            height:30px;
            float:left;
            text-indent:1em;    /*缩进一个字符*/
            opacity:0.5;
            border-radius:15px;
            border:none;    /*去掉文本输入框自带的边框*/
            outline:medium; /*点击输入框时，取消外面的矩形边框*/
            margin-right:5px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left">
        <img src="../images/006.png" alt="#">
        <span>美丽网</span>
    </div>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">爆料</a></li>
        <li><a href="#">图库</a></li>
        <li><a href="#">音乐</a></li>
        <li><a href="#">微博</a></li>
        <li><a href="#">地图</a></li>
    </ul>
    <div class="right">
        <input type="search" placeholder="请输入产品名称" id="text" >
        <img src="../images/Search.png" alt="#" id="search">
    </div>
</div>

<script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
    window.onload = function(){
        $("#search").click(function(){
            $("#text").animate({
                width:'toggle'
            },800);
        });
    };
</script>
</body>
</html>

　　

 

显示效果：

 

posted on 2015-12-02 22:32  冬刻忆  阅读(116)  评论(0)    收藏  举报