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>

posted on 2017-12-21 15:30  baorant  阅读(5283)  评论(0编辑  收藏  举报

导航