步步为营-57-JQuery练习题

01 点谁谁哭

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            //隐式迭代:自动将数组中的每个元素都执行一遍操作
            //当前会将数组中的每个input进行click绑定
            $('input').click(function() {
                this.value = '呜呜';
            });
        });
    </script>
</head>
<body>
    <input class="test" type="button" value="哈哈" />
    <input class="test" type="button" value="哈哈" />
    <input class="test" type="button" value="哈哈" />
    <input class="test" type="button" value="哈哈" />
    <input class="test" type="button"  value="哈哈" />
</body>
</html>
View Code

 02 加法计算器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
          
            $('#bthAdd').click(function () {
                var num1 = parseInt($('#num1').val());
                var num2 = parseInt($('#num2').val());
                var num3 = num1 + num2;
                $('#result').val(num3);
            });
        });
    </script>
</head>
<body>
<input type="text" id="num1" value="" />
 +
<input type="text" id="num2" value=""/>
=
<input type="text" id="result" value="" />
<br/>
<input type="button" id="bthAdd" value="结果"/>
</body>
</html>
View Code

03 都是P

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
            $('#btnP').click(function() {
                $('p').text('我们都是P');
            });
        });
    </script>
</head>
<body>
<input type="button" id="btnP" value="设置P内容"/>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
<p></p>
</body>
</html>
View Code

04 省市联动

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        //01-定义省市数据，键值对集合
        var datas = {
            "北京": ["朝阳", "海淀", "昌平", "丰台"],
            "山东": ["青岛", "济南", "烟台"],
            "山西": ["大同", "太原", "运城", "长治"],
            "河南": ["洛阳", "开封", "郑州", "驻马店"],
            "河北": ["石家庄", "张家口", "保定"]
        };
        $(function () {
            //02 创建省的选择器
            var selection = $('<select id="proSelect"></select>');
            selection.appendTo($('body'));
            //03-遍历集合 在选择器上添加元素
            $.each(datas, function (key, value) {
                //创建option对象
                $('<option value="' + key + '">' + key + '</option>').appendTo(selection);
            });
            //04-创建市的selection
            var citySelection = $('<select id="citySelect"></select>');
            //05-在body上添加市的selection
            $('body').append(citySelection);
            //06-根据省的值 获取市的值
            //06-01 获取省的值
            var pro = $('#proSelect').val();
            var city = datas[pro];
            //06-02 创建对象
            for (var val in city) {
                $(citySelection).append('<option value="'+val+'">'+city[val]+'</option>');
            };
            //07 省的change事件
            selection.change(function() {
                //07-01 获取变化后的省的信息
                var pro = $('#proSelect').val();
                var city = datas[pro];
                //07-02 清空市的信息
                citySelection.empty();
                //07-03 添加市的信息
                $.each(city,function(index,item) {
                    $('#citySelect').append('<option value="'+index+'">'+item+'</option>');
                });
            });

        });
      
    </script>
</head>
<body>
 
</body>
</html>
View Code

05 点亮灯泡

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
            var flag = 1;
            $('.imgClass').click(function () {
                if (flag == 1) {
                    $('img').attr('src', '../Img/12.JPG');
                    flag = 0;
                } else {
                    $('img').attr('src', '../Img/11.GIF');
                    flag = 1;
                }

            });
        });
    </script>
</head>
<body>
   
    <img class="imgClass" src="../Img/11.GIF" />
</body>
</html>
View Code

06 更换背景色

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            var flag = true;
            $('#divBackGround').click(function () {
                if (flag == true) {
                    $(this).css(
                        {
                            'background-color': 'white'

                        });
                    flag = false;
                } else {
                    $(this).css(
                        {
                            'background-color': 'black'

                        });
                    flag = true;
                }
            });
        });
    </script>
</head>
<body>
<div id="divBackGround" style=" 100px; height: 100px; background-color:black">
    
</div>
</body>
</html>
View Code

