成品效果展示

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


相关说明:

挑选之后决定选用渐变式淡出效果,符合正常图片展示要求,同时又不失华丽。至于网上各种繁杂的效果,个人实在是接受不来,毕竟已经超出正常展示需要的范围了。这款特效文件包含两种,第一种相对适合电商网站,各位可以在文末下载后自行选择。我在这里以第二种为例。

实现过程:

在这款模板中,文章约束在<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图片特效的处理,文中相关下载已经上传到个人网盘。


相关效果下载:

http://pan.jovel.net/f/b7e6039e45/