首页 > 代码库 > Jquery小功能实例
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 = http://www.mamicode.com/"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=http://www.mamicode.com/">>>" /> <input id="btnRight" type="button" value=http://www.mamicode.com/"<<<" /> <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: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 =http://www.mamicode.com/"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=http://www.mamicode.com/"Images/1.jpg" /></div> <div id = "Ware1Money" style = " position:relative;left:370px; bottom:40px;"> ￥<input id="Text2" type="text" value = http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"Images/2.jpg" /></div> <div style = " position:relative;left:370px; bottom:40px;">￥<input id="Text3" type="text" value = http://www.mamicode.com/"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=http://www.mamicode.com/"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 = http://www.mamicode.com/"0.00" readonly="readonly" />--%> </div> <div id = "div"> <span id = "Go" style = " display:none"><a href = http://www.mamicode.com/"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: #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=http://www.mamicode.com/"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=http://www.mamicode.com/"Images/1%20(1).jpg" /></li> <li> <img src=http://www.mamicode.com/"Images/1%20(2).jpg" /></li> <li> <img src=http://www.mamicode.com/"Images/1%20(3).jpg" /></li> <li> <img src=http://www.mamicode.com/"Images/1%20(4).jpg" /></li> <li> <img src=http://www.mamicode.com/"Images/1%20(5).jpg" /></li> <li> <img src=http://www.mamicode.com/"Images/1%20(6).jpg" /></li> </ul> </div> <input id="Button1" type="button" value=http://www.mamicode.com/"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: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 =http://www.mamicode.com/"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=http://www.mamicode.com/"Images/01.jpg" width = "650px" height = "250" /></li> <li><img src=http://www.mamicode.com/"Images/02.jpg" width = "650px" height = "250" /></li> <li><img src=http://www.mamicode.com/"Images/03.jpg" width = "650px" height = "250" /></li> <li><img src=http://www.mamicode.com/"Images/04.jpg" width = "650px" height = "250" /></li> <li><img src=http://www.mamicode.com/"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>
Jquery小功能实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。