Css+Jquery实现点击图片放大缩小预览 图片预览 查看大图
2020/4/17 5:06:39
本文主要是介绍Css+Jquery实现点击图片放大缩小预览 图片预览 查看大图,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
要求
点击一张图片,图片就会放大,查看大图,点击空白处就会隐藏大图,回到缩略图。
技术要点
主要是Jquery进行元素的显示与隐藏。
代码
<!DOCTYPE html> <html> <head> <title>qqq</title> <meta charset="utf-8"> <style type="text/css"> *{ margin:0; padding:0; } h1{ text-align: center; margin:20px 0; } #imgdiv{ width: 500px; margin:50px auto; } #imgdiv img{ width: 300px; margin:0 100px; } #bigimg{ width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,.3); top: 0; display: none; } #bigimg img{ width: 1000px; margin:auto; position: fixed; left:0; right:0; top: 80px; cursor: pointer; } </style> </head> <body> <h1>图片预览 - 放大/缩小</h1> <!-- 图片容器 --> <div id="imgdiv" onclick="imgbig();"> <img src="zsdfsaerg.jpg" id="imgsrc" /> </div> <!-- 放大遮罩层 --> <div id="bigimg" onclick="closeimg();"></div> </body> <!-- JS --> <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script> <script> function imgbig() { var imgsrc = $('#imgsrc').attr('src'); $("#bigimg").css("display","block"); $("#bigimg").html("<img src="+imgsrc+" />"); } function closeimg() { $("#bigimg").css("display","none"); } </script> </html>
demo
Author:TANKING
Date:2020-04-16
Web:www.likeyunba.com/
WeChat:face6009
这篇关于Css+Jquery实现点击图片放大缩小预览 图片预览 查看大图的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)