照片商品分类点击筛选分类放大效果代码
代码语言:html
所属分类:选项卡
代码描述:照片商品分类点击筛选分类放大效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *,body { margin: 0; padding: 0 } body { background-color: rgba(227,226,226,.7) } .isg__Img__wrap { width: 1065px; background-color: #fff; margin: 0 auto; margin-top: 100px; padding: 0 30px; padding-top: 30px } .isg__Img__container { font-size: 12px } .isg__Img_container__category .isg__Img_container__category-btn { display: inline-block; padding: 3px 15px; width: 30px; text-align: center; margin-right: 20px; border: 1px solid red; border-radius: 2px; color: red; font-size: 1.2em; cursor: pointer; user-select: none } .isg__Img_container__category .isg__Img_container__category-btn-active { background-color: red; color: #fff } .isg__Img_container__imgcontainer { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 30px } .isg__Img_container__imgcontainer figure { width: 240px; height: 120px; position: relative; overflow: hidden; margin-bottom: 30px; margin-right: 20px; transition: all .6s; opacity: 0 } .isg__Img_container__imgcontainer figure img { width: 100%; height: 100% } .isg__Img_container__imgcontainer figure figcaption { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 2em; color: #fff; opacity: 0; cursor: pointer; z-index: 5 } .isg__Img_container__imgcontainer figure::before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); opacity: 0; transition: all .5s; cursor: pointer; z-index: 4 } .isg__Img_container__imgcontainer figure:hover img { transform: scale(1.1,1.1) } .isg__Img_container__imgcontainer figure:hover figcaption { opacity: 1 } .isg__Img_container__imgcontainer figure:hover::before { opacity: 1 } .isg__Img__overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.6); display: flex; justify-content: center; align-items: center; display: none; z-index: 9 } .isg__Img__overlay .isg__Img__overlay-btn-prev,.isg__Img__overlay .isg__Img__overlay-btn-next { width: 80px; height: 80px; border: 5px solid #fff; border-radius: 50%; position: absolute; color: #fff; font-size: 2em; text-align: center; line-height: 80px; cursor: pointer } .isg__Img__overlay .isg__Img__overlay-btn-prev { left: 50px } .isg__Img__overlay .isg__Img__overlay-btn-next { right: 50px } .isg__Img__overlay .isg__Img__overlay-btn-prev:before { content: "P" } .isg__Img__overlay .isg__Img__overlay-btn-next:before { content: "N" } .isg__Img__overlay .isg__Img__overlay-btn-prev:hover,.isg__Img__overlay .isg__Img__overlay-btn-next:hover { background-color: rgba(110,110,110,.8) } .isg__Img__overlay .isg__Img__overlay-btn-prev:active,.isg__Img__overlay .isg__Img__overlay-btn-next:active { background-color: rgba(228,227,227,.8) } </style> </head> <body> <div class="isg__Img__wrap" id="wrap"> </div> <script> const data = [{ type: '热血', title: '火影忍者', alt: '火影忍者', src: '//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_150,/quality,q_90', }, { type: '热血', title: '七龙珠', alt: '七龙珠', src: '//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_150,/quality,q_90', }, { type: '热血', title: '海贼王', alt: '海贼王', src: '//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_150,/quality,q_90', }, { type: '热血', title: '妖精的尾巴', alt: '妖精的尾巴', src: '//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_150,/quality,q_90', }, { type: '热血', title: '死神', alt: '死神', src: '//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_150,/quality,q_90', }, { type: '冒险', title: '海贼王', alt: '海贼王', src: '//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_150,/quality,q_90', }, { type: '冒险', title: '星游记', alt: '星游记', src: '//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_150,/quality,q_90', }, { type: '冒险', title: 'Fate/stay night', alt: 'Fate/stay night', src: '//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_150,/quality,q_90', }, { type: '冒险', title: '数码宝贝', alt: '数码宝贝', src: '//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_150,/quality,q_90', }, { type: '冒险', title: '光能使者', alt: '光能使者', src: '//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_150,/quality,q_90', }, { type: '冒险', title: '火影忍者', alt: '火影忍者', src: '//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-pr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0