Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
.main-area .main-wrap {
	width:1090px;
	margin:0 auto;
}
.main-area .main-wrap .scale {
	position:relative;
	margin:50px 0;
	float:left;
}
.main-area .main-wrap .scale .small {
	width:400px;
	height:400px;
	position:relative;
	border:1px solid #ddd;
	float:left;
}
.main-area .main-wrap .scale .small .smallpic {
	width:100%;
	height:100%;
}
.main-area .main-wrap .scale .small .smallmove {
	background:rgba(255,255,0,0.3);
	position:absolute;
	left:0;
	top:0;
	display:none;
	cursor:move;
}
.main-area .main-wrap .scale ul {
	position:absolute;
	bottom:-92px;
	left:0;
	margin-top:20px;
	width:400px;
}
.main-area .main-wrap .scale ul li {
	list-style:none;
	float:left;
	height:64px;
	line-height:64px;
	border:1px solid #ddd;
	width:64px;
	margin-left:20px;
	text-align:center;
}
.main-area .main-wrap .scale ul li img {
	width:100%;
	height:100%;
}
.main-area .main-wrap .scale ul li:nth-of-type(1) {
	width:33px;
	position:relative;
	margin-left:0;
	left:0;
	top:0;
}
.main-area .main-wrap .scale ul li:nth-of-type(5) {
	margin-right:0;
	position:absolute;
	right:0;
	top:0;
	width:33px;
}
.main-area .main-wrap .scale .big {
	width:400px;
	height:400px;
	position:absolute;
	top:0;
	left:430px;
	border:1px solid #ccc;
	float:left;
	margin-left:20px;
	overflow:hidden;
	display:none;
}
.main-area .main-wrap .scale .big .bigpic {
	position:absolute;
	left:0;
	top:0;
}
.main-area .main-wrap .pro_info {
	float:left;
	margin:50px 0 0 50px;
	width:638px;
	height:550px;
	text-align:left;
	font-size:12px;
}
.main-area .main-wrap .pro_info>section {
	padding:10px 0;
	margin:10px 0;
}
.main-area .main-wrap .pro_info .pro-title {
	padding-bottom:5px;
	margin-bottom:10px;
	font-size:20px;
	font-weight:900;
}
.main-area .main-wrap .pro_info .left-tit {
	color:#999;
	font-size:12px;
	margin-right:50px;
}
.main-area .main-wrap .pro_info .price-area {
	width:100%;
	line-height:30px;
	padding:10px 0;
	background:#ddd;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
.main-area .main-wrap .pro_info .price-area .sell-price {
	color:#f00;
	font-size:30px;
	display:inline-block;
	vertical-align:middle;
}
.main-area .main-wrap .pro_info .price-area .freepost {
	display:inline-block;
	width:24px;
	height:18px;
	line-height:18px;
	padding:0 5px;
	margin:0 10px;
	background-color:pink;
	color:#fff;
	border-radius:3px;
}
.main-area .main-wrap .pro_info .activity .newactivity {
	width:48px;
	height:18px;
	padding:0 5px;
	background-color:#f00;
	color:#fff;
	margin-right:10px;
}
.main-area .main-wrap .pro_info .activity i {
	color:#f00;
}
.main-area .main-wrap .pro_info .postage .city {
	display:inline-block;
	width:70px;
	height:20px;
	line-height:20px;
	border:1px solid #999;
	text-align:center;
}
.main-area .main-wrap .pro_info .service {
	color:#333;
}
.main-area .main-wrap .pro_info .amount-box .num-goods {
	display:inline-block;
	border:1px solid #999;
	text-align:center;
}
.main-area .main-wrap .pro_info .amount-box .num-goods button {
	display:inline-block;
	width:25px;
	line-height:22px;
	font-size:20px;
	color:#333;
	border:none;
	outline:none;
	cursor:pointer;
}
.main-area .main-wrap .pro_info .amount-box .num-goods button:nth-of-type(1) {
	border-right:1px solid #999;
}
.main-area .main-wrap .pro_info .amount-box .num-goods button:nth-of-type(2) {
	border-left:1px solid #999;
}
.main-area .main-wrap .pro_info .amount-box .num-goods input {
	display:inline-block;
	border:none;
	width:40px;
	line-height:18px;
	text-align:center;
	vertical-align:text-bottom;
	outline:none;
}
.main-area .main-wrap .pro_info .buybtns {
	font-size:18px;
	text-align:center;
}
.main-area .main-wrap .pro_info .buybtns .buynow {
	display:inline-block;
	width:156px;
	height:46px;
	line-height:46px;
	border:2px solid #f00;
	background-color:#ffeced;
	color:#f00;
	margin-right:50px;
}
.main-area .main-wrap .pro_info .buybtns .buynow:hover {
	background-color:#fffaf8;
}
.main-area .main-wrap .pro_info .buybtns .addcart {
	margin-left:50px;
	display:inline-block;
	width:180px;
	height:50px;
	line-height:50px;
	background-color:#f00;
	color:#fff;
}
.show {
	display:block !important;
}
.hide {
	display:none !important;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery放大镜(原创)

更新时间:2019-08-12 09:33:24

这里的图片是引用的本站的图片,可以自己替换成需要的图片即可
简单易懂  替换方便
jquery代码还可以做成插件的形式方便使用

0