学习笔记

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

查看其它板块

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

作者:狐灵科技 | 2019-12-29 17:28 |点击:


图片的实际大小为1920x1080,我们先把宽度限制在300px,点击后图片还原到100%(图片虽然宽度还原到100%,但是所显示的大小取决于父框架的宽度),如果想要图片全屏放大(根据浏览器的高度自动调整)
 

 

使用方法:首先老规矩,引入jquery库,点击【这里】下载。
如果下载链接失效  百度搜索 jquery-1.8.2.min.js  下载
所需代码(jquery、css、html)如下:

(HTML  CSS  JS 代码都在下面)

<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
如没特殊注明,文章均为狐灵科技原创,转载请注明   "点击图片放大特效代码,再点击恢复原状【多种方法】
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:15082661954 / 大客户专线:15523356218