Skip to content

Instantly share code, notes, and snippets.

@13hoop

13hoop/.html

Last active March 24, 2017 07:22
Show Gist options
  • Save 13hoop/7fb45f14ad78a9c6bb1b632017ed5bb0 to your computer and use it in GitHub Desktop.
Save 13hoop/7fb45f14ad78a9c6bb1b632017ed5bb0 to your computer and use it in GitHub Desktop.
Download ZIP
show some iterms
Raw
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery002</title>
<link rel="stylesheet" href="demoStyle.css">
<style>
* {padding: 0; margin: 0;
font-size:12px}
.page {
margin:20px auto;
width: 1000px;
}
ul, a, p, img{
list-style: none;
cursor: pointer;
text-decoration: none;
color: #9d9d9d;
}
.clearFix:after {
content: '';
display: block;
clear: both;
}
.nvg {
width: 171px;
position: relative;
border-top: 1px solid #a4a4a4;
border-right: 1px solid #a4a4a4;
border-left: 1px solid #a4a4a4;
border-radius: 5px 5px 0px 0px;
}
.nvg > li {
height: 34px;
float: left;
}
.nvg > li > a {
padding: 0px 10px;
line-height: 34px;
color: #e7e1cd;
border-left: 1px solid #eeeeee;
}
.tagDown {
background: #90171d;
}
.inner {
border: 1px #a4a4a4 solid;
width: 700px;
position: relative;
}
.inner > li {
float: left;
display: none;
}
.inner > li.show {
display: block;
}
.contentList {
width: 730px;
margin-left: -20px;
margin-top: -20px;
}
.contentList > li {
float: left;
width: 218px;
height: 210px;
text-align: center;
border: 1px solid #eeeeee;
border-radius: 0px;
position: relative;
margin-left: 20px;
margin-top: 20px;
}
.contentList > li > .cover {
text-align: center;
position: absolute;
width: 100%;
height:100%;
top: 0px;
left: 0px;
background: rgba(0,0,0, 0.3);
opacity: 0;
}
.contentList > li > .cover:hover {
transition: all 0.5s;
opacity: 1;
}
.contentList > li > .cover > .btn {
position: relative;
line-height: 210px;
border: 1px solid #ab171e;
padding: 10px;
border-radius: 5px;
color: #c7171e;
background: white;
opacity: 1;
}
.contentList > li > a {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.contentList > li > a > div {
margin: 0 auto;
width: 178px;
font-size: 8px;
text-align: left;
padding: 5px 0px;
}
.contentList >li > a > .iterm-name {
height: 36px;
}
.contentList > li > a > .iterm-price {
height: 18px;
color: #c7171e;
}
button {
margin: 0 auto;
border: 1px solid #90171d;
border-radius: 5px;
background: white;
color: #c7171e;
width: 100px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="page">
<ul class="nvg clearFix">
<li class="tagDown">
<a href="#">热门</a>
</li>
<li>
<a href="#">珠宝首饰</a>
</li>
<li>
<a href="#">奢侈品</a>
</li>
</ul>
<ul class="inner clearFix">
<li class="show">
<ul class="contentList">
<li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="iterm-name">'珂兰dasdasfasfddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥1111.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li>
<li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg" alt="">
<div class="iterm-name">' 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li>
</ul>
</li>
<li>
<ul class="contentList ">
<li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg" alt="">
<div class="iterm-name">'珂兰dasdasfasfddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥22222.00</div>
</a>
<div class="cover">
<a class="btn btn-hover" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="iterm-name">'2222222珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li>
</ul>
</li>
<li>
<ul class="contentList ">
<li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg" alt="">
<div class="iterm-name">'珂兰dasdasfasfddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥33333.00</div>
</a>
<div class="cover">
<a class="btn btn-hover" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥33333405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li
><li>
<a href="">
<img src="http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg" alt="">
<div class="iterm-name">'珂兰dddddddd 黄金手 猴哥款'</div>
<div class="iterm-price">￥405.00</div>
</a>
<div class="cover">
<a class="btn" href="">立即抢购</a>
</div>
</li>
</ul>
</li>
</ul>
<button>
添加
</button>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$('.nvg > li').on('click', function(e) {
var $tag = $(e.currentTarget)
var n = $tag.index()
$tag.addClass('tagDown').siblings('.tagDown').removeClass('tagDown');
console.log($tag.closest('.page').find('.inner > .p1').eq(n))
$tag.closest('.page').find('.inner > li').eq(n)
.addClass('show').siblings('.show').removeClass('show')
})
var products = [
{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂兰 黄金手 猴哥款',
price: '￥405.00'
},{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂兰 黄金转运珠 猴哥款',
price: '￥100.00'
},{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂兰 黄金手链 3D猴哥款',
price: '￥45.00'
}
]
var pasedJSONToHtml = function (data) {
var htmlStr = ''
htmlStr += '<li>'
htmlStr += '<a href="#">'
htmlStr += '<img src=' + data["img"] + '>'
htmlStr += '<div class="iterm-name">' + data["name"]+ '</div>'
htmlStr += '<div class="iterm-price">' + data["price"] + '</div>'
htmlStr += '</a>'
htmlStr += '<div class="cover">'
htmlStr += '<a class="btn" href="">立即抢购</a>'
htmlStr += '</div>'
htmlStr += '</li> '
return htmlStr
}
$('button').on('click', function(e) {
var htmlStr = ''
for(var i = 0; i < products.length; i++) {
var a = products[i]
htmlStr += pasedJSONToHtml(a)
}
console.log(htmlStr)
$('.contentList').append(htmlStr)
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment