Jquery小功能实例

浏览数：43 / 时间：2015年06月09日

下拉框内容选中左右移动

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Select.aspx.cs" Inherits="Select" %>

<!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 runat="server">
    <title></title>
    <script type = "text/javascript" src = "JS\jquery-1.4.1.js"></script>
    <script type = "text/javascript">
        $(document).ready(function () {
            $("#btnLeft").click(function () {
                //alert($("#Select1").val());
                //alert($("select option:selected").html());
                if ($("#Select1 option:selected").html() == null) {
                    alert("未选中！");
                } else {
                    //向Select2中添加Select1中选定的值
                    $("#Select2").append($("#Select1 option:selected"));
                }
            });
            $("#btnRight").click(function () {
                //alert($("#Select2 option:selected").html());
                if ($("#Select2 option:selected").html() == null) {
                    alert("未选中！");
                } else {
                    $("#Select1").append($("#Select2 option:selected"));
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select id="Select1" multiple = "multiple">
            <option>江苏</option>
            <option>海南</option>
            <option>大连</option>
            <option>陕西</option>
            <option>山东</option>
        </select>
        <input id="btnLeft" type="button" value=">>>" />
        <input id="btnRight" type="button" value="<<<" />
        <select id="Select2" multiple = "multiple">
        </select>
    </div>
    </form>
</body>
</html>

View Code

购物车简单功能【数量加减，金额计算】

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Shopping-1.aspx.cs" Inherits="Shopping_1" %>

<!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 runat="server">
    <title></title>
    <style type ="text/css">
        .dv1{ padding-left:50px; padding-top:100px;}
        #Ware1Mines{ width:20px;height:20px; border:1 solid #ccc; position:relative;right:20px; top:20px; cursor:pointer;}
        #Ware1Add{ width:20px;height:20px; border:1 solid #ccc; position:relative;left:60px; bottom:20px; cursor:pointer;}
        #Ware2Mines{ width:20px;height:20px; border:1 solid #ccc; position:relative;right:20px; top:20px; cursor:pointer;}
        #Ware2Add{ width:20px;height:20px; border:1 solid #ccc; position:relative;left:60px; bottom:20px; cursor:pointer;}
        .dv_Go{background:red; width:100px;height:40px; text-align:center; font-size:27px; color:White; cursor:pointer;}
        #Text2
        {
            width: 32px;
        }
        #Text3
        {
            width: 32px;
        }
        #sum
        {
            width: 66px;height:26px;color:Red; font-size:25px;
        }
    </style>
    <script type ="text/javascript" src ="jquery-1.7.2.min.js"></script>
    <script type ="text/javascript">
//        function selectAll(checkbox) {
//            $(‘input[type = checkbox]‘).prop(‘checked‘, $(checkbox).prop(‘checked‘)); //$(checkbox).prop(‘checked‘)判断id为all的复选框是否为选中状态，若为true则所有checkbox的值为true，否则为false
//            if ($(checkbox).prop(‘checked‘)) {
//                    var sum1 = $(‘#Text2‘).val();
//                    var sum2 = $(‘#Text3‘).val();
//                    $(‘#sum‘).attr(‘value‘, parseFloat(sum1) + parseFloat(sum2));
//                }
//                else {
//                    $(‘#sum‘).attr(‘value‘, ‘0.00‘);
//                }
//        }
        $(function () {
            $(‘#all‘).click(function () {
                $(‘input[type = checkbox]‘).prop(‘checked‘, $(‘#all‘).prop(‘checked‘));
                if ($(‘#all‘).prop(‘checked‘)) {
                    var sum1 = $(‘#Text2‘).val();
                    var sum2 = $(‘#Text3‘).val();
                    $(‘#zong1‘).html((Number(sum1) + Number(sum2)).toFixed(2));
                }
                else {
                    $(‘#zong1‘).html(‘0.00‘);
                }
                GetCount();
            });
            //计算选中的复选框的金额
            $(‘input[name = item]‘).click(function () {
                GetCount();
            });
            //复选框选中时方法
            function GetCount() {
                var sum = 0;
                $(‘input[name = item]‘).each(function () {
                    $(‘#Ware1‘).attr(‘value‘, $(‘#Text2‘).val());
                    $(‘#Ware2‘).attr(‘value‘, $(‘#Text3‘).val());
                    for (var i = 0; i < $(this).length; i++) {
                        if ($(this).attr(‘checked‘)) {
                            sum += parseFloat($(this).val());
                            //alert(sum);
                        }
                    }
                    $(‘#zong1‘).html((sum).toFixed(2));
                    $(‘#Go‘).css(‘display‘, ‘inherit‘);
                    $(‘#div‘).attr(‘class‘, ‘dv_Go‘);
                });
            }
            //});

            //$(function () {
            $(‘#Ware1Add‘).click(function () {
                //$(this).prev() //当前元素的前一个元素，即Text2
                $(this).prev().val(parseFloat($(this).prev().val()) + 1);
                $(‘#Text2‘).attr(‘value‘, 42.00 * $(‘#Ware1Num‘).val());
                GetCount();
            });
            $(‘#Ware1Mines‘).click(function () {
                if (parseFloat($(this).next().val()) <= 0) {
                    $(‘#Ware1Num‘).attr(‘value‘, 0);
                }
                else {
                    //$(this).next() //当前元素的后一个元素，即Text2
                    $(this).next().val(parseFloat($(this).next().val()) - 1);
                    $(‘#Text2‘).attr(‘value‘, 42.00 * $(‘#Ware1Num‘).val());
                    GetCount();
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <%--大容器--%>
    <div class = "dv1">
        <%--购物车字体--%>
        <div style = " font-family:@华文楷体; font-size:20px;">
            <strong>我的购物车</strong>
        <%--购物车字体结束--%>
        </div>
        <%--商品内容块--%>
        <div>
            <%--商品内容导航栏--%>
            <div>
                <div><input id="all" type="checkbox";  />全选</div>
                <div style = " position:relative;left:160px; bottom:20px;">商品</div>
                <div style = " position:relative;left:370px; bottom:40px;">价格</div>
                <div style = " position:relative;left:550px; bottom:60px;">数量</div>
                <div style = " position:relative;left:740px; bottom:80px;">操作</div>
            </div>
            <%--具体商品内容1--%>
            <div>
                <div id = "fu"><input id="Ware1" type="checkbox" name = "item" /></div>
                <div style="position: relative; left: 160px; bottom: 20px;">
                    <img src="Images/1.jpg" /></div>
                <div id = "Ware1Money" style = " position:relative;left:370px; bottom:40px;">
                    ￥<input id="Text2" type="text" value = "42.00" 
                        readonly="readonly" /></div>
                <div style="position: relative; left: 550px; bottom: 80px;">
                    <div id = "Ware1Mines">-</div>
                    <input id="Ware1Num" type="text" maxlength="1" style="width: 40px; height: 13px;
                        text-align: center;" value="1" readonly="readonly" />
                    <div id = "Ware1Add">+</div>
                </div>
                <div style = " position:relative;left:740px; bottom:120px;">删除</div>
            </div>
            <%--具体商品内容2--%>
            <div>
                <div><input id="Ware2" type="checkbox" name = "item" /></div>
                <div style="position: relative; left: 160px; bottom: 20px;">
                    <img src="Images/2.jpg" /></div>
                <div style = " position:relative;left:370px; bottom:40px;">￥<input id="Text3" type="text" value = "39.90" 
                        readonly="readonly" /></div>
                <div style="position: relative; left: 550px; bottom: 80px;">
                    <div id = "Ware2Mines">-</div>
                    <input id="Text1" type="text" maxlength="1" style="width: 40px; height: 13px;
                        text-align: center;" value="1" readonly="readonly" />
                    <div id = "Ware2Add">+</div>
                </div>
                <div style = " position:relative;left:740px; bottom:120px;">删除</div>
            </div>
            <%--商品结算字体--%>
            <div style = " position:relative;left:600px;">
                <div>
                    总计(不含运费): <strong>￥</strong><label id="zong1" style="color:#ff5500;font-size:34px; font-weight:bold;"></label><%--<input id="sum" type="text" value = "0.00"
                      readonly="readonly" />--%>
                </div>
                <div id = "div">
                    <span id = "Go" style = " display:none"><a href = "http://www.baidu.com">去结算</a></span>
                </div>
            </div>
        <%--商品内容块结束--%>
        </div>
    <%--大容器结束--%>
    </div>
    </form>
</body>
</html>

View Code

鼠标移入同级元素变暗

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="fadeTo.aspx.cs" Inherits="fadeTo" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            background: #000;
        }
        *
        {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }
        .all
        {
            width: 630px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
            padding: 10px 0 0 10px;
        }
        li
        {
            width: 200px;
            height: 186px;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(‘li‘).mouseover(function () {
                $(this).siblings().stop().fadeTo(500, 0.3);
            });
            $(‘li‘).mouseout(function () {
                $(this).siblings().stop().fadeTo(500, 1);
            });
            $(‘#Button1‘).click(function () {
                $(‘ul‘).fadeOut(‘slow‘);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="all" id="box">
        <ul>
            <li>
                <img src="Images/1%20(1).jpg" /></li>
            <li>
                <img src="Images/1%20(2).jpg" /></li>
            <li>
                <img src="Images/1%20(3).jpg" /></li>
            <li>
                <img src="Images/1%20(4).jpg" /></li>
            <li>
                <img src="Images/1%20(5).jpg" /></li>
            <li>
                <img src="Images/1%20(6).jpg" /></li>
        </ul>
    </div>
    <input id="Button1" type="button" value="button" />
    </form>
</body>
</html>

View Code

图片左右滚动

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageToggle.aspx.cs" Inherits="ImageToggle" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
*{ padding:0; margin:0; list-style:none; border:0;}
.all{ position:relative; width:650px; height:250px; overflow:hidden; margin:50px auto; background:gold;}
.all ul{ position:relative; z-index:1;}
.all ul li{ position: absolute; left:0; top:0;}
 .all ol { position:absolute; right:10px; bottom:10px; z-index:2;}
.all ol li{ width:20px; height:20px; border:1px solid #999; color:#999; line-height:20px; text-align:center; float:left; margin-left:5px; background:#333; font-weight:bold; font-size:16px; cursor:pointer; font-family:‘黑体‘; margin-top:10px;}
.all .current{ height:30px; width:30px; border-color:#f60; color:#f60; font-size:20px; line-height:30px; margin-top:0;}
</style>
<script type ="text/javascript" src ="jquery-1.7.2.min.js"></script>
<script type  ="text/javascript">
    $(function () {
        var num1 = 6;
        $(‘ol li‘).mouseover(function () {
            $(this).attr(‘class‘, ‘current‘);
            $(this).siblings().attr(‘class‘, ‘‘);

            
            var num = $(this).index();
            $(‘ul li‘).eq(num).css(‘left‘, ‘650px‘);
            num1++;
            $(‘ul li‘).eq(num).css(‘z-index‘,num1);
            $(‘ul li‘).eq(num).animate({ left: ‘0‘ }, 500);
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div class = "all">
    <ul>
        <li><img src="Images/01.jpg" width = "650px" height = "250" /></li>
        <li><img src="Images/02.jpg" width = "650px" height = "250" /></li>
        <li><img src="Images/03.jpg" width = "650px" height = "250" /></li>
        <li><img src="Images/04.jpg" width = "650px" height = "250" /></li>
        <li><img src="Images/05.jpg" width = "650px" height = "250" /></li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class = "current">5</li>
    </ol>
    </div>
    </form>
</body>
</html>