07 链式编程(即改变文字颜色,又改变文字内容)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
            $('#btnCon').click(function() {
                $('p').css('color','red').text('我们都是P');
            });
        });
    </script>
</head>
<body>
    <p>我是p1</p>
    <p>我是p2</p>
    <p>我是p3</p>
    <p>我是p4</p>
<p>我是p5</p>
    <input id="btnCon" type="button" value="统一显示"/>
</body>
</html>
View Code

08 ul和li的互相转换

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        ul {
            border: 1px solid;
             100px;
            height: 300px;
            float: left;
            list-style: none;
        }
    </style>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
            //01 获取所有的li标签
            $('li').hover(
                function liOver() {
                    $(this).css({ 'color': 'red', 'cursor': 'pointer' });
                },
                function liOut() {
                    $(this).css({ 'color': 'black'  });
                }
            ).click(function() {
                var parId = $(this).parent().attr('id');
                if (parId == 'left') {
                    $(this).appendTo('#right');
                } else {
                    $(this).appendTo('#left');
                }
            });
            
           
        });
    </script>
</head>
<body>
<ul id="left" >
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
    <li id="4">4</li>
</ul>
<ul id="right" style="float:right" ></ul>
</body>
</html>
View Code

09 创建表格

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        th {
            border: 1px solid;
        }
        td {
            border: 1px solid;
        }
    </style>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        var list = [
            { id: 1, country: '中国', capital: '北京' },
            { id: 2, country: '美国', capital: '华盛顿' },
            { id: 3, country: '日本', capital: '东京' },
            { id: 4, country: '韩国', capital: '首尔' }
        ];

        $(function () {
            //01-根据数据生成表格
            $.each(list, function(indext, item) {
                $('<tr>' +
                    '<td>' +item.id +'</td>' +
                    '<td>' +item.country +'</td>' +
                    '<td>' +item.capital +'</td>   ' +
                 ' </tr>').appendTo('#table1');
            });
            //02-是表格的奇偶行显示不同背景色
            $('tr:odd').css('background-color', 'yellow');
            //03-鼠标放上去高亮显示,鼠标离开恢复原色
            $('#table1 tr').hover(function () {//移上
              
                $(this).css('background-color', 'blue');
            }, function () {//移开
                $('tr:odd').css('background-color', 'yellow');
                $('tr:even').css('background-color', 'white');
            });
           
            //04-前三名
            $("#table1 tr:lt(4)").css('font-weight','bold');
        });
    </script>
</head>
<body>
<table id="table1" style="border: 1px solid">
    <thead style="border: 1px solid">
        <th>编号</th>
        <th>国家</th>
        <th>首都</th>
    </thead>
</table>
</body>
</html>
View Code

10 链式编程end()的用法

　　鼠标移至该节点显示红色,该节点之前显示蓝色之后显示黄色　　

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        ul {
            border: 1px solid;
             100px;
            height: 300px;
            float: left;
            list-style: none;
        }
    </style>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            //01 获取所有的li标签
            $('li').hover(
                function liOver() {
                    $(this).css({ 'color': 'red', 'cursor': 'pointer' }).prevAll().css('color', 'yellow').end().nextAll().css('color', 'blue');
                },
                function liOut() {
                    $('li').css({ 'color': 'black' });
                }
            );
        });


      
    </script>

</head>
<body>
<ul id="left">
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
    <li id="4">4</li>
</ul>
</body>
</html>
View Code
View Code

 11 权限管理

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        select {
            
            border: 1px solid;
             100px;
            height: 200px;
            float: left;
            list-style: none;
           
        }

    </style>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
            //01 > 按钮触发事件
            $('#btnToRigh').click(function () {
                $("#left :selected").appendTo($("#right"));
            });
            //02 >> 按钮触发事件
            $('#btnToRighAll').click(function () {
                $("#left").children().appendTo($("#right"));
            });
            //03 < 按钮触发事件
            $('#btnToLeft').click(function () {
                $("#right :selected").appendTo($("#left"));
            });
            //04 << 按钮触发事件
            $('#btnToLeftAll').click(function () {
                $("#right").children().appendTo($("#left"));
            });
        });
    </script>
