<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>
表单拖动sortable
表格变色.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>
表格变色.aspx
自定义选择器
<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>
手机网站
时间： 2024-11-09 10:04:59