html/css/js/jq能实现的一些效果（一）

下面为利用html+css+JavaScript+jquery能够实现的一些效果的整理。本篇实现前6种效果，全部效果拼成一个搜索主页。全部的目录：

• 同一行最左边和最右边各有文字
• 移到文本框上，默认文字消失，反之出现
• 自动均分元素实现图表
• 点击按钮显示图表，再点一次隐藏
• 实现“关于我们 | 联系我们 | 版权声明”的排版
• 滚动条拉到一定高度出现回到顶部方框，点击回到顶部
• 移到图片上，图片变淡，下方形容图片的文字弹出
• 实现验证码表单
• 实现对话框
• 实现钱币和花形状
• 实现一条弧线
• 两列自适应

1. 同一行最左边和最右边各有文字

实现效果：

CSS代码：关键是设<div>和<span>的父相对子绝对的关系
也可以两块都float:left，然后再设置margin-left。

		 #header{
            position:relative;
            width:100%;
            height:25px;
            background-color: gray;
            color:white;
            border-radius:5px;
        }
        #header span:first-child{
            float:left;
        }
        #header span:nth-child(2){
            float:right;
            position:absolute;
            right:5px;
        }

HTML代码：
<div id="header"><span>苏州 换肤 消息 显示消息</span><span>新闻 hao123 视频 地图 贴吧</span></div>

2.移到文本框上，默认文字消失，反之出现

实现效果：

JS代码：
主要看会不会用Hover。

 $(function(){
        var str = $("#txt").val();
        $("#txt").hover(function(){
            if($(this).val() == str){
                $(this).val("");
            }
        },function(){
            if($(this).val() == ""){
                $(this).val(str);
            }
        })

    })

在CSS代码中，用相对和绝对、负margin技术令这片区域水平以及垂直居中：

 		#main{
            position:relative;
            background-color: cadetblue;
            width:100%;
            height:700px;
            text-align:center;
        }
        #search{
            position:absolute;
            top:50%;
            left:50%;
            width:300px;
            height:50px;
            margin-top: -25px;
            margin-left:-150px;
        }

HTML代码

<div id="main">
        <div id="search"><input id="txt" type="text" value="请输入搜索内容"/><input id="btn" type="button" value="百度一下"></div>
        <div>待更新的table</div>
    </div>

3.自动均分元素实现图表

可以用ul+li，再设置float计算好width，再配上float实现，但这里不用这种方法。
实现效果：

CSS代码
设table-cell是关键，可以实现等高。
要设每一列宽度都相等，如果是普通的table,验证过加上table-layout: fixed; 就可以实现等距。但现在这种方法只能在 #table-wrapper li中手动设宽度，不知道有没有更好的方法。

 #table-wrapper{
            display:none;
            position:absolute;
            top:70%;
            left:50%;
            width:800px;
            height:200px;
            margin-top: -100px;
            margin-left:-400px;
            border:1px solid gray;
            text-align:center;
        }
        #table-wrapper ul:first-child{
            font-weight: bold;
        }
        #table-wrapper ul{
            display:table-row;
            font:"微软雅黑" 30px;
            /* border:1px solid gray; */
            /*设置垂直对齐*/
            vertical-align: middle;
            width:500px;
        }
        #table-wrapper li{
            display:table-cell;
            table-layout: fixed; 
            padding:10px;
            width:160px;
            border:1px solid gray;
            vertical-align: middle;
        } 

HTML代码
用table-wrapper包裹起来，再分两行操作。

 	    <!--下面是自动均分元素实现的图表-->
 		<div id="table-wrapper">
            <div class="table-row">
                <div>我的关注</div><div>推荐</div>
            </div>
            <div class="table-row">
                <div><img src="pics/baidulogo.png" alt=""/></div><div>天猫</div><div>搜狐</div><div>今日头条</div><div>美团</div>
            </div>
        </div>

4.点击按钮显示图表，再点一次隐藏

在最下方加一个按钮，点击后按钮上的字也会变。
一开始无图表，点击显示图表按钮，图表出现，按钮上字变成隐藏图表。
首先把上面的<div id="table-wrapper">这一块设成：

display:none;

在HTML中加这句:

 <input type="button" id="btn2" value="显示图表">

然后到js代码中添加:

 $("#btn2").click(function(){
        if($(this).val() == "显示图表"){
            $("#table-wrapper").fadeIn(200);
            $(this).val("隐藏图表");
        }else if($(this).val() == "隐藏图表"){
            $("#table-wrapper").fadeOut(200);
            $(this).val("显示图表");
    }
    })

最终效果：

5.实现“关于我们 | 联系我们 | 版权声明”的排版

实际上是用ul+li，再活用选择器实现
加HTML代码：

<!--下面是中间有分割线的footer-->
            <ul>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>版权声明</li>
                <li>意见反馈</li>
            </ul>

加CSS代码：
用inline使多个div排在一行上，li+li实现间隔里有一竖杠。text-align居中。

	  ul{
            text-align:center;
        }
        li{
            display:inline;
        }
       li+li{
           padding:0 5px;
           border-left:1px solid black;
       }

实现效果：

6.滚动条拉到一定高度出现回到顶部方框，点击回到顶部

添加HTML代码：

<div id="back-to-top">回到顶部</div>

添加CSS代码确定样式：
用fixed是为了怎么滑滚动条，回到顶部这个小方块都不会改变位置。

 #back-to-top{
           display:none;
           position:fixed;
           bottom:10px;
           right:10px;
           width:40px;
           height:40px; 
           padding:0px 2px 4px 2px;
           border:1px solid yellow;
           color:yellow;
           background-color: purple;
           text-align:center;
           vertical-align: middle;
       } 

接下来添加JS代码：

 //滚动条高度到一定程度时才会出现回到顶部
    var top = $("#search").offset().top;
    top = top/3;
    // alert(top);
    $(window).scroll(function(){
        if($(this).scrollTop() > top){
            $("#back-to-top").fadeIn(200);
        }else if($(this).scrollTop() < top){
            $("#back-to-top").fadeOut(200);
        }
    })
//点击后回到顶部
    $("#back-to-top").click(function(){
        $("html,body").scrollTop(0);
    })

实现效果:
一开始不会出现，拉下滚动条才出现，点击回到顶部。

剩下6种效果在第二期中记录，同样在同一个网页中实现。