</head>
<body>
<select id="left" multiple="multiple">
    <option>增加-权限</option>
    <option>删除-权限</option>
    <option>修改-权限</option>
    <option>查看-权限</option>
</select>
<div style="float: left">
    <br/>
    <input id="btnToRigh" type="button" value=">"/>
    <br/><br />
    <input id="btnToRighAll" type="button" value=">>"/>
    <br/><br />
    <input id="btnToLeft" type="button" value="<"/>
    <br/><br />
    <input id="btnToLeftAll" type="button" value="<<"/>
</div>
<select id="right" multiple="multiple">
    
</select>
</body>
</html>
View Code

12 对数据表的增删改查

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        table {
            border: 1px solid;
        }
        th {
            border: 1px solid;
        }
        td {
            border: 1px solid;
        }
        #backDiv {
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: black;
            opacity: 0.2;
            display: none;
        }
        #beforeDiv {
            position: absolute;
            border: 1px solid red;
             250px;height: 120px;
            background-color: #e7e7e7;
            display: none;
        }
       

    </style>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        var list = [
            { id: 1, country: '中国', capital: '北京' },
            { id: 2, country: '美国', capital: '华盛顿' },
            { id: 3, country: '日本', capital: '东京' },
            { id: 4, country: '韩国', capital: '首尔' }
        ];
        $(function() {
            //01 创建表格
            $.each(list, function (index, item) {
                //为tr设置值,方便修改时确认是哪一行
                $('<tr id="' + item.id + '">' +
                   ' <td><input type="checkbox"  /></td>'+
                    '<td>'+item.id+'</td>'+
                    '<td>'+item.country+'</td>'+
                    '<td>'+item.capital+'</td>'+
                    '<td><input type="button" value="修改" /></td>'+
                    '</tr>').appendTo('#table1');
            });
            //02 设置全选的checkbox属性
            $("#checkAll").change(function() {
                $(':checkbox').attr('checked', this.checked);
            });
            //03 反转按钮触发事件
            $('#bthRever').click(function() {
                $(':checkbox[id!="checkAll"]').each(function() {
                    this.checked = !this.checked;
                });
            });

            //04 删除 按钮
            $('#bthDelete').click(function () {
                if (confirm("确定要删除?")) {
                    $(':checkbox[id!="checkAll"][checked="checked"]').parents('tr').remove()
                }
            });

            //05 添加按钮触发事件
            $('#bthAdd').click(function () {
                //显示添加界面
                $('#backDiv').css('display', 'block').width(window.innerWidth).height(window.innerHeight);
                $('#beforeDiv').css('display', 'block').css(
                    {
                        'left': window.innerWidth / 2 - 150 + 'px',
                        'top': window.innerHeight / 2 - 50 + 'px'
                    });
                $('#beforeDiv :text,:hidden').val('');
            });

            // 06 单击保存按钮触发事件
            $('#btnSave').click(function () {
                //判断是"修改"时的保存还是"新增"时的保存
                var hiId = $('#hidId').val();
                if (hiId == '') {
                    $('<tr id="' + $('#txtId').val() + '">' +
                        ' <td><input type="checkbox" /></td>' +
                        '<td>' + $('#txtId').val() + '</td>' +
                        '<td>' + $('#txtCountry').val() + '</td>' +
                        '<td>' + $('#txtCapital').val() + '</td>' +
                        '<td><input type="button" value="修改" /></td>' +
                        '</tr>').appendTo('#table1').find(':button').click(function() {
                        //显示修改界面
                        $('#backDiv').css('display', 'block').width(window.innerWidth).height(window.innerHeight);
                        $('#beforeDiv').css('display', 'block').css(
                            {
                                'left': window.innerWidth / 2 - 150 + 'px',
                                'top': window.innerHeight / 2 - 50 + 'px'
                            });
                        //为修改页面赋值-根据当前按钮获取数据值
                        var pars = $(this).parent().prevAll();
                        //获取隐藏域中id
                        $('#hidId').val(pars.eq(2).text());
                        $('#txtId').val(pars.eq(2).text());
                        $('#txtCountry').val(pars.eq(1).text());
                        $('#txtCapital').val(pars.eq(0).text());
                    });
                } else {
                    //修改
                    //01找到所有列
                    var tds = $('#' + hiId + '>td');
                    tds.eq(1).text($('#txtId').val());
                    tds.eq(2).text($('#txtCountry').val());
                    tds.eq(3).text($('#txtCapital').val());
                    //修改tr的属性值
                    $('#' + hiId).attr('id', $('#txtId').val());
                    
                }


                $('#backDiv').css('display', 'none');
                $('#beforeDiv').css('display', 'none');
            });
            //07 单击取消按钮触发事件
            $('#btnCancel').click(function () {
                $('#backDiv').css('display', 'none');
                $('#beforeDiv').css('display', 'none');
            });

            //08 单击修改按钮触发事件
            $('#table1 :button').click(function() {
                //显示修改界面
                $('#backDiv').css('display', 'block').width(window.innerWidth).height(window.innerHeight);
                $('#beforeDiv').css('display', 'block').css(
                    {
                        'left': window.innerWidth / 2 - 150 + 'px',
                        'top': window.innerHeight / 2 - 50 + 'px'
                    });
                //为修改页面赋值-根据当前按钮获取数据值
                var pars = $(this).parent().prevAll();
                //获取隐藏域中id
                $('#hidId').val(pars.eq(2).text());
                $('#txtId').val(pars.eq(2).text());
                $('#txtCountry').val(pars.eq(1).text());
                $('#txtCapital').val(pars.eq(0).text());
            });

        });
    </script>
