- 浏览: 111738 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
wuliupo:
这个有一个BUG,当有的td设置 background-col ...
【JQuery】鼠标经过表格行变色 -
cheeruplc:
使用了以上的方式 我用一个for循环多次输出alert 循环 ...
页面跳转 -
xbm376:
谢谢分享!
Gponit和GLatLng的区别 -
baiyejianxin:
king130520 写道 MXML是FLEX中的标记语言,与 ...
FLEX -
king130520:
...
FLEX
<%@ 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="蓝色" 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> <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" class="global_module"> <h3>商品信息</h3> <div class="pro_detail"> <div class="pro_detail_left"> <div class="jqzoom"><img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/></div> <span> <a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox"> <img alt="点击看大图" src="images/look.gif" /> </a> </span> <ul class="imgList"> <li><img src="images/pro_img/blue_one.jpg" alt="" /></li> <li><img src="images/pro_img/blue_two.jpg" alt="" /></li> <li><img src="images/pro_img/blue_three.jpg" alt="" /></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"> 来自新疆无污染的生态棉花,采用紧密纺精梳棉纱,单经双纬的织造组织,造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺,易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理,立体剪裁,以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减,相得益彰,浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象,透出热情、优雅的个性;精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型,色彩缤纷呈现,以适合本季着装,更显自然、舒适境界。 </div> <div class="hide"> 世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形,缝线部位平服工整、牢固耐磨;人性化的4片式后背打褶结构设计提供更舒适的活动空间;领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现;醇正天然设计,只为彰显自然荣耀。 </div> </div> </div> </div> <div class="pro_detail_right"> <h4>免烫高支棉条纹衬衣</h4> <p>全新精品高支棉衬衫再次提升品质,精选100%新疆长绒棉织造而成,平整度好,短绒少; 80-100高支双股经纬交织,带来无与伦比的舒适享受;而且面料反光效果好,具有漂亮的光泽,质感上佳,有利于免烫效果的维持。※不仅如此,深受消费者欢迎的经典款式使精品高支棉衬衫更贴合东方人身型气质,多款衬衫还采用简单且个性鲜明条纹元素,利用最为单纯的几何线条,透过条纹的粗细、宽窄间的重组,带出令人耳目一新的时尚气息,更显出俊朗男士的挺拔身型!</p> <p><strong>现价:200元 <del>原价:300元</del></strong></p> <p><strong>编号:33313993</strong></p> <div class="color_change"> 颜色:<strong>蓝白</strong> <ul> <li><img src="images/pro_img/blue.jpg" alt="蓝白" /></li> <li><img src="images/pro_img/yellow.jpg" alt="黄白" /></li> <li><img src="images/pro_img/green.jpg" alt="粉绿" /></li> </ul> </div> <div class="pro_size"> 尺寸:<strong>未选择</strong> <ul> <li><span>S</span></li> <li><span>L</span></li> <li><span>SL</span></li> <li><span>LL</span></li> </ul> </div> <div class="pro_num"> 数量: <select id="num_sort" 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 class="pro_price"> 总计:<span>200</span>元 </div> <div class="pro_rating"> 给商品评分: <ul class="rating nostar"> <li class="one"><a href="#" title="1分">1</a></li> <li class="two"><a href="#" title="2分">2</a></li> <li class="three"><a href="#" title="3分">3</a></li> <li class="four"><a href="#" title="4分">4</a></li> <li class="five"><a href="#" 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>
发表评论
-
分享33个优秀的 jQuery 教程
2011-07-06 09:19 899转载:http://www.cnblogs.com/lhb25 ... -
细说Cookie
2011-07-04 11:51 832转载:http://www.cnblogs.com ... -
百度和优酷的搜索体验改善,类似Google Instant搜索
2011-06-30 10:02 1113转载:http://www.cnblogs.com/s ... -
jquery如何退出each循环的?
2011-06-24 14:37 1436在回调函数里return false即可,大多数jq的方法都 ... -
jquery获取当前鼠标的x、y位置
2011-05-25 11:49 2290<div id="testDiv&quo ... -
26个JQuery使用小技巧
2011-04-21 17:41 877The use of the jQuery library i ... -
JQuery UI Demo Darggable学习结果
2011-04-14 10:24 1398jQuery UI-Draggable 参数集合 jQu ... -
锋利的JQuery实例-用JQuery打造个性网站-首页
2011-03-18 17:23 1988<%@ Page Language="C#&q ... -
cookie插件
2011-03-12 09:45 776<!DOCTYPE HTML PUBLIC " ... -
去除左、右边空格
2011-03-12 09:37 819//插件编写 //调用时$.ltrim(string)去除左 ... -
css与attr、trigger()与toggle()的区别
2011-03-08 17:48 1333<select multiple=&quo ... -
复选框应用
2011-03-08 15:58 693前台用服务器控件CheckBoxList ... -
锋利的JQuery实例-视频展示效果
2011-03-07 17:14 1595<!DOCTYPE html PUBLIC " ... -
JQuery中动画效果的left值
2011-03-07 17:06 848//left: "+=50& ... -
JQuery事件对象的属性event
2011-03-03 11:35 1316event.type属性(获取事件的类型) $(&quo ... -
锋利的JQuery实例-图片提示效果
2011-03-02 16:41 1156<!DOCTYPE html PUBLIC " ... -
锋利的JQuery实例-超链接提示效果
2011-03-02 15:37 1144<!DOCTYPE html PUBLIC " ... -
锋利的JQuery学习笔记-认识JQuery
2011-03-02 15:09 9771.JQuery代码风格 链式操作风格 (1 ... -
js乱码解决方法
2009-03-25 13:19 1257有时候,我们在调用js文件的时候,会发现js文件里的中文变成乱 ... -
【JQuery】鼠标经过表格行变色
2009-03-11 13:52 6620[color=darkred][/color]<!DOC ...
相关推荐
jQuery实例-信息提示jQuery实现 jQuery实例-信息提示jQuery实现
教程名称:jQuery实例视频教程课程目录:【】jQuery实例-商城放大镜效果【】jQuery实例-图片放大效果【】jQuery实例-图片转动立体效果【】jQuery实例-对联广告【】jQuery实例-返回顶部(解决IE6固定定位)【】jQuery...
<锋利的jquery>电子书的实验源码,用于自己的学习。jquery是js的超集,平时的开发过程中,原生的js用的倒没有jquery多
人民邮电出版社的锋利的jQuery 实例。jquery是一个轻量级的库,拥有强大的选择器,来自此书的实例
JQuery实例-年月日级联菜单.rar
用jQuery实现图片预加载,内含jquery1.3的js
jQuery各种实例--权威指南-源代码
jquery经典实例60例-动画实例 jquery经典实例60例-动画实例 jquery经典实例60例-动画实例
jquery-starterkit实例 jquery-starterkit实例
很全面,锋利的JQUERY书中光盘附带的实例源码 很多JQUERY例子
jquery 实例 真的不错真的不错 jquery
jquery tag-it使用文档以及实例,系自己简单总结
jQuery 幻灯片实例
锋利的jQuery实例源码锋利的jQuery实例源码锋利的jQuery实例源码锋利的jQuery实例源码锋利的jQuery实例源码
锅拍灰太狼小游戏,学习jQuery入门级代码实例,包含源代码及注释信息,含有所有使用到的图片素材,仅供学习使用。
jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例
jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例jquery 实例
这本书相当不错!而且还有很多实例哦!会让你对Jquery一重新的认识,选择器的介绍/表单元素的操作!
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解...
里面有很多不错的jquery实例,适合于初学者参考。例如:表格隔行变色, 鼠标滑过变色,点击变色;收缩展开功能