JQuery练习 2
<script src="script/jquery.js" type="text/javascript"></script> <script src="script/jquery-ui-1.8.18.custom.js" type="text/javascript"></script> <script src="script/jquery.ui.core.js" type="text/javascript"></script> <script src="script/jquery.ui.mouse.js" type="text/javascript"></script> <script src="script/jquery.ui.sortable.js" type="text/javascript"></script> <script src="script/jquery.ui.widget.js" type="text/javascript"></script> <style type="text/css"> #myList{ width: 80px; background: #EEE; padding: 5px; list-style: none; } #myList a{ text-decoration: none; color: #0077B0; } #myList a:hover{ text-decoration: underline; } #myList .qlink{ font-size: 12px; color: #666; margin-left: 10px; } </style> <script type="text/javascript"> $(document).ready(function () { $("#myList").sortable(); //直接让myList下的元素可以拖动排序 }); <form id="form1" runat="server"> <div> <ul id="myList"> <li><a href="#">心情</a></li> <li> <a href="#">相册</a> <a href="#" class="qlink">上传</a> </li> <li> <a href="#">日志</a> <a href="#" class="qlink">发表</a> </li> <li><a href="#">投票</a></li> <li><a href="#">分享</a></li> <li><a href="#">群组</a></li> </ul> </div> </form>
表格变色.aspx
<script type="text/javascript"> $(function () { // $("tbody>tr:odd").addClass("odd"); /*给奇数行添加样式*/ // $("tbody>tr:even").addClass("even"); /*给偶数行添加样式*/ // //高亮显示 // $("tr:contains('李四')").addClass("selected"); //点击后高亮显示 // $("tbody>tr").click(function () { // $(this).addClass("selected").siblings().removeClass("selected").end().find(":checkbox").attr("checked", true); // }); //复选框的高亮显示 // $("tbody>tr").click(function () { // if ($(this).hasClass("selected")) { // //判断当前有没有高亮显示 有去掉 // $(this).removeClass("selected").find("checkbox").attr("checked", false); // } else { // $(this).addClass("selected").find("checkbox").attr("checked",true); // } // }); //方法2 // $("tbody>tr").click(function () { // var hasSelected = $(this).hasClass("selected"); // $(this)[hasSelected ? "removeClass" : "addClass"]("selected").find("checkbox").attr("checked", !hasSelected); // }) //当用户刚进入时处理已被选择的按钮 // $("tbody>tr:has(:checked)").addClass("selected"); //表格的展开关闭 // $("tr.parent").click(function () { // $(this).toggleClass("selected")//添加删除高亮显示 // .siblings(".child_" + this.id).toggle(); //隐藏显示所谓的行 // }).click();//加载页面时出发click事件 // //表格内容的筛选 // $("tbody tr").hide(); // $("tbody tr").filter(":contains('张')").show(); //即时刷新（牛逼啊） // $("#filterName").keyup(function () { // $("table tbody tr").hide(); // $("table tbody tr").filter(":contains('" + $(this).val() + "')").show(); // }).keyup();//dom加载完成时，绑定事件之后立即触发 //网页字体大小 // $("span").click(function () { // var thisEle = $("#para").css("font-size");//获取字体大小 // var textfontsize = parseInt(thisEle, 10);//去除单位 PX // var unit = thisEle.slice(-2); //截取单位px // var cName = $(this).attr("class"); // if (cName == "bigger") { // textfontsize += 2; // } else if (cName == "small") { // textfontsize -= 2; // } // $("#para").css("font-size",textfontsize+unit) // }) //网页选项卡 }) </script> <style type="text/css"> .even { background: red; } .odd { background: green; } .selected { background: yellow; } li { } </style> <form id="form1" runat="server"> <div class="tab"> <div class="tab_menu"> <ul><li class="selected">实事</li><li>体育</li><li>娱乐</li></ul></div> <div class="tab_box"> <div>实事</div> <div class="hide">实事</div> <div class="hide">实事</div> </div> </div> <div> <%--<table> <thead> <tr> <th> </th> <th> 姓名 </th> <th> 性别 </th> <th> 暂住地 </th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" /> </td> <td> 张三 </td> <td> 男 </td> <td> 河南郑州 </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td> 李四 </td> <td> 男 </td> <td> 河南郑州 </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td> 张三 </td> <td> 男 </td> <td> 河南郑州 </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td> 张三 </td> <td> 男 </td> <td> 河南郑州 </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td> 张三 </td> <td> 男 </td> <td> 河南郑州 </td> </tr> </tbody> </table>--%> </div> <label> 筛选：</label> <input type="text" id="filterName" /><br /> <table id="table2"> <thead> <tr> <th> 姓名 </th> <th> 性别 </th> <th> 暂住地 </th> </tr> </thead> <tbody> <tr class="parent" id="row_01"> <td colspan="3"> 前台设计组 </td> </tr> <tr class="child_row_01"> <td> 张三 </td> <td> 男 </td> <td> 河南郑州 </td> </tr> <tr class="child_row_01"> <td> 李四 </td> <td> 男 </td> <td> 河南郑州 </td> </tr> <tr class="parent" id="row_02"> <td colspan="3"> 前台开发组 </td> </tr> <tr class="child_row_02"> <td> 张三 </td> <td> 男 </td> <td> 河南郑州 </td> </tr> <tr class="child_row_02"> <td> 李四 </td> <td> 男 </td> <td> 河南郑州 </td> </tr> <tr class="parent" id="row_03"> <td colspan="3"> 后台开发组 </td> </tr> <tr class="child_row_03"> <td> 张三 </td> <td> 男 </td> <td> 河南郑州 </td> </tr> <tr class="child_row_03"> <td> 李四 </td> <td> 男 </td> <td> 河南郑州 </td> </tr> <div id="msg"> <div> <span class="bigger">放大</span> <span class="small">缩小</span> </div> <div> <p id="para"> dlsafjdsflakjdsflsdjfklasdjhfkajsdhfjkasd fasdjkfhasdkj f</p> </div> </div> </tbody> </table> </form>
自定义选择器
<script type="text/javascript"> ; (function ($) { $.extend($.expr[":"], { between: function (a, i, m) { var tem = m[3].split(","); return tem[0] - 0 < i && i < tem[1] - 0; } }); })(JQuery); $(function () { alert("执行前"); $("div:between(2,5)").css("background", "white"); alert("执行后"); }) </script> <div style="background: red"> 0 </div> <div style="background: green"> 1 </div> <div style="background: blue"> 2 </div> <div style="background: yellow"> 03 </div> <div style="background: gray"> 04 </div> <div style="background: orange"> 05 </div>
插件编写
<script type="text/javascript"> // :(function ($) { // $.fn.extend({ // "alterBgColor":function (options) { // options=$.extend({ // odd:"odd", // even:"even", // selected:"selected" // },options); // } // }); // })(JQuery);： ; (function ($) { $.extend({ ltrim: function (text) { return (text || "").replace(/^\s+/g, ""); }, rtrun: function (text) { return (text || "").replace(/\s+$/g, ""); } }); })(JQuery); // $(function () { // function ltirm(text) {//去除左侧空格 // return (text || "").replace(/^\s+/g,""); // } // // } // }) </script>
<link href="styles/main.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="styles/skin/skin_1.css" type="text/css" id="cssfile" /> <script src="scripts/jquery.js" type="text/javascript"></script> <script src="scripts/jquery.cookie.js" type="text/javascript"></script> <script src="scripts/tab.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#inputSearch").focus(function () { $(this).addClass("focus"); if ($(this).val() == this.defaultValue) { $(this).val(""); } }).blur(function () { $(this).removeClass("focus"); if ($(this).val() == "") { $(this).val(this.defaultValue); } }).keyup(function (e) { if (e.which == 13) { alert("提交表单！！"); } }) //换肤 var $li = $("#skin li"); $li.click(function () { switchSkin(this.id); }); var cookie_skin = $.cookie("MyCssSkin"); if (cookie_skin) { switchSkin(cookie_skin); } //导航效果 $("#nav li").hover(function () { $(this).find(".jnNav").show(); }, function () { $(this).find(".jnNav").hide(); } ) //热销效果 $(".jnCatainfo .promoted").append("<s class='hot'></s>"); //广告效果 var $imgrolls = $("#jnImageroll div a"); $imgrolls.css("opacity", "0.7"); var len = $imgrolls.length; var index = 0; var adTimer = null; $imgrolls.mouseover(function () { index = $imgrolls.index(this); showImg(index); }).eq(0).mouseover(); //滑入 停止动画，滑出开始动画. $('#jnImageroll').hover(function () { if (adTimer) { clearInterval(adTimer); } }, function () { adTimer = setInterval(function () { showImg(index) index++; if (index == len) { index = 0; } }, 5000); }).trigger("mouseleave"); //右侧最新动态模块内容添加超链接提示 var x = 10; var y = 20; $("a .tooltip").mousemove(function () { this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; $("body").append("tooltip"); $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); }).mouseout(function () { this.title = this.myTitle; $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }) }) //光标滑过//为实现 $("#jnBrandList li").each(function (index) { var $img = $(this).find("img"); var img_w = $img.width(); var img_h = $img.height(); var spanHtml = "<span style='position:absolute;top=0;left=5px;width:" + img_w + "px;height=" + img_h + "px ;' class='imageMsk'></span>"; $(spanHtml).appendTo(this); }) $("#jnBrandList").find(".imageMask").live("hove", function () { $(this).toggleClass("imageOver"); }) }) function switchSkin(skinName) { $("#" + skinName).addClass("selected").siblings().removeClass("selected"); $("#cssfile").attr("href", "styles/skin/" + skinName + ".css"); $.cookie("MyCssSkin", skinName, {path:"/",expires:10}); } //显示不同的幻灯片 function showImg(index) { var $rollobj = $("#jnImageroll"); var $rolllist = $rollobj.find("div a"); var newhref = $rolllist.eq(index).attr("href"); $("#JS_imgWrap").attr("href", newhref) .find("img").eq(index).stop(true, true).fadeIn().siblings().fadeOut(); $rolllist.removeClass("chos").css("opacity", "0.7") .eq(index).addClass("chos").css("opacity", "1"); } </script> <form id="form1" runat="server"> <div id="header"> <div class="contWidth"> <a class="logo" href="#nogo"> <img src="images/logo.gif" alt="JaneShop" /></a> <div class="search"> <input type="text" id="inputSearch" class="" value="请输入商品名称" /> </div> <ul id="skin"> <li id="skin_0" title="蓝色" class="selected">蓝色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色">天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</li> </ul> <div id="nav" class="mainNav"> <ul class="nav"> <li><a href="#">首 页</a></li> <li><a href="#">品 牌</a> <div class="jnNav"> <div class="subitem"> <dl class="fore"> <dt><a href="#nogo">品牌：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> <dl> <dt><a href="#nogo">品牌：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> </div> </div> </li> <li><a href="#">女 装</a> <div class="jnNav"> <div class="subitem"> <dl class="fore"> <dt><a href="#nogo">女 装：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> <dl> <dt><a href="#nogo">女 装：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> </div> </div> </li> <li><a href="#">男 装</a> <div class="jnNav"> <div class="subitem"> <dl class="fore"> <dt><a href="#nogo">男 装：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> <dl> <dt><a href="#nogo">男 装：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> </div> </div> </li> <li><a href="#">鞋包配饰</a></li> </ul> </div> </div> </div> <div id="content"> <div class="janeshop"> <div id="jnCatalog"> <h2 title="商品分类"> 商品分类</h2> <div class="jnCatainfo"> <h3> 推荐品牌</h3> <ul> <li><a href="#nogo">耐克</a></li> <li><a href="#nogo" class="promoted">阿迪达斯</a></li> <li><a href="#nogo">达芙妮</a></li> <li><a href="#nogo">李宁</a></li> <li><a href="#nogo">安踏</a></li> <li><a href="#nogo">奥康</a></li> <li><a href="#nogo" class="promoted">骆驼</a></li> <li><a href="#nogo">特步</a></li> </ul> <br class="clear" /> <h3> 女装</h3> <ul> <li><a href="#nogo">呢大衣</a></li> <li><a href="#nogo">T恤</a></li> <li><a href="#nogo">羽绒</a></li> <li><a href="#nogo">衬衫</a></li> <li><a href="#nogo">羊绒衫</a></li> <li><a href="#nogo">针织</a></li> <li><a href="#nogo">连衣裙</a></li> <li><a href="#nogo">皮外套</a></li> </ul> <br class="clear" /> <h3> 男装</h3> <ul> <li><a href="#nogo">衬衫</a></li> <li><a href="#nogo">T恤衫</a></li> <li><a href="#nogo">夹克</a></li> <li><a href="#nogo">大皮衣</a></li> <li><a href="#nogo">风衣</a></li> <li><a href="#nogo">牛仔裤</a></li> <li><a href="#nogo">西服</a></li> <li><a href="#nogo">卫衣</a></li> </ul> <br class="clear" /> <h3> 鞋包配饰</h3> <ul> <li><a href="#nogo">围巾</a></li> <li><a href="#nogo">旅行箱</a></li> <li><a href="#nogo">真皮包</a></li> <li><a href="#nogo">韩版</a></li> <li><a href="#nogo">达芙妮</a></li> <li><a href="#nogo">单肩包</a></li> <li><a href="#nogo">毛线</a></li> <li><a href="#nogo">清仓靴子</a></li> </ul> <br class="clear" /> </div> </div> <div id="jnImageroll"> <a href="#nogo" id="JS_imgWrap"> <img src="images/ads/1.jpg" alt="相约情人节" /> <img src="images/ads/2.jpg" alt="新款上线" /> <img src="images/ads/3.jpg" alt="愤怒小鸟特卖" /> <img src="images/ads/4.jpg" alt="男鞋促销第一波" /> <img src="images/ads/5.jpg" alt="春季新品发布" /> </a> <div> <a href="###1"><em>相约情人节</em><em>全场119元起</em></a> <a href="###2"><em>新款上线</em><em>全场357元起</em></a> <a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a> <a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a> <a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a> </div> </div> <div id="jnNotice"> <div id="jnMiaosha"> <a href="#nogo" class="JS_css3"> <img src="images/upload/20120216.jpg" alt="冬品清仓" /></a> </div> <div id="jnNoticeInfo"> <h2 title="最新动态"> 最新动态</h2> <ul> <li><a href="###1" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li> <li><a href="###2" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li> <li><a href="###3" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li> <li><a href="###4" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li> <li><a href="###5" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li> <li><a href="###6" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li> </ul> <br class="clear" /> </div> </div> <div id="jnBrand"> <div id="jnBrandTab"> <h2 title="品牌活动"> 品牌活动</h2> <ul> <li><a title="运动" href="#nogo">运动</a></li> <li><a title="女鞋" href="#nogo">女鞋</a></li> <li><a title="男鞋" href="#nogo">男鞋</a></li> <li><a title="Applife" href="#nogo">童鞋</a></li> </ul> </div> <div id="jnBrandContent"> <div id="jnBrandList"> <ul> <li><a href="###1" class="JS_live"> <img alt="耐克" src="images/upload/20120217.jpg" /></a> <span><a href="###1">耐克</a></span> </li> <li><a href="###2" class="JS_live"> <img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a> <span><a href="###2">阿迪达斯</a></span> </li> <li><a href="###3" class="JS_live"> <img alt="李宁" src="images/upload/20120219.png" /></a> <span><a href="###3">李宁</a></span> </li> <li><a href="###4" class="JS_live"> <img alt="安踏" src="images/upload/20120220.png" /></a> <span><a href="###4">安踏</a></span> </li> <li><a href="###1" class="JS_live"> <img alt="耐克" src="images/upload/20120217.jpg" /></a> <span><a href="###1">耐克</a></span> </li> <li><a href="###2" class="JS_live"> <img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a> <span><a href="###2">阿迪达斯</a></span> </li> <li><a href="###3" class="JS_live"> <img alt="李宁" src="images/upload/20120219.png" /></a> <span><a href="###3">李宁</a></span> </li> <li><a href="###4" class="JS_live"> <img alt="安踏" src="images/upload/20120220.png" /></a> <span><a href="###4">安踏</a></span> </li> <li><a href="###1" class="JS_live"> <img alt="耐克" src="images/upload/20120217.jpg" /></a> <span><a href="###1">耐克</a></span> </li> <li><a href="###2" class="JS_live"> <img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a> <span><a href="###2">阿迪达斯</a></span> </li> <li><a href="###3" class="JS_live"> <img alt="李宁" src="images/upload/20120219.png" /></a> <span><a href="###3">李宁</a></span> </li> <li><a href="###4" class="JS_live"> <img alt="安踏" src="images/upload/20120220.png" /></a> <span><a href="###4">安踏</a></span> </li> <li><a href="###1" class="JS_live"> <img alt="耐克" src="images/upload/20120217.jpg" /></a> <span><a href="###1">耐克</a></span> </li> <li><a href="###2" class="JS_live"> <img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a> <span><a href="###2">阿迪达斯</a></span> </li> <li><a href="###3" class="JS_live"> <img alt="李宁" src="images/upload/20120219.png" /></a> <span><a href="###3">李宁</a></span> </li> <li><a href="###4" class="JS_live"> <img alt="安踏" src="images/upload/20120220.png" /></a> <span><a href="###4">安踏</a></span> </li> </ul> </div> </div> </div> </div> </div> <div id="footer"> Copyright © 2009 - 2012 JaneShop Inc. </div> </form>
<link rel="stylesheet" href="styles/reset.css" type="text/css" /> <link rel="stylesheet" href="styles/main.css" type="text/css" /> <link rel="stylesheet" href="styles/thickbox.css" type="text/css" /> <link rel="stylesheet" href="styles/box.css" type="text/css"/> <script src="scripts/jquery.js" type="text/javascript"></script> <script src="scripts/jquery.jqzoom.js" type="text/javascript"></script> <script src="scripts/jquery.thickbox.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //放大镜效果 $(".jqzoom").jqzoom({ zoomType: "standard", lens: true, preloadImages: false, alwaysOn: false, zoomWidth: 340, zoomHeight: 340, xOffset: 10, yOffset: 0, position: "right" }) //遮罩层效果 //单机小图片切换大图片 $("#jnProitem ul .imgList li a").bind("click", function () { var imgSrc = $(this).find("img").attr("src"); var i = imgSrc.lastIndexOf("."); var unit = imgSrc.substring(i); imgSrc = imgSrc.substring(0, i); var imgSrc_big = imgSrc + "_big" + unit; $("#thickImg").attr("href", imgSrc_big); }) //产品属性卡 var $div_li = $("div .tab_menu ul li"); $div_li.click(function () { $(this).addClass("selected").siblings().removeClass("selected"); var index = $div_li.index(this); $("div .tab_box>div") .eq(index).show().siblings().hide(); }).hover(function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); }) //右侧产片颜色切换 $(".color_change ul li img").click(function () { $(this).addClass("hover").parent().siblings().find("img").removeClass("hover"); var imgSrc = $(this).attr("src"); var i = imgSrc.lastIndexOf("."); var unit = imgSrc.substring(i); imgSrc = imgSrc.substring(0, i); var imgsrc_small = imgSrc + "_one_small" + unit; var imgsrc_big = imgSrc + "_one_big" + unit; $("#bigImg").attr("src", imgsrc_small); $("#thickImg").attr("href", imgsrc_big); var alt = $(this).attr("alt"); $(".color_change strong").text(alt); var newImgSrc = imgSrc.replace("images/pro_img/", ""); $("#jnProitem .imgList li").hide(); $("#jnProitem .imgList").find(".imgList_" + newImgSrc).show(); //解决问题：切换颜色后，放大图片还是显示原来的图片。 $("#jnProitem .imgList").find(".imgList_" + newImgSrc).eq(0).find("a").click(); // $(".color_change ul li img").click(function () { // $(this).addClass("hover").parent().siblings().find("img").removeClass("hover"); // var imgSrc = $(this).attr("src"); // var i = imgSrc.lastIndexOf("."); // var unit = imgSrc.substring(i); // imgSrc = imgSrc.substring(0, i); // var imgSrc_small = imgSrc + "_one_small" + unit; // var imgSrc_big = imgSrc + "_one_big" + unit; // $("#bigImg").attr({ "src": imgSrc_small }); // $("#thickImg").attr("href", imgSrc_big); // var alt = $(this).attr("alt"); // $(".color_change strong").text(alt); // var newImgSrc = imgSrc.replace("images/pro_img/", ""); // $("#jnProitem .imgList li").hide(); // $("#jnProitem .imgList").find(".imgList_" + newImgSrc).show(); // //解决问题：切换颜色后，放大图片还是显示原来的图片。 // $("#jnProitem .imgList").find(".imgList_" + newImgSrc).eq(0).find("a").click(); // }); }) //右侧产品尺寸切换 $(".pro_size li").click(function () { $(this).addClass("cur").siblings().removeClass("cur"); $(this).parents("ul").siblings("strong").text($(this).text()); }) //右侧出现数量和价格联动 var $span = $(".pro_price strong"); var price = $span.text(); $("#num_sort").change(function () { var num = $(this).val(); var amount = num * price; $span.text(amount); }) //给产品评分效果 $("ul .rating li a").click(function () { var title = $(this).attr("title"); }) }) </script> <div id="header"> <div class="contWidth"> <a class="logo" href="#nogo"> <img src="images/logo.gif" alt="JaneShop" /></a> <div class="search"> <input type="text" id="inputSearch" class="" value="请输入商品名称" /> </div> <ul id="skin"> <li id="skin_0" title="蓝色" class="selected">蓝色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色">天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</li> </ul> <div id="nav" class="mainNav"> <ul class="nav"> <li><a href="#">首 页</a></li> <li><a href="#">品 牌</a> <div class="jnNav"> <div class="subitem"> <dl class="fore"> <dt><a href="#nogo">品牌：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> <dl> <dt><a href="#nogo">品牌：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> </div> </div> </li> <li><a href="#">女 装</a> <div class="jnNav"> <div class="subitem"> <dl class="fore"> <dt><a href="#nogo">女 装：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> <dl> <dt><a href="#nogo">女 装：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> </div> </div> </li> <li><a href="#">男 装</a> <div class="jnNav"> <div class="subitem"> <dl class="fore"> <dt><a href="#nogo">男 装：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> <dl> <dt><a href="#nogo">男 装：</a> </dt> <dd> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo"> 达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em><a href="#nogo">安踏</a></em> <em><a href="#nogo">奥康</a></em> <em><a href="#nogo">骆驼</a></em> <em><a href="#nogo"> 特步</a></em> <em><a href="#nogo">耐克</a></em> <em><a href="#nogo">阿迪达斯</a></em> <em><a href="#nogo">达芙妮</a></em> <em><a href="#nogo">李宁</a></em> <em class="noborder"> <a href="#nogo">特步</a></em> </dd> </dl> </div> </div> </li> <li><a href="#">鞋包配饰</a></li> </ul> </div> </div> </div> <div id="content"> <div class="janeshop"> <div id="jnCatalog"> <h2 title="商品分类"> 商品分类</h2> <div class="jnCatainfo"> <h3> 推荐品牌</h3> <ul> <li><a href="#nogo">耐克</a></li> <li><a href="#nogo" class="promoted">阿迪达斯</a></li> <li><a href="#nogo">达芙妮</a></li> <li><a href="#nogo">李宁</a></li> <li><a href="#nogo">安踏</a></li> <li><a href="#nogo">奥康</a></li> <li><a href="#nogo" class="promoted">骆驼</a></li> <li><a href="#nogo">特步</a></li> </ul> <br class="clear" /> <h3> 女装</h3> <ul> <li><a href="#nogo">呢大衣</a></li> <li><a href="#nogo">T恤</a></li> <li><a href="#nogo">羽绒</a></li> <li><a href="#nogo">衬衫</a></li> <li><a href="#nogo">羊绒衫</a></li> <li><a href="#nogo">针织</a></li> <li><a href="#nogo">连衣裙</a></li> <li><a href="#nogo">皮外套</a></li> </ul> <br class="clear" /> <h3> 男装</h3> <ul> <li><a href="#nogo">衬衫</a></li> <li><a href="#nogo">T恤衫</a></li> <li><a href="#nogo">夹克</a></li> <li><a href="#nogo">大皮衣</a></li> <li><a href="#nogo">风衣</a></li> <li><a href="#nogo">牛仔裤</a></li> <li><a href="#nogo">西服</a></li> <li><a href="#nogo">卫衣</a></li> </ul> <br class="clear" /> <h3> 鞋包配饰</h3> <ul> <li><a href="#nogo">围巾</a></li> <li><a href="#nogo">旅行箱</a></li> <li><a href="#nogo">真皮包</a></li> <li><a href="#nogo">韩版</a></li> <li><a href="#nogo">达芙妮</a></li> <li><a href="#nogo">单肩包</a></li> <li><a href="#nogo">毛线</a></li> <li><a href="#nogo">清仓靴子</a></li> </ul> <br class="clear" /> </div> </div> <div id="jnProitem"> <div class="jqzoomWrap"> <a href="images/pro_img/blue_one_big.jpg" class="jqzoom" rel='gal1' title="免烫高支棉条纹衬衣"> <img src="images/pro_img/blue_one_small.jpg" title="免烫高支棉条纹衬衣" alt="免烫高支棉条纹衬衣" id="bigImg" /> </a> </div> <span><a title="介绍文字" id="thickImg" href="images/pro_img/blue_one_big.jpg" class="thickbox"> <img src="images/look.gif" alt="点击看大图" /> </a></span> <ul class="imgList"> <li class="imgList_blue"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_one_small.jpg',largeimage: 'images/pro_img/blue_one_big.jpg'}"> <img src='images/pro_img/blue_one.jpg' alt="" /></a></li> <li class="imgList_blue"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_two_small.jpg',largeimage: 'images/pro_img/blue_two_big.jpg'}"> <img src='images/pro_img/blue_two.jpg' alt="" /></a></li> <li class="imgList_blue"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_three_small.jpg',largeimage: 'images/pro_img/blue_three_big.jpg'}"> <img src='images/pro_img/blue_three.jpg' alt="" /></a></li> <li class="imgList_green hide"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/green_one_small.jpg',largeimage: 'images/pro_img/green_one_big.jpg'}"> <img src='images/pro_img/green_one.jpg' alt="" /></a></li> <li class="imgList_green hide"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/green_two_small.jpg',largeimage: 'images/pro_img/green_two_big.jpg'}"> <img src='images/pro_img/green_two.jpg' alt="" /></a></li> <li class="imgList_yellow hide"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/yellow_one_small.jpg',largeimage: 'images/pro_img/yellow_one_big.jpg'}"> <img src='images/pro_img/yellow_one.jpg' alt="" /></a></li> <li class="imgList_yellow hide"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/yellow_two_small.jpg',largeimage: 'images/pro_img/yellow_two_big.jpg'}"> <img src='images/pro_img/yellow_two.jpg' alt="" /></a></li> <li class="imgList_yellow hide"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/yellow_three_small.jpg',largeimage: 'images/pro_img/yellow_three_big.jpg'}"> <img src='images/pro_img/yellow_three.jpg' alt="" /></a></li> </ul> <div class="tab"> <div class="tab_menu"> <ul> <li class="selected">产品属性</li> <li>产品尺码表</li> <li>产品介绍</li> </ul> </div> <div class="tab_box"> <div> 沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。 </div> <div class="hide"> 来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，曲摆的现代人性化裁减，相得益彰，浑然天成。 </div> <div class="hide"> 世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。 </div> </div> </div> </div> <div id="jnDetails"> <div class="jnProDetail"> <h4> 免烫高支棉条纹衬衣</h4> <ul class="jnProDetailList"> <li>全新精品高支棉衬衫再次提升品质，精选100%新疆长绒棉织造而成，平整度好，短绒少； 80-100高支双股经纬交织，带来无与伦比的舒适享受；而且面料反光效果好，具有漂亮的光泽，质感上佳，有利于免烫效果的维持！ </li> <li><span>价　　格：</span> <strong class="del">379.00</strong>元 </li> <li class="tbDetailPrice"><span>促　　销：</span> <strong>200.00</strong>元 </li> <li class="color_change"><span>颜　　色：</span> <strong>蓝白</strong> <ul> <li> <img alt="蓝白" src="images/pro_img/blue.jpg" /></li> <li> <img alt="黄白" src="images/pro_img/yellow.jpg" /></li> <li> <img alt="粉绿" src="images/pro_img/green.jpg" /></li> </ul> </li> <li class="pro_size"><span>尺　　寸：</span> <strong>未选择</strong> <ul> <li>S</li> <li>L</li> <li>SL</li> <li>LL</li> </ul> </li> <li><span>数　　量：</span> <div class="pro_num"> <select id="num_sort"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </li> <li class="pro_price"><span>总　　计：</span> <strong>200</strong>元 </li> </ul> <div class="pro_rating"> 给商品评分： <ul class="rating nostar"> <li class="one"><a title="1分" href="#">1</a></li> <li class="two"><a title="2分" href="#">2</a></li> <li class="three"><a title="3分" href="#">3</a></li> <li class="four"><a title="4分" href="#">4</a></li> <li class="five"><a title="5分" href="#">5</a></li> </ul> </div> <div id="cart"> <a href="#"> <img src="images/btn_cart.png" alt="放入购物车" /></a> </div> </div> </div> </div> </div>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <link href="Mobilejss/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css" /> <script src="Mobilejss/jquery.js" type="text/javascript"></script> <script src="Mobilejss/jquery.mobile-1.0.1.min.js" type="text/javascript"></script> <div data-role="page"> <div data-role="header"> <h1> My Title</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="b"> <li ><a href="#">acura</a></li> <li ><a href="#">acura</a></li> <li ><a href="#">acura</a></li> <li ><a href="#">acura</a></li> <li ><a href="#">acura</a></li> </ul> </div> <div data-role="footer"> <h1> Footer content</h1> </div> </div>