</head>
<body>
    <input type="button" id="bthAdd" value="新增" />
    <input type="button" id="bthRever" value="反转" />
<input type="button" id="bthDelete" value="删除"/>
<table id="table1">
    <thead style="border: 1px solid;">
    <th><input type="checkbox"  id="checkAll"/></th>
    <th>编号</th>
    <th>国家</th>
    <th>首都</th>
    <th>修改</th>
    </thead>
</table>
<!-- 设置两个div 用于单击按钮时候进行 蒙版 -->
<div id="backDiv"></div>
<div id="beforeDiv">
    <br/>
    <!-- 设置隐藏域,用于记录当前选中的id -->
    <input type="hidden" id="hidId"/>
    <label for="txtId">编号</label> <input type="text" id="txtId"/><br/>
    <label for="txtCountry">国家</label> <input type="text" id="txtCountry"/><br/>
    <label for="txtCapital">首都</label> <input type="text" id="txtCapital"/><br/>
    &nbsp;&nbsp;&nbsp;&nbsp; 
    <input type="button" id="btnSave" value="保存"/>
    <input type="button" id="btnCancel" value="取消"/>

</div>
</body>
</html>
View Code

13 仿照微博

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>腾讯微博</title>
    <style>
        #friendDivId {
           
            position: absolute;
             50px;
            height:100px;
           border:1px solid red;
           left: 100px;
           top: 200px;
           background-color:#a7a7a7;
            padding: 5px;
        
        }
    </style>
    <link href="css/main.css" rel="stylesheet" />
    <script src="../../JQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //01-默认提示信息
            $("#msgTxt").val('#输入话题标题#')
            //04 检验还剩多少字体
            .keyup(function() {
                var lengthText = 140 - $(this).val().length;
                        if (lengthText > 0) {
                            $('.countTxt').css('color', 'black').html('还能输入<em>'+lengthText+'</em>字');
                        } else {
                            $('.countTxt').css('color', 'red').html('还能输入<em>'+lengthText*-1+'</em>字');
                        }
                    })
            ;
            //02-点击"话题"按钮,如果文本框为空,显示'#输入话题标题#'
            //如果文本框显示'#输入话题标题#',则将其高亮选中
            $(".sendBtn").click(function () {
                var msgText = $("#msgTxt").val();
                if (msgText == '') {
                    $("#msgTxt").val('#输入话题标题#');
                }
                if (msgText == '#输入话题标题#') {
                    $("#msgTxt").css('color','red');
                }
            })
            //03 设置鼠标hover事件
            .hover(function funON() {
                $(this).css('background-position', '-0px -195px');
            },
             function funOFF() {
                 $(this).css('background-position', '-117px -165px')
             })
            ;
            //04 设置@好友样式
            $('.atSome').click(function(e) {
                //04-01 创建一个div
                var friendList = ['张三', '李四', '王五', '赵六', '田七'];
                //04-04 判断是否有一个friendDiv的存在
                var fridenDiv = $('#friendDivId');
                if (fridenDiv.length > 0) {
                    return;
                }
                 fridenDiv = $('<div id="friendDivId"></div>').css({
                    'left': e.clientX + 'px',
                    'top': e.clientY + 'px'
                }).appendTo('body');
                //04-02 向div中添加<span>数据
                $.each(friendList, function () {
                    //04-03 向<span>中添加点击事件
                    $('<span>' + this + '</span></br>')
                        .css('cursor','pointer')//设置小手图标
                        .one('click',function () {
                        $("#msgTxt").val($("#msgTxt").val()+'@'+$(this).text()); 
                    }).appendTo(fridenDiv);
                });
                //04-03 增加一个关闭按钮
                $('<span>×</span>')
                    .css('cursor', 'pointer')
                    .click(function() {
                        fridenDiv.remove();
                    }).appendTo(fridenDiv);

            });
        });
    </script>
