jsp页面实现点击一张图片,然后就全屏放大,再点击,图片会恢复原状
项目中碰到一个小问题,在点击一张图片实现放大,再点击恢复。
网上查看了以下资料,使用了下面的方法很简单就得到了实现!
jquery的toggleClass
帮你轻松实现:
<style>
.max{width:100%;height:auto;}//定义样式,相对屏幕比例
.min{width:100px;height:auto;}//具体的像素
<style>
<html>
<body>
<img id='img' class='min' src='xxxx'>
</body>
</html>
<script>
$('#img').click(function(){//传入图片id时注意形式,前面一个#号
$(this).toggleClass('min');
$(this).toggleClass('max');
});
</script>