锋利的JQuery实例-用JQuery打造个性网站-详细页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="details.aspx.cs" Inherits="details" %><!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 id="Head1" runat="server"> <title>Jane Shopping</title> <link type="text/css" href="Styles/base.css" rel="Stylesheet" /> <link type="text/css" href="Styles/header.css" rel="Stylesheet" /> <link type="text/css" href="Styles/nav.css" rel="Stylesheet" /> <link type="text/css" href="Styles/detail.css" rel="Stylesheet" /> <link type="text/css" href="Styles/thickbox.css" rel="Stylesheet" /> <script src="Scripts/jquery-1.4.1.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 src="Scripts/jquery.livequery.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function () { $(".jqzoom").jqueryzoom({ xzoom: 300, //放大图的宽度(默认是 200) yzoom: 300, //放大图的高度(默认是 200) offset: 10, //离原图的距离(默认是 10) position: "right", //放大图的定位(默认是 "right") preload: 1 }); //单击左侧产品小图片切换为大图片 $(".imgList li img").livequery("click",function () { var imgSrc = $(this).attr("src"); var i = imgSrc.lastIndexOf('.'); var unit = imgSrc.substring(i); imgSrc = imgSrc.substring(0, i); var imgSrc_small = imgSrc + "_small" + unit; var imgSrc_big = imgSrc + "_big" + unit; $("#bigImg").attr({ "src": imgSrc_small, "jqimg": imgSrc_big }); $("#thickImg").attr("href", imgSrc_big); }); //左侧产品属性介绍之类的选项卡 $(".tab_menu ul li").click(function () { $(this).addClass("selected") .siblings().removeClass("selected"); var index = $('.tab_menu ul li').index(this); $(".tab_box > div").addClass("hide") .eq(index).removeClass("hide"); }).hover(function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); }); //右侧产品颜色切换 $(".color_change ul li img").click(function () { var imgColorSrc = $(this).attr("src"); var iColor = imgColorSrc.lastIndexOf("."); var colorUnit = imgColorSrc.substring(iColor); var imgColorSrc = imgColorSrc.substring(0, iColor); var imgColor_big = imgColorSrc + "_one_big" + colorUnit; var imgColor_small = imgColorSrc + "_one_small" + colorUnit; $("#bigImg").attr({ "src": imgColor_small, "jqimg": imgColor_big }); $("#thickImg").attr("href", imgColor_big); $(".color_change strong").text($(this).attr("alt")); var url = imgColorSrc + ".html"; $(".imgList").empty().load(url); }); //右侧产品尺寸切换 $(".pro_size ul li").click(function () { $(this).parent("ul").siblings("strong").text($(this).text()); }); //右侧产品数量和价格联动 var $span = $(".pro_price span"); $("#num_sort").change(function () { var num = $("#num_sort").val(); var price = $span.text(); var amount = num * price; $span.text(amount); }).change(); //产品评分效果 $(".pro_rating li a").click(function () { alert("你给此商品的评分是：" + this.title); var cl = $(this).parent().attr("class"); $(this).parent().parent("ul").removeClass().addClass("rating " + cl + "star"); $(this).blur(); //去掉超链接的虚线框 return false; }); //最终提示用户购买 $("#cart a").click(function () { var pro_name = $(".pro_detail_right h4:first").text(); var pro_color = $(".color_change strong:first").text(); var pro_size = $(".pro_size strong:first").text(); var pro_num = $("#num_sort").val(); var price = $(".pro_price span").text(); var dilog = "感谢你的购买.\n你购买的是：\n" + "产品是：" + pro_name + ";\n" + "尺寸是：" + pro_size + ";\n" + "颜色是：" + pro_color + ";\n" + "数量是：" + pro_num + ";\n" + "总价是：" + price + "."; if (confirm(dilog)) { alert("你已经下单！"); } return false; //避免页面跳转 }); }); </script></head><body> <form id="form1" runat="server"> <div id="header"> <a id="logo" href="#">Jane Shopping</a> <ul id="skin"> <li id="skin_0" title="蓝色" 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> <div id="navigation"> <ul> <li><a href="#">首页</a></li> <li><a href="#">衬衫</a> <ul> <li><a href="#">短袖衬衫</a></li> <li><a href="#">长袖衬衫</a></li> <li><a href="#">无袖衬衫</a></li> </ul> </li> <li><a href="#">卫衣</a> <ul> <li><a href="#">开襟卫衣</a></li> <li><a href="#">套头卫衣</a></li> </ul> </li> <li><a href="#">裤子</a> <ul> <li><a href="#">休闲裤</a></li> <li><a href="#">卡其裤</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">短裤</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul> </div> <!--主体内容开始--><div id="content" alt="犀利的JQuery实例-用JQuery打造个性网站-详细页面" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/></div><span> <a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" src="images/look.gif" /> </a> </span><ul alt="犀利的JQuery实例-用JQuery打造个性网站-详细页面" /></li><li><img src="images/pro_img/blue_two.jpg" alt="犀利的JQuery实例-用JQuery打造个性网站-详细页面" /></li><li><img src="images/pro_img/blue_three.jpg" alt="犀利的JQuery实例-用JQuery打造个性网站-详细页面" /></li></ul><div alt="犀利的JQuery实例-用JQuery打造个性网站-详细页面" /></li><li><img src="images/pro_img/yellow.jpg" alt="犀利的JQuery实例-用JQuery打造个性网站-详细页面" /></li><li><img src="images/pro_img/green.jpg" alt="犀利的JQuery实例-用JQuery打造个性网站-详细页面" /></li></ul></div><div style="width:40px;" ><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><div title="1分">1</a></li><li title="2分">2</a></li><li title="3分">3</a></li><li title="4分">4</a></li><li title="5分">5</a></li></ul></div><div id="cart"><a href="#"><img src="images/btn_cart.png"/></a></div></div></div></div><!--主体内容结束--> </form></body></html>?