</head>
<body>
    <img id="logo" src="img/b3_100901.png" alt="" />
    <center>
        <div id="myBody">
            <div id="myBdLeft">
                <div id="talkBox">
                    <h2>
                        <a>夏天来了，你懂得......</a></h2>
                    <textarea id="msgTxt"></textarea>
                    <div id="funBox">
                        <a href="javascript:void(0);" class="creatNew">话题</a> <a href="javascript:void(0);"
                            class="atSome">朋友</a> <a href="javascript:void(0);" class="insertFace">表情</a>
                        <a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);"
                            class="uploadVideo">视频</a>
                    </div>
                    <div id="sendBox">
                        <input type="button" class="sendBtn" value="" />
                        <span class="countTxt">还能输入<em>140</em>字</span>
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
</html>
View Code

 14 模仿飞秋

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        span {
            cursor: pointer;
        }
         ul {
             border: 1px solid red;
             list-style: none;
             display: none;
         }
    </style>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
           
            $('#spanUnFriend').click(function () {
                $('#ulUnFriend').toggle(2000).siblings('ul').hide();

            });
            $('#spanFriend').click(function () {
                $('#ulFriend').toggle(2000).siblings('ul').hide();
            });
        });
    </script>
</head>
<body>
<span id="spanFriend">我的好友</span>
    <ul id="ulFriend">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
        <li>田七</li>
    </ul>
    <br/>
<span id="spanUnFriend">黑名单</span>
<ul id="ulUnFriend">
        <li>诸葛三</li>
        <li>欧阳四</li>
        <li>东方五</li>
        <li>独孤六</li>
        <li>公孙七</li>
    </ul>
</body>
</html>
View Code

