点击图片放大特效代码,再点击恢复原状【多种方法】

2017-12-05 建站知识 浏览 手机预览
文章来源:http://www.dedecmsok.com/html/n171.html

使用jquery的toggleClass()方法帮你轻松实现...

我们先来看看效果如何,点击图片试一试。
图片的实际大小为1920x1080,我们先把宽度限制在300px,点击后图片还原到100%(图片虽然宽度还原到100%,但是所显示的大小取决于父框架的宽度),如果想要图片全屏放大(根据浏览器的高度自动调整)请点击这里:
http://www.dedecmsok.com/html/n172.html

使用方法:首先老规矩,引入jquery库,点击【这里】下载。
所需代码(jquery、css、html)如下:

<script>
  function f_test(){
    $('#img').toggleClass('min');
    $('#img').toggleClass('max');
  };
</script>
<style>
  .max{width:100%;height:auto;}
  .min{width:300px;height:auto;}
</style>
<img id="img" class="min" src="dedecmsok.jpg">


原文地址:http://www.dedecmsok.com/html/n171.html
  • 如果你的问题还没有解决,可以点击页面右侧的“ ”,站长收到问题后会尽快回复解决方案到你的邮箱。
  • 创造始于问题,有了问题才会思考,有了思考,才有解决问题的方法,才有找到独立思路的可能。 —— 陶行知