當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Css+Jquery实现点击图片放大缩小预览图片预览查看大图

發(fā)布時(shí)間：2024/1/8 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 Css+Jquery实现点击图片放大缩小预览图片预览查看大图小編覺(jué)得挺不錯(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> <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)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。