15 标签页

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
       .tab {
           border: 1px solid red;
            50px;
           height: 20px;
           float: left;
           margin: 3px;
       }
        #countent {
            border: 1px solid blue;
             250px;
            height: 250px;
            clear: both;/*//取消浮动效果*/
        }
    </style>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
           
            $('.tab').mouseover(function () {
                var divConte = $('#countent');
                switch (this.id) {
                    case "0":
                        divConte.html('<h1>我叫张三,我为自己代言 </h1>');
                        break;
                    case "1":
                        divConte.html('<h1>我叫李四,我为自己代言 </h1>');
                        break;
                    case "2":
                        divConte.html('<h1> 我叫王五,我为自己代言</h1>');
                        break;
                    case "3":
                        divConte.html('<h1>我叫赵六,我为自己代言 </h1>');
                        break;

                }
            });
           
        });
    </script>
</head>
<body>
    <div id="0" class="tab">张三</div>
    <div id="1" class="tab">李四</div>
    <div id="2" class="tab">王五</div>
    <div id="3" class="tab">赵六</div>
<div id="countent"></div>
</body>
</html>
View Code

16 图片轮播

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <style>
        #imgContainer {
             300px;height: 300px;
            border: 1px solid red;
            /*设置绝对定位,子元素的绝对定位是相对于父元素的*/
            position: absolute;left: 10px;top: 10px;
        }
        #imgContainer img {
                 300px;
                height: 300px;
                position: absolute;
                left: 0px;
                top: 0px;
            }
         #imgContainer div {
                position: absolute;
            }
            #imgContainer .imgTip {
                position: absolute;
                /*//设置数据提示在图片上*/
                z-index: 100;
                bottom: 10px;
                border: 1px solid blue;
                background-color: green;
                color: white;
                padding: 3px;
                 10px;
                cursor: pointer;
            }
                                                               
           
    </style>
    <script>
        //声明一个清除定时器的变量
        var changeImgId;
        //定义一个图片集合,指定图片的路径信息
        var list = ['/Img/zg.jpg', '/Img/mg.jpg', '/Img/rb.jpg', '/Img/hg.jpg'];
        $(function() {
            $.each(list, function(index) {
                //根据数组生成所有的img图片
                $('<img src="' + this + '">').appendTo('#imgContainer');
                //根据图片生成数字提示
                $('<div class="imgTip">' + (index + 1) + '</div>')
                    .css('right', (4 - index) * 20 + 'px')
                    .appendTo('#imgContainer');
            });
            //设置第1张图片显示
            $('#imgContainer>img:gt(0)').hide();
            //设置提示数字的事件
            $('#imgContainer>.imgTip').hover(function () {
                    //鼠标移动数字上时候,根据索引显示图片
                $('#imgContainer>img').eq(parseInt($(this).text()) - 1).slideDown(1000).siblings('img').fadeOut(1000);
                $(this).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');
                //清除自动播放的定时器
                clearInterval(changeImgId);
                //更改图片suoyin
                    imgIndex = parseInt($(this).text()) - 1;
                },
                function() {
                    changeImgId = setInterval(chagneImg, 2000);
                });

            //完成自动切换功能
            changeImgId = setInterval(chagneImg, 2000);
            //默认让第一个数字背景色变为蓝色
            $(' #imgContainer>.imgTip:eq(0)').css('background-color', 'blue');
        });
        //切换图片
        var imgIndex = 0;
        function chagneImg() {
            imgIndex ++;//切换图片索引
            if (imgIndex >= list.length) {
                imgIndex = 0;
            }
            $('#imgContainer>img').eq(imgIndex).slideDown(1000).siblings('img').fadeOut(1000);
            //设置指定索引的背景se
            $('#imgContainer>.imgTip').eq(imgIndex).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');

        }
    </script>
</head>
<body>
<div id="imgContainer"></div>
</body>
</html>
View Code

图片轮播-模仿京东

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="轮播图css.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="轮播图js.js"></script>
</head>
<body>
    <div class="outer">
        <ul class="img">
            <li><a href="" ><img src="img/1.jpg" alt></a></li>
            <li><a href="" ><img src="img/2.jpg" alt></a></li>
            <li><a href="" ><img src="img/3.jpg" alt></a></li>
            <li><a href="" ><img src="img/4.jpg" alt></a></li>
            <li><a href="" ><img src="img/5.jpg" alt></a></li>
            <li><a href="" ><img src="img/6.jpg" alt></a></li>
            <li><a href="" ><img src="img/7.jpg" alt></a></li>
            <li><a href="" ><img src="img/8.jpg" alt></a></li>
        </ul>
        <ul class="num">

        </ul>
        <div class="btn left"><</div>
        <div class="btn right">></div>
    </div>
</body>
</html>
html页面
.outer{
     790px;
    height: 340px;
    margin: 80px auto;
    position: relative;
}
.img li{
    position: absolute;
    list-style: none;
    top: 0px;
    left:  0px;    
}
.num{
    position: absolute;
    bottom: 18px;
    left: 270px;
    list-style: none;
}
.num li{
    display: inline-block;
     18px;
    height: 18px;
   background-color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    margin-left: 8px;
}

.btn{
    position: absolute;
    top: 50%;
     30px;
    height: 60px;
    background-color: lightgray;
    color: white;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    opacity: 0.7;
    margin-top: -30px;
    display: none;
}
.left{
    left: 0px;
}
.right{
    right: 0px;
}
.outer:hover .btn{
    display: block;
}
.num .active{
     background-color: red;
}
css页面
$(function () {
     var i=0;
    // 获取图片数量
    var img_nums=$(".img li").length;
    for (var j=0;j<img_nums;j++){
        // 创建li标签
        $(".num").append("<li></li>")
    }
    //设置默认选中值
    $(".num li").eq(0).addClass("active")
    //手动轮播
    $(".num li").mouseover(function () {
        //获取当前索引
        i = $(this).index();
        //先让对应的背景色变红
        $(this).addClass("active").siblings().removeClass();
        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    })
    //自动轮播
    var c=setInterval(GoR,1500);

    function GoR(){

        if(i>=img_nums-1){
            i=-1;
        }
        i++;
      $(".num li").eq(i).addClass("active").siblings().removeClass();
      $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    function GoL(){
        if(i==0){
            i=img_nums;
        }
        i--;
      $(".num li").eq(i).addClass("active").siblings().removeClass();
      $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    //鼠标悬浮在上面是，自动轮播停止
    $(".outer").hover(function () {
        clearInterval(c)
    },function () {
        c=setInterval(GoR,1500);
    });
    // button 加轮播
    $(".right").click(GoR);
    $(".left").click(GoL)

})
js页面

17 cookie设置

　　 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script src="../JQuery/jquery.cookie.js"></script>
    <script>
        $(function() {
            $('#btnSet').click(function() {
                //设置cookiew
                var date = new Date();
                //第一个参数是键,第二个参数是值
                $.cookie('yk',date.toLocaleTimeString());
            });
            $('#btnGet').click(function () {
                //根据键获取值
                $('#textTime').val($.cookie('yk'));
            });
        });
    </script>
</head>
<body>
<input type="button" id="btnSet" value="设置" />
<input type="button" id="btnGet" value="获取" />
    <input type="text" id="textTime"/>
</body>
</html>
View Code

18 放大镜

　　18.1 引入jqzoom脚本 和css对象

　　 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../css/jquery.jqzoom.css" rel="stylesheet" />
    <script src="../JQuery/jquery-1.7.1.min.js"></script>
    <script src="../JQuery/jquery.jqzoom-core.js"></script>
    <script>
        $(function() {
            $(function() {
                $('.t1').jqzoom();
            });
        });
    </script>
</head>
<body>
<a class="t1" title="逍遥小天狼" href="../Img/xyxtl.GIF">
    <img src="../Img/xyxtlMin.gif"/>
</a>
</body>
</html>
View Code

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/YK2012/p/6845405.html