Css+Jquery实现点击图片放大缩小预览 图片预览 查看大图
生活随笔
收集整理的這篇文章主要介紹了
Css+Jquery实现点击图片放大缩小预览 图片预览 查看大图
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
要求
點(diǎn)擊一張圖片，圖片就會(huì)放大，查看大圖，點(diǎn)擊空白處就會(huì)隱藏大圖，回到縮略圖。
技術(shù)要點(diǎn)
主要是Jquery進(jìn)行元素的顯示與隱藏。
代碼
<!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>圖片預(yù)覽 - 放大/縮小</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
總結(jié)
以上是生活随笔為你收集整理的Css+Jquery实现点击图片放大缩小预览 图片预览 查看大图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： poker游戏编码规则
- 下一篇： 项目3-友元类