jsp页面实现点击一张图片,然后就全屏放大,再点击,图片会恢复原状

时间:2022-04-04 20:34:19

项目中碰到一个小问题,在点击一张图片实现放大,再点击恢复。

网上查看了以下资料,使用了下面的方法很简单就得到了实现!

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>