【js与jquery】产品详情页面常用的js特效

最新推荐文章于 2023-09-09 07:48:48 发布

yanhui_wei

最新推荐文章于 2023-09-09 07:48:48 发布

阅读量7.3k

点赞数 2

分类专栏：【jquery深入研究】文章标签：产品 jquery class function div url

【jquery深入研究】专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1.效果图如下：

2.html代码：

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

3.jquery代码：

/*衣服颜色切换*/
$(function(){
	$(".color_change ul li img").click(function(){ 

		  //当前选择颜色图片的src属性，如：<li><img src="images/pro_img/blue.jpg" alt="蓝白" /></li>
		  var imgSrc = $(this).attr("src");//"images/pro_img/blue.jpg"

		  var i = imgSrc.lastIndexOf(".");
		  var unit = imgSrc.substring(i);//结果：".jpg"
		  imgSrc = imgSrc.substring(0,i);//结果："images/pro_img/blue"
		  var imgSrc_small = imgSrc + "_one_small"+ unit;//结果："images/pro_img/blue_one_small.jpg"
		  var imgSrc_big = imgSrc + "_one_big"+ unit;//结果："images/pro_img/blue_one_big.jpg"

		  //同时给两个属性赋值
		  $("#bigImg").attr({"src": imgSrc_small ,"jqimg": imgSrc_big });
		  $("#thickImg").attr("href", imgSrc_big);

		  //当前选择颜色图片的alt属性的值："蓝色"
		  var alt = $(this).attr("alt");

		  //"蓝色"
		  $(".color_change strong").text(alt);

		  //"images/pro_img/blue.html"
		  var url = imgSrc+".html";

		  //先清空，再重新加载新的图片
		  $(".pro_detail_left ul.imgList").empty().load(url);
	});
});

/*点击左侧产品小图片切换大图*/
$(function(){
	$(".pro_detail_left ul li img").livequery("click",function(){ 
		  
		  //如：<li><img src="images/pro_img/blue_one.jpg" alt="" /></li>
		  var imgSrc = $(this).attr("src");

		  var i = imgSrc.lastIndexOf(".");

		  //结果：".jpg"
		  var unit = imgSrc.substring(i);

		  //结果："images/pro_img/blue_one"
		  imgSrc = imgSrc.substring(0,i);

		  //"images/pro_img/blue_one_small.jpg"
		  var imgSrc_small = imgSrc + "_small"+ unit;

		  //"images/pro_img/blue_one_big.jpg"
		  var imgSrc_big = imgSrc + "_big"+ unit;

		  //同时给两个属性赋值
		  $("#bigImg").attr({"src": imgSrc_small ,"jqimg": imgSrc_big });
		  $("#thickImg").attr("href", imgSrc_big);
	});
});

/*Tab 选项卡 标签*/
$(function(){
	    var $div_li =$("div.tab_menu ul li");
	    $div_li.click(function(){
			$(this).addClass("selected")            //当前<li>元素高亮
				   .siblings().removeClass("selected");  //去掉其他同辈<li>元素的高亮
            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
			$("div.tab_box > div")   	//选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
					.eq(index).show()   //显示 <li>元素对应的<div>元素
					.siblings().hide(); //隐藏其他几个同辈的<div>元素
		}).hover(function(){
			$(this).addClass("hover");
		},function(){
			$(this).removeClass("hover");
		})
})