原生js实现图片点击放大缩小效果代码
代码语言:html
所属分类:图片放大
代码描述:原生js实现图片点击放大缩小效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* (A) LIGHTBOX BACKGROUND */ #lightbox { /* (A1) COVERS FULLSCREEN */ position: fixed; z-index: 999; margin:0 auto; width: 100vw; height: 100vh; top:0;bottom:0;left:0;right:0; /* (A2) BACKGROUND */ background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; align-items: center; /* (A4) HIDDEN BY DEFAULT */ visibility: hidden; opacity: 0; /* (A5) SHOW/HIDE ANIMATION */ transition: opacity ease 0.4s; } .zoom {cursor: zoom-in;} .show {cursor: zoom-out;} /* (A6) TOGGLE VISIBILITY */ #lightbox.show { visibility: visible; opacity: 1; } /* (B) LIGHTBOX IMAGE */ #lightbox img { /* (B1) DIMENSIONS */ width: 100%; background-position: center; background-repeat: no-repeat; /* (B2) IMAGE FIT */ /* contain | cover | fill | scale-down */ object-fitx: contain; } img {width:100%;border:1px solid white;} .two-column-grid { padding-top:50px; padding-left:20px; padding-right:20px; display: grid; width:100%;max-width:1400px;margin:0 auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 30px; grid-row-gap: 0px; } body {background:#111;text-align:center} h1, h2 {color:white;margin:0;line-height:1;text-t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0