OKMG

为WordPress图片添加动态特效

作者 : OKMG 发布时间: 2020-01-24 158 人阅读

成品效果展示(源站:Jovel.net)

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


相关说明:

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

实现过程:

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

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

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

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

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

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中加了一个移动判断,如果是移动设备则还原旧展示方案,详细如下:

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/

芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN 1. 本站所有资源来源于用户上传和网络,仅作为演示数据,如有侵权请邮件联系站长! 2. 本站客服:925296647
芒果源码 » 为WordPress图片添加动态特效

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
买的素材不会用怎么办?
本站虽然有客服,但请适度。不要几块钱的css或js,php教程等问题咨询,这东西严格意义上来说 只是参考,正常情况下都是可以使用的,如果不能使用 请检查你网站自身的问题。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们.。
下载后的源代码和演示站不一样?
部分演示站是我们填充好数据的,极个别源代码带有测试数据。正常源代码是纯净版的 不含有任何数据。
不会安装,不懂技术怎么办?
如果你对技术一窍不通,无法进行安装或修改的可以与我们联系。当然不是免费协助的,需要你提供一定的技术服务费,具体价格可以与我们沟通商议
我想下载可以商用的源代码,需要怎么做?
本站除“商用源码”栏目以外,都是分享的源代码,不可进行商用。需要商业用途可以选择“商用源码”栏目内的,如果没有符合你需求的源代码,可以与我们联系,我们将帮助你梳理需求,以公司的名义签订服务合同进行定制开发。
我也是站长,可以搬运源码么?
可以的,为了方便各位站长搬运源码,本平台2019年12年3日之后发布的所有源代码都是透明度为2%的水印(因为水印功能无法去掉),没有任何影响。可以随意搬运。如果你有具有一定价值的源代码可以与我们交换

1 评论

Leave a Reply

售后服务:

  • 售后服务范围 1、服务器配置及主机购买推荐
    2、模板使用范围内问题免费咨询
    3、单价超过300元的模板免费一次安装,需提供服务器信息。
    付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
    2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
    3、服务器环境配置(一般 ¥50-300)
    4、网站中毒处理(需额外付费,500元/次/质保三个月)
    售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
    免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: yimiaonet@vip.qq.com ),我们会及时删除,给您带来的不便,我们深表歉意!