成品效果展示

偶然发现博客主页略显寒酸，动态效果偏少，便决定从图片展示开始着手改造。因为平时不常研究前端，一般都是用时先学，所以只是直接扒来网上现成的效果，没有太多纯技术内容。

实现过程：

在这款模板中，文章约束在<article>标签下，而相关图片约束在<thumpic>下，所以首先直接进行简单粗暴地尝试，替换掉原展示部分为<figure class=“effect-jazzart”>图形类，同时引入所需的三个css文件。

<link rel=“stylesheet” href=“https://jovel.net/wp-content/themes/dount/photoshow/css/fonts.css">
<link rel=“stylesheet” href=“https://jovel.net/wp-content/themes/dount/photoshow/css/index.css">
<link rel=“stylesheet” href=“https://jovel.net/wp-content/themes/dount/photoshow/css/app.css">

刷新页面，满怀期待的等待特效上线。

可惜结果总是事与愿违的，经过测试该特效app.css中部分框架与style.css冲突。因不熟悉前端，也未曾做过Wordpress模板的编写，不敢轻易修改，便果断放弃引入app.css。

幸运的是，图形展示类并不在其中，但却导致了<figcaption>的整体偏移，虽然不是强迫症，但这样看着真的超难受，但很幸运，整体框架终归是没有变化的，于是在index.css中找到了Jazz特效的相关框架。

1
2
3
4
5
<pre class="line-numbers prism-highlight" data-start="1">```
figure.effect-jazz p {figure.effect-jazz p { -webkit-transition: opacity 2.35s, -webkit-transform 2.35s; transition: opacity 1.5s, transform 1.5s;}</li>
figure.effect-jazz figcaption {figure.effect-jazz figcaption { padding: 1em 1em;}
figure.effect-jazz h2 {figure.effect-jazz h2 { letter-spacing: 2px; padding-top: 16%;
figure.effect-jazz h2{figure.effect-jazz h2{ padding: 1em 2em;

看不懂？没有关系，我们来一个一个尝试。第一条控制特效浮现时间，即出现速度。第二条第四条控制整体偏移，第三条的padding-top控制与顶部距离。不断修改即可实现居中，因为不懂前端，所以无法解释相关部分含义，只是尝试的结果，若有出入还望各位指正。

这样就基本实现了展示特效，但在后期测试中，发现这样处理的图片并没有缩放，所以在正方形展示框中放入长方形图片就会出现留白情况。在这里我使用了七牛云的图片处理模块实现了居中裁剪。

http://yourweb/test.img?imageView2/1/w/展示框高度/h/展示框宽度/interlace/1/q/90|imageslim

同时在测试中也发现该效果对于移动设备的适配并不好，偏移现象严重，所以在function中加了一个移动判断，如果是移动设备则还原旧展示方案，详细如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<pre class="line-numbers prism-highlight" data-start="1">```
function check_wap() {
if (isset($_SERVER['HTTP_VIA'])) return true;
if (isset($_SERVER['HTTP_X_NOKIA_CONNECTION_MODE'])) return true;
if (isset($_SERVER['HTTP_X_UP_CALLING_LINE_ID'])) return true;
if (strpos(strtoupper($_SERVER['HTTP_ACCEPT']),"VND.WAP.WML") > 0) {
// Check whether the browser/gateway says it accepts WML.
$br = "WML";
} else {
$browser = isset($_SERVER['HTTP_USER_AGENT']) ? trim($_SERVER['HTTP_USER_AGENT']) : '';
if(empty($browser)) return true;
$mobile_os_list=array('Google Wireless Transcoder','Windows CE','WindowsCE','Symbian','Android','armv6l','armv5','Mobile','CentOS','mowser','AvantGo','Opera Mobi','J2ME/MIDP','Smartphone','Go.Web','Palm','iPAQ');
$mobile_token_list=array('Profile/MIDP','Configuration/CLDC-','160×160','176×220','240×240','240×320','320×240','UP.Browser','UP.Link','SymbianOS','PalmOS','PocketPC','SonyEricsson','Nokia','BlackBerry','Vodafone','BenQ','Novarra-Vision','Iris','NetFront','HTC_','Xda_','SAMSUNG-SGH','Wapaka','DoCoMo','iPhone','iPod');
$found_mobile=checkSubstrs($mobile_os_list,$browser) ||
checkSubstrs($mobile_token_list,$browser);
if($found_mobile)
$br ="WML";
else $br = "WWW";
}
if($br == "WML") {
return true;
} else {
return false;
}
}
function checkSubstrs($list,$str){
$flag = false;
for($i=0;$i<count($list);$i++){
if(strpos($str,$list[$i]) > 0){
$flag = true;
break;
}

然后在index.php调用check_wap()方法即可判断是否为移动访问。

这样就基本实现了WP图片特效的处理，文中相关下载已经上传到个人网盘。

为WordPress图片添加动态特效

相关说明：

实现过程：

相关效果下载：

相关说明：#

实现过程：#

相关效果下载：#

相关说明：

实现过程：

相关效果下载：