网上的京东商城商品详细信息显示效果 -

heisalittlebird

浏览: 20340 次

最近访客更多访客>>

jacket233

alexqiu_hz

zpit7360

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (28)

社区版块

存档分类

网上的京东商城商品详细信息显示效果

base.css

@charset "utf-8";
/* CSS Document */
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img,ins,small,strong,var,b,u, i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{margin:0;padding:0;}
body{ background:#FFFFFF; color:#333333; font-family:"宋体",Arial,Lucida,Verdana,Helvetica,sans-serif; font-size:12px; line-height:150%; }
a:link, a:visited{ color:#333333; text-decoration:none; }
a:hover{ color:#CC0000; text-decoration:underline; }
a:active{ color:#990000; }
ol, ul{ list-style: none outside none;}
.m { margin-bottom: 10px; }
.m, .mt, .mc, .mb{ overflow: hidden; }

/* Clear Fix */ 
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} 
.clearfix{display:inline-block;} 
/* Hide from IE Mac */ 
.clearfix{display:block;} 
/* End hide from IE Mac */ 
/* end of clearfix */ 
/*页面全局结束*/
.tab{ overflow:hidden; }
.tab li,.tab a,.tab-item{cursor:pointer;float:left;text-align: center;}
.m, .mt, .mc, .mb{overflow:hidden;}
.mt .extra{float: right;}

.right-extra .mt{height:28px;line-height:28px;padding:0 10px 8px;border-top:1px solid #EED97C;background:url(../images/bg_hotsale.gif) repeat-x 0 -552px;color:#c00;}
.right-extra .tab{border-bottom:2px solid #BE0000;margin-bottom:10px;}
.right-extra .tab li{position:relative;height:24px;padding:3px 12px 0;background:url(../images/icon_clubs.gif) #ccc no-repeat right -150px;overflow:hidden;margin-right:3px;line-height:24px;font-size:14px;font-weight:bold;color:#c30;}
.right-extra .tab span{position:absolute;left:0;top:0;z-index:1;width:10px;height:27px;background:url(../images/icon_clubs.gif) no-repeat 0 -150px;}
.right-extra .tab a{float:none;color:#c30;}
.right-extra .tab .curr{background-position:right -178px;color:#fff;}
.right-extra .tab .curr span{background-position:0 -178px;}
.right-extra .tab .curr a{color:#fff;}
.right-extra .mc .extra{padding:5px 10px;border-top:1px solid #F3E6C6;}
.right-extra .total{float:right;}
.right-extra .total strong{color:#FF7403;}
.right-extra .total a:link,.right-extra .total a:visited{color:#005aa0;}
.right-extra .join a:link,.right-extra .join a:visited{color:#FF7604;}
.right-extra .norecode{padding:0 10px 10px;}
.right-extra .iloading{margin-bottom:10px;}
/*评论列表*/
#comment .item{border:1px solid #FFFFFF;padding:8px 15px;}
#comment .odd{background: none repeat scroll 0 0 #F4F9FF;border: 1px solid #EDF0F1;border-radius:10px 10px 10px 10px;}
#comment .user{color:#999999;text-align: right;}
#comment .user span{margin-left: 20px;}
#comment .user .u-level{color:#088100;}
#comment dl{margin-bottom:5px;overflow:hidden;}
#comment dt{float:left;text-align:right;width:80px;}
#comment dd{float:right;overflow:hidden;width:649px;}
#comment .content{float:left;width:510px;}
#comment .date-answer{color:#999999;float:right;text-align:right;width:130px;}
#comment .useful{color:#999999;text-align:right;}
#comment .useful a{color: #005AA0;}
#comment dt b{background-image: url("../images/icon_clubs.gif");background-repeat: no-repeat;float:left;height:13px;margin:2px 3px 0 0;width:14px;}
#comment .ask b{background-position:-72px -14px;}
#comment .answer{color:#D75509;}
#comment .answer b{background-position:-57px -14px;}

/*图片放大镜样式*/
.jqzoom{float:left;border:none;position:relative;padding:0px;cursor:pointer;margin:0px;display:block;}
.zoomdiv{z-index:100;position:absolute;top:0px;left:0px;width:350px;height:350px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
.jqZoomPup{z-index:10;visibility:hidden;position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #aaa;background:#ffffff /*url(../images/zoom.png) 50% center no-repeat*/;opacity: 0.5;-moz-opacity: 0.5;-khtml-opacity: 0.5;filter: alpha(Opacity=50);}

/*图片小图预览列表*/
.spec-preview{width:350px;height:350px;border:1px solid #DFDFDF;}
.spec-scroll{clear:both;margin-top:5px;width:352px;}
.spec-scroll .prev{float:left;margin-right:4px;}
.spec-scroll .next{float:right;}
.spec-scroll .prev,.spec-scroll .next{display:block;font-family:"宋体";text-align:center;width:10px;height:54px; line-height:54px;border:1px solid #CCC;background:#EBEBEB;cursor:pointer;text-decoration:none;}
.spec-scroll .items{float:left;position:relative;width:322px;height:56px;overflow:hidden;}
.spec-scroll .items ul{position:absolute;width:999999px;height:56px;}
.spec-scroll .items ul li{float:left;width:64px;text-align:center;}
.spec-scroll .items ul li img{border:1px solid #CCC;padding:2px;width:50px;height:50px;}
.spec-scroll .items ul li img:hover{border:2px solid #FF6600;padding:1px;}

base.js

/*===========================
 *作者：动力启航(谢凯)
 *网址：http://www.it134.cn
 *转发请保留作者信息，谢谢
===========================*/

//=====================全局函数========================
//Tab控制函数
function tabs(tabId, tabNum){
	//设置点击后的切换样式
	$(tabId + " .tab li").removeClass("curr");
	$(tabId + " .tab li").eq(tabNum).addClass("curr");
	//根据参数决定显示内容
	$(tabId + " .tabcon").hide();
	$(tabId + " .tabcon").eq(tabNum).show();
}
//=====================全局函数========================

//==================图片详细页函数=====================
//鼠标经过预览图片函数
function preview(img){
	$("#preview .jqzoom img").attr("src",$(img).attr("src"));
	$("#preview .jqzoom img").attr("jqimg",$(img).attr("bimg"));
}

//图片放大镜效果
$(function(){
	$(".jqzoom").jqueryzoom({xzoom:380,yzoom:410});
});

//图片预览小图移动效果,页面加载时触发
$(function(){
	var tempLength = 0; //临时变量,当前移动的长度
	var viewNum = 5; //设置每次显示图片的个数量
	var moveNum = 2; //每次移动的数量
	var moveTime = 300; //移动速度,毫秒
	var scrollDiv = $(".spec-scroll .items ul"); //进行移动动画的容器
	var scrollItems = $(".spec-scroll .items ul li"); //移动容器里的集合
	var moveLength = scrollItems.eq(0).width() * moveNum; //计算每次移动的长度
	var countLength = (scrollItems.length - viewNum) * scrollItems.eq(0).width(); //计算总长度,总个数*单个长度
	  
	//下一张
	$(".spec-scroll .next").bind("click",function(){
		if(tempLength < countLength){
			if((countLength - tempLength) > moveLength){
				scrollDiv.animate({left:"-=" + moveLength + "px"}, moveTime);
				tempLength += moveLength;
			}else{
				scrollDiv.animate({left:"-=" + (countLength - tempLength) + "px"}, moveTime);
				tempLength += (countLength - tempLength);
			}
		}
	});
	//上一张
	$(".spec-scroll .prev").bind("click",function(){
		if(tempLength > 0){
			if(tempLength > moveLength){
				scrollDiv.animate({left: "+=" + moveLength + "px"}, moveTime);
				tempLength -= moveLength;
			}else{
				scrollDiv.animate({left: "+=" + tempLength + "px"}, moveTime);
				tempLength = 0;
			}
		}
	});
});
//==================图片详细页函数=====================

jquery.jqzoom.js

//**************************************************************
// jQZoom allows you to realize a small magnifier window,close
// to the image or images on your web page easily.
//
// jqZoom version 2.1
// Author Doc. Ing. Renzi Marco(www.mind-projects.it)
// First Release on Dec 05 2007
// i'm searching for a job,pick me up!!!
// mail: renzi.mrc@gmail.com
//**************************************************************

(function($){

		$.fn.jqueryzoom = function(options){
		var settings = {
				xzoom: 200,//zoomed width default width
				yzoom: 200,//zoomed div default width
				offset: 10,	//zoomed div default offset
				position: "right",//zoomed div default position,offset position is to the right of the image
				lens:1, //zooming lens over the image,by default is 1;
				preload: 1
			};

			if(options) {
				$.extend(settings, options);
			}

		    var noalt='';
		    $(this).hover(function(){

		    var imageLeft = this.offsetLeft;
		    var imageRight = this.offsetRight;
		    var imageTop =  $(this).get(0).offsetTop;
		    var imageWidth = $(this).children('img').get(0).offsetWidth;
		    var imageHeight = $(this).children('img').get(0).offsetHeight;


            noalt= $(this).children("img").attr("alt");

		    var bigimage = $(this).children("img").attr("jqimg");

            $(this).children("img").attr("alt",'');

		    if($("div.zoomdiv").get().length == 0){

		    $(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");


		    $(this).append("<div class='jqZoomPup'>&nbsp;</div>");

		    }


		    if(settings.position == "right"){

            if(imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width){

            leftpos = imageLeft  - settings.offset - settings.xzoom;

            }else{

		    leftpos = imageLeft + imageWidth + settings.offset;
            }
		    }else{
		    leftpos = imageLeft - settings.xzoom - settings.offset;
		    if(leftpos < 0){

            leftpos = imageLeft + imageWidth  + settings.offset;

		    }

		    }

		    $("div.zoomdiv").css({ top: imageTop,left: leftpos });

		    $("div.zoomdiv").width(settings.xzoom);

		    $("div.zoomdiv").height(settings.yzoom);

            $("div.zoomdiv").show();

            if(!settings.lens){
              $(this).css('cursor','crosshair');
			}




				   $(document.body).mousemove(function(e){



                   mouse = new MouseEvent(e);

                   /*$("div.jqZoomPup").hide();*/


				    var bigwidth = $(".bigimg").get(0).offsetWidth;

				    var bigheight = $(".bigimg").get(0).offsetHeight;

				    var scaley ='x';

				    var scalex= 'y';


				    if(isNaN(scalex)|isNaN(scaley)){

				    var scalex = (bigwidth/imageWidth);

				    var scaley = (bigheight/imageHeight);




				    $("div.jqZoomPup").width((settings.xzoom)/scalex );

		    		$("div.jqZoomPup").height((settings.yzoom)/scaley);

                    if(settings.lens){
                    $("div.jqZoomPup").css('visibility','visible');
					}

				   }



                    xpos = mouse.x - $("div.jqZoomPup").width()/2 - imageLeft;

                    ypos = mouse.y - $("div.jqZoomPup").height()/2 - imageTop ;

                    if(settings.lens){

                    xpos = (mouse.x - $("div.jqZoomPup").width()/2 < imageLeft ) ? 0 : (mouse.x + $("div.jqZoomPup").width()/2 > imageWidth + imageLeft ) ?  (imageWidth -$("div.jqZoomPup").width() -2)  : xpos;

					ypos = (mouse.y - $("div.jqZoomPup").height()/2 < imageTop ) ? 0 : (mouse.y + $("div.jqZoomPup").height()/2  > imageHeight + imageTop ) ?  (imageHeight - $("div.jqZoomPup").height() -2 ) : ypos;

                    }


                    if(settings.lens){

                    $("div.jqZoomPup").css({ top: ypos,left: xpos });

                    }



					scrolly = ypos;

					$("div.zoomdiv").get(0).scrollTop = scrolly * scaley;

					scrollx = xpos;

					$("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;


				    });
		    },function(){

               $(this).children("img").attr("alt",noalt);
		       $(document.body).unbind("mousemove");
		       if(settings.lens){
		       $("div.jqZoomPup").remove();
		       }
		       $("div.zoomdiv").remove();

		    });

        count = 0;

		if(settings.preload){

		$('body').append("<div style='display:none;' class='jqPreload"+count+"'>sdsdssdsd</div>");

		$(this).each(function(){

        var imagetopreload= $(this).children("img").attr("jqimg");

        var content = jQuery('div.jqPreload'+count+'').html();

        jQuery('div.jqPreload'+count+'').html(content+'<img src=\"'+imagetopreload+'\">');

		});

		}

		}

})(jQuery);

function MouseEvent(e) {
this.x = e.pageX
this.y = e.pageY


}

jquery-1.3.2.min.js(此处省略 56Kb)

img.htm

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title图文详细</title>
<link href="css/base.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</head>

<body>
<div class="right-extra" style="margin:100px;">
    
    <!--产品参数开始-->
	<div>
		<div id="preview" class="spec-preview">
			<span class="jqzoom"><img jqimg="images/b1.jpg" src="images/s1.jpg" /></span>
		</div>
        <!--缩图开始-->
        <div class="spec-scroll">
        	<a class="prev">&lt;</a>
            <a class="next">&gt;</a>
            <div class="items">
            	<ul>
                	<li><img alt="佳能" bimg="images/b1.jpg" src="images/s1.jpg" onmousemove="preview(this);"></li>
                    <li><img alt="佳能" bimg="images/b2.jpg" src="images/s2.jpg" onmousemove="preview(this);"></li>
                    <li><img alt="佳能" bimg="images/b3.jpg" src="images/s3.jpg" onmousemove="preview(this);"></li>
                    <li><img alt="佳能" bimg="images/b1.jpg" src="images/s1.jpg" onmousemove="preview(this);"></li>
                    <li><img alt="佳能" bimg="images/b3.jpg" src="images/s3.jpg" onmousemove="preview(this);"></li>
                    <li><img alt="佳能" bimg="images/b1.jpg" src="images/s1.jpg" onmousemove="preview(this);"></li>
                    <li><img alt="佳能" bimg="images/b2.jpg" src="images/s2.jpg" onmousemove="preview(this);"></li>
                    <li><img alt="佳能" bimg="images/b1.jpg" src="images/s1.jpg" onmousemove="preview(this);"></li>
                    <li><img alt="佳能" bimg="images/b2.jpg" src="images/s2.jpg" onmousemove="preview(this);"></li>
                    <li><img alt="佳能" bimg="images/b2.jpg" src="images/s2.jpg" onmousemove="preview(this);"></li>
                    <li><img alt="佳能" bimg="images/b1.jpg" src="images/s1.jpg" onmousemove="preview(this);"></li>
                    <li><img alt="佳能" bimg="images/b2.jpg" src="images/s2.jpg" onmousemove="preview(this);"></li>
                </ul>
            </div>
        </div>
        <!--缩图结束-->
	</div>
    <!--产品参数结束-->

	<div style="clear:both;height:10px;"></div>

    <div class="m" id="comment">
				<ul class="tab clearfix">
					<li onclick="tabs('#comment',0)" class="curr">图文介绍<strong></strong><span></span></li>
					<li onclick="tabs('#comment',1)">评论<strong>(1)</strong><span></span></li>
				</ul>
				<div class="mc tabcon hide" style="display:block;"><div class="norecode"> 暂无好评！</div></div>
				<div class="mc tabcon hide" style="display:none;">
                    <div class="item">
                        <div class="user">
                        <span class="u-name">网友：studiolovecat</span>
                        <span class="u-level">
                        <font style="color:#999999"> 银牌会员 </font>
                        </span>
                        <span class="date-ask">2011-03-20 13:36</span>
                        </div>
                        <dl class="ask">
                        <dt>
                        <b></b>
                        咨询内容：
                        </dt>
                        <dd> 请问这款机器用什么电池，续航能力最强的电池型号与价格是什么</dd>
                        </dl>
                        <dl class="answer">
                        <dt>
                        <b></b>
                        京东回复：
                        </dt>
                        <dd>
                        <div class="content"> 您好！专用锂电池BP－950G，7.4V，5200mAh。感谢您对京东的支持！祝您购物愉快！</div>
                        <div class="date-answer"> 2011-03-21 10:45</div>
                        </dd>
                        </dl>
                        <div id="6727709" class="useful">
                        您对我们的回复：
                        <a class="btn-pleased" href="javascript:void(0)" name="2">满意</a>
                        (
                        <span>0</span>
                        )&nbsp;&nbsp;
                        <a class="btn-unpleased" href="javascript:void(0)" name="4">不满意</a>
                        (
                        <span>0</span>
                        )
                        </div>
                    </div>
                    
                    <div class="item odd">
                        <div class="user">
                        <span class="u-name">网友：yefa888</span>
                        <span class="u-level">
                        <font style="color:#999999"> 铜牌会员 </font>
                        </span>
                        <span class="date-ask">2011-01-16 01:36</span>
                        </div>
                        <dl class="ask">
                        <dt>
                        <b></b>
                        咨询内容：
                        </dt>
                        <dd> 请问这个MiniDV带是可以重复使用还是一次消费品?我是生手,想买一台可是不太了解.</dd>
                        </dl>
                        <dl class="answer">
                        <dt>
                        <b></b>
                        京东回复：
                        </dt>
                        <dd>
                        <div class="content"> 您好！可以重复使用,感谢您对京东的支持！祝您购物愉快！</div>
                        <div class="date-answer"> 2011-01-17 09:47</div>
                        </dd>
                        </dl>
                        <div id="6195867" class="useful">
                        您对我们的回复：
                        <a class="btn-pleased" href="javascript:void(0)" name="2">满意</a>
                        (
                        <span>0</span>
                        )&nbsp;&nbsp;
                        <a class="btn-unpleased" href="javascript:void(0)" name="4">不满意</a>
                        (
                        <span>0</span>
                        )
                        </div>
                    </div>
                    
                </div>
	</div>
</div>
</body>
</html>

分享到：