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

广西seo 1915 0

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

JS实现点击图片放大,在点击缩小 第1张图片

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>前面,如下图所示:

JS实现点击图片放大,在点击缩小 第2张图片

注意:如果网站有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">

如下图所示:

JS实现点击图片放大,在点击缩小 第3张图片

3、点击图片放大总结

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

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

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

JS实现点击图片放大,在点击缩小 第4张图片

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

标签: JS 图片

评论列表

 暂无“JS实现点击图片放大,再点击缩小”评论,快来抢沙发吧

发表感想