Jqzoom，tickbox使用方法，图片放大，切换图片颜色

1.根据数量的改变而改变价格

$(function() {
				//尺寸点击事件
				$(".pro_size li span").click(function() {
					$(this).parents("ul").siblings("strong").text($(this).text());
				});

				//数量价格改变
				var $span = $(".pro_price span");

				var div_price = $span.text();

				$("#num_sort").change(function() {

					var num = $(this).val();

					var amount = num * div_price;

					$span.text(amount);

				}).change();

HTML

<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>

效果图：

1.根据所选的星星评分

//产品评分效果
				//评分效果的图片点击
				$(".rating li a").click(function() {
					//当前事件超链接的title
					var title = $(this).attr("title");
					//跳出评分
					alert("你给出的评分是" + title);
					//parent():在给定的父元素下匹配所有的子元素
					//获取一个class下的所有子元素属性
					var cl = $(this).parent().attr("class");
					//获取图片的点击后的效果
					$(this).parent().parent().removeClass().addClass("rating  " + cl + "star");
				});
			});

2.html代码

<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>

效果图：

图片放大镜

	//图片放大展示
			$(function() {
				//JSON{属性名：属性值，属性名；属性名}
				$(".jqzoom").jqueryzoom({
					xzoom: 300, //zooming div default width(default width value is 200)
					yzoom: 300, //zooming div default width(default height value is 200)
					offset: 10, //zooming div default offset(default offset value is 10)
					position: "right" //zooming div position(default position value is "right")
				});
			});

html

<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>

效果图：
使用过程中要先引用js，再引用Jqzoom，tickbox。