jquery实现电商商品多图显示放大镜效果代码
代码语言:html
所属分类:图片放大
代码描述:jquery实现电商商品多图显示放大镜效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; } body { background: #D8E7FA; } ul,ol { list-style-type: none; } img { display: block; } #Tz_wrap { width: 400px; margin: 100px auto; border: 1px solid gray; height: 480px; } #Tz_magnify { width: 400px; height: 400px; position: relative; margin-bottom: 15px; } #Tz_magnify .simg { width: 400px; height: 400px; position: relative; } #Tz_magnify .simg img[src="../images/sprite-magnify.png"] { position: absolute; bottom: 0; right: 0; } #Tz_magnify .simg .mov { width: 150px; height: 149px; background: url("//repo.bfw.wiki/bfwrepo/icon/609482cb20137.png"); position: absolute; left: 0px; top: 0; cursor: move; display: none; } #Tz_magnify .bigimg { width: 400px; height: 400px; position: absolute; left: 400px; bottom: 0; overflow: hidden; display: none; } #Tz_magnify .bigimg img { position: absolute; left: 0px; top: 0; } .series { width: 400px; height: 55px; position: relative; } .series .show { width: 400px; height: 55px; position: relative; overflow: hidden; } .series .show ul.cont { width: 400px; } .series .show ul.cont li { float: left; margin: 0px 6px; cursor: pointer; border: 2px solid transparent; } .series .show ul.cont li.hover { border: 2px solid red; } .series span { width: 20px; height: 70px; position: absolute; background-image: url("../images/hd_sprite_v1.0.png"); cursor: pointer; } .series span.left { left: 0; top: 0; background-position: -142px -18px; } .series span.right { right: 0; top: 0; background-position: -172px -18px; } .series span.left:hover { background-position: -138px -130px; } .series span.right:hover { background-position: -175px -130px; } </style> </head> <body> <div id="Tz_wrap"> <div id="Tz_magnify"> <div class="simg"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png" width="400" height="400" border="0" alt="美女"> <!-- <img src="images/sprite-magnify.png" width="30" height="30" border="0" alt="放大镜"> --> <div class="mov"></div> </div> <div class="bigimg"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png" width="800" height="800" border="0" alt="大美女"> </div> </div> <div class="series"> <div class="show"> <ul class="cont"> <li class="hover"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png" width="50" height="50" border="0" alt="" bigimages="//repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png" /> </li> <li> &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0