八卦娱乐 美女

WordPress 为长图片设置展开/折叠功能,方便查看

无言说这个WordPress网站主要分享网站源码的,经常需要把网站首页图片展示出来。 这几天更新无言发现了个问题,一般网站首页长度都在1000+px,若要获取下载地址,往往需要下翻很久才能看到下载框。 今天无言就把这个问题给解决了。也是挺简单的,几行css+js就解决了。 CSS .open {height: 320px;overflow: hidden;text-align: center;position: relative;} .open::after {content: "展开图像 ▼";display:

无言说这个WordPress网站主要分享网站源码的,经常需要把网站首页图片展示出来。

这几天更新无言发现了个问题,一般网站首页长度都在1000+px,若要获取下载地址,往往需要下翻很久才能看到下载框。

今天无言就把这个问题给解决了。也是挺简单的,几行css+js就解决了。

CSS

.open {height: 320px;overflow: hidden;text-align: center;position: relative;} .open::after {content: "展开图像 ▼";display: block;height: 29px;width: 100%;position: absolute;bottom: 20px;color: #333;} .openmask{width: 100%;position: absolute;height: 320px;background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0), #666);background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0), #666);background-image: -o-linear-gradient(top, hsla(0, 0%, 100%, 0), #666);background-image: linear-gradient(top, hsla(0, 0%, 100%, 0), #666);} .fold{height:100%;} .fold .openmask{height:100%; opacity:0;} .open.fold::after{content: "折叠图像 ▲";color: #666;}

JS

/* 为网站添加“点击展开/收缩” */ jQuery(document).ready( function(jQuery){ jQuery('.open').click(function(){ $(".open").toggleClass("fold"); }); });

HTML

<div class="open"><div class="openmask"></div> 此处加入图片代码 如 <img src="" /> </div>

上面这个其实就已经满足使用需求了,这个方法可以应用在任何程序的网站上来展示长图,当然这个也仅限于用来折叠长图。

PHP

小编使用的是WodPress程序,为了方便把这个功能放到WordPress后台,所以也琢磨了下代码。直接将下方代码放到functions.php

<?php add_action('after_wp_tiny_mce', 'prettify_bottom'); function prettify_bottom($mce_settings) { <script type="text/javascript"> QTags.addButton( 'openimg', '展开/收缩图片', '<div class="open"><div class="openmask"></div>nn</div>', "" ); function prettify_bottom() { } </script> <?php }

然后就可以在WordPress后台 文本编辑器中看到这个功能了。

Advertisement

Advertisement