css点击看大图 html3,jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】...

本文实例讲述了jQuery+css实现的点击图片放大缩小预览功能。分享给大家供大家参考，具体如下：

要求

点击一张图片，图片就会放大，查看大图，点击空白处就会隐藏大图，回到缩略图。

技术要点

主要是Jquery进行元素的显示与隐藏。

代码

qqq

*{

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;

}

图片预览 - 放大/缩小

function imgbig() {

var imgsrc = $('#imgsrc').attr('src');

$("#bigimg").css("display","block");

$("#bigimg").html("");

}

function closeimg() {

$("#bigimg").css("display","none");

}

demo

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

时间： 2020-05-26