JS实现点击图片放大,再点击缩小

此方法可以完美解决，百度移动落地页检测时出现：您的页面可能存在图片不可全屏查看、全屏后不能放大缩小、不可以滑动等问题，用这个方法不需要给原来的图片加链接加Class，如果给图片加链接加Class那就太麻烦，已经存在的内容改起来麻烦，此方法亲测有效，小江SEO博客就是用这个方法，可以在本站点击图片测试测试。接下来用最简单的方法告诉大家怎样操作，按流程操作即可。

1、点击图片放大代码

<script src="http://www.seo66.com/zb_users/script/jquery-2.2.4.min.js" type="text/javascript"></script>

<script src="http://www.3dy3.com/js/show.js"></script>

把这两段代码加到</boby>前面，如下图所示：

注意：如果网站有jquery可以不用加第一段代码，本站测试用jquery2.2.4没问题，不知道其他的版本的jquery可以不可以，如果不可以换成2.2.4就可以了。（看不懂这段的，请忽略这句，直接加上面两段代码就可以了）

代码是调用小江SEO博客的文件，如果需要用自己的链接，自己下载上传即可，文件没有加密。

2、改内容页代码

在模板里找到内容页，然后在文章正文前面一个的div里加上id="yxjj_list"

一般来说需要放大的图片都是在内容页吧，其他的首页和分类页基本都用不上图片放大功能。如果首页和分类页也需要加图片放大功能，按照这个的流程操作也一样，就是id="yxjj_list"放的位置不一样而已。

比如:<div class="art-content"></div>标签里的所有图片都需要放大，那我就改成了<div class="art-content" id="yxjj_list">

如下图所示：

3、点击图片放大总结

对于会改网站模板的人来，这个方法肯定是非常方便的。对于新手来说，可能需要一定的时间去研究了。

这个方法肯定比不上插件方便，但是插件的文件太大，放了一推JS，还把图片代码给改了，我一点也不喜欢。况且有一些网站程序还没这方面的插件。

最后注意一点：这个图片放大功能还需要用到class="footer"，好多网站代码基本都是有class="footer"（自己在源代码搜索下），如果没有，在footer里面加个class="footer"就可以了，如下图所示：

可能有一些人会觉得难，总比去扒别人网站强吧。就3点：加JS代码，加id="yxjj_list"，加class="footer"

标签： JS 图片