Jquery小功能实例

下拉框内容选中左右移动

<%@ 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>

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

<%@ 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: solid #ccc; position:relative;right:20px; top:20px; cursor:pointer;}

        #Ware1Add{ width:20px;height:20px; border: solid #ccc; position:relative;left:60px; bottom:20px; cursor:pointer;}

        #Ware2Mines{ width:20px;height:20px; border: solid #ccc; position:relative;right:20px; top:20px; cursor:pointer;}

        #Ware2Add{ width:20px;height:20px; border: 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());

                }

                else {

                    $('#zong1').html('0.00');

                }

                GetCount();

            });

            //计算选中的复选框的金额

            $('input[name = item]').click(function () {

                GetCount();

            });

            //复选框选中时方法

            function GetCount() {

                var sum = ;

                $('input[name = item]').each(function () {

                    $('#Ware1').attr('value', $('#Text2').val());

                    $('#Ware2').attr('value', $('#Text3').val());

                    for (var i = ; i < $(this).length; i++) {

                        if ($(this).attr('checked')) {

                            sum += parseFloat($(this).val());

                            //alert(sum);

                        }

                    }

                    $('#zong1').html((sum).toFixed());

                    $('#Go').css('display', 'inherit');

                    $('#div').attr('class', 'dv_Go');

                });

            }

            //});

            //$(function () {

            $('#Ware1Add').click(function () {

                //$(this).prev() //当前元素的前一个元素，即Text2

                $(this).prev().val(parseFloat($(this).prev().val()) + );

                $('#Text2').attr('value', 42.00 * $('#Ware1Num').val());

                GetCount();

            });

            $('#Ware1Mines').click(function () {

                if (parseFloat($(this).next().val()) <= ) {

                    $('#Ware1Num').attr('value', );

                }

                else {

                    //$(this).next() //当前元素的后一个元素，即Text2

                    $(this).next().val(parseFloat($(this).next().val()) - );

                    $('#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="" style="width: 40px; height: 13px;

                        text-align: center;" value="" 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="" style="width: 40px; height: 13px;

                        text-align: center;" value="" 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>

鼠标移入同级元素变暗

<%@ 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: #;

        }

        *

        {

            padding: ;

            margin: ;

            list-style: none;

            border: ;

        }

        .all

        {

            width: 630px;

            border: 1px solid #ccc;

            margin: 100px auto;

            overflow: hidden;

            padding: 10px   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(, 0.3);

            });

            $('li').mouseout(function () {

                $(this).siblings().stop().fadeTo(, );

            });

            $('#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>

图片左右滚动

<%@ 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:; margin:; list-style:none; border:;}

.all{ position:relative; width:650px; height:250px; overflow:hidden; margin:50px auto; background:gold;}

.all ul{ position:relative; z-index:;}

.all ul li{ position: absolute; left:; top:;}

 .all ol { position:absolute; right:10px; bottom:10px; z-index:;}

.all ol li{ width:20px; height:20px; border:1px solid #; color:#; line-height:20px; text-align:center; float:left; margin-left:5px; background:#; 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:;}

</style>

<script type ="text/javascript" src ="jquery-1.7.2.min.js"></script>

<script type  ="text/javascript">

    $(function () {

        var num1 = ;

        $('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: '' }, );

        });

    });

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div class = "all">

    <ul>

        <li><img src="Images/01.jpg" width = "650px" height = "" /></li>

        <li><img src="Images/02.jpg" width = "650px" height = "" /></li>

        <li><img src="Images/03.jpg" width = "650px" height = "" /></li>

        <li><img src="Images/04.jpg" width = "650px" height = "" /></li>

        <li><img src="Images/05.jpg" width = "650px" height = "" /></li>

    </ul>

    <ol>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li class = "current"></li>

    </ol>

    </div>

    </form>

</body>

</html>

秒客网

Jquery小功能实例

相关文章