js点击图片放大预览

最新推荐文章于 2024-05-26 12:42:56 发布

weixin_30315723

最新推荐文章于 2024-05-26 12:42:56 发布

阅读量4.3k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ayanboke/p/11460824.html

版权

这篇博客介绍了如何使用JavaScript实现点击图片后在页面上以弹出层的形式预览放大的图片。通过设置CSS样式和JavaScript函数`myFunction()`与`myFunc()`，实现了点击原始图片显示放大版，并且再次点击放大图片可以关闭预览效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#divid {
position:fixed;
z-index:2000;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
#imgid {
width:1000px;
height:500px;
}
</style>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script >
function myFunction(){
var src=$("#imgip").attr("src")
$("#imgid").attr("src",src)
$("#divid").css("display","block")
}
function myFunc(){
$("#divid").css("display

最低0.47元/天解锁文章

weixin_30315723

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js点击图片放大预览

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">#divid {position:fixed;z-index:2000;left:50%;top:50%;transform:translate(-50%,-50%);}#imgid {...
复制链接

扫一扫