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实现点击图片放大缩小预览图片预览查看大图相关推荐

android 图片放大缩小,android中图片放大缩小...
ClickListener(){ public void onClick(View v){ big(); } }); } private void small(){ //获得Bitmap的高和宽 in ...
点击图片放大缩小功能
1.点击图片放大缩小的思路图片部分: <table><div><img style="width:62px;height:83px;display:block ...
jQuery——小案例：点击图片放大缩小
需求: HTML中有三张图片: 如果图片处于"大"状态,则点击图片可以缩小. 如果图片处于"小"状态,则点击图片可以放大. 代码: <!DOCTYPE h ...
vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
php中图片放大,jquery实现图片放大缩小特效
和大家分享一个最近用到的jquery实现图片的放大缩小的特效.具体效果是鼠标移动到图片上,图片自动缩到左上角,右下角出现文字说明,鼠标移走后图片恢复,文字被图片遮挡.非常不错的一个图片特效功能.贴一下 ...
Android实现图片放大缩小
蓝蓝的天蓝蓝的天,白云朵朵. White clouds in the blue sky. 目录视图摘要视图订阅新版极客头条上线,每天一大波干货任玉刚:Android开发者的职场规划 ...
图片放大缩小效果，支持鼠标滑轮
图片放大缩小效果效果在附件里,麻烦下载来看吧 <html> <head><title>Simple jsp page</title><link ...
uniapp图片放大缩小预览，并支持图片拖动附效果图
效果图: 放大缩小和拖动是根据 movable-area 组件来实现的,小程序和uniapp都支持这个组件. movable-area | 微信开放文档微信开发者平台文档https://develop ...
html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...
移动端查看预览图片放大缩小
方法一之前介绍过一款移动端vue适用的插件大全 https://blog.csdn.net/MtangEr/article/details/85339092 里边有一篇是查看图片放大缩小的 htt ...

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

要求

技术要点

代码

demo

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

最新文章

热门文章

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

要求

技术要点

代码

demo

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

最新文章

热门文章

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

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