网上的京东商城 商品详细信息显示 效果
?
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 widthyzoom: 200,//zoomed div default widthoffset: 10,//zoomed div default offsetposition: "right",//zoomed div default position,offset position is to the right of the imagelens: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'> </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.pageXthis.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 style="margin:100px;"> <!--产品参数开始--><div><div id="preview" src="images/s1.jpg" /></span></div> <!--缩图开始--> <div 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 id="comment"><ul style="display:block;"><div style="display:none;"> <div href="javascript:void(0)" name="2">满意</a> ( <span>0</span> ) <a href="javascript:void(0)" name="4">不满意</a> ( <span>0</span> ) </div> </div> <div href="javascript:void(0)" name="2">满意</a> ( <span>0</span> ) <a href="javascript:void(0)" name="4">不满意</a> ( <span>0</span> ) </div> </div> </div></div></div></body></html>?
?
?
?