js实现图片模糊聚焦放大显示效果代码
代码语言:html
所属分类:图片放大
代码描述:采用js实现的一个模糊聚焦的图片,点击show按钮焦点散开显示全局图片的动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> body,canvas,div { padding:0; margin:0; } a { text-decoration:none; } #can-div { margin:0 auto; position:relative; overflow:hidden; } .img-blur { display:block; margin:0 auto; filter:blur(20px); position:absolute; left:0; z-index:0; } #canvas { display:block; position:absolute; top:0; left:0; z-index:100; } .btn { color:#fff; width:80px; height:30px; z-index:200; border-radius:5px; text-align:center; line-height:30px; } #btn-reset { background:#058; position:absolute; bottom:20px; left:50px; } #btn-reset:hover { background:#047; } #btn-show { background:#085; position:absolute; bottom:20px; right:50px; } #btn-show:hover { background:#074; } </style> </head> <body> <div id="can-div"> <img class="img-blur" src="//repo.bfw.wiki/bfwrepo/image/616771d1012af.png"> <canvas id="canvas"></canvas> <a href="javascript:reset()" class="btn" id="btn-reset">reset</a> <a href="javascript:show()" class="btn" id="btn-show">show</a> </div> <script.........完整代码请登录后点击上方下载按钮下载查看
网友评论0