今天进行精彩技术分享的是 @leo 精彩内容如下：
分享了几款非常不错而且用户体验很好的按钮hover效果，简单展示如下：
强制去掉手机端横向滚动条，如果实在找不到出现横向滚动条的原因:
今天进行隽永东方技术分享的是 @ellen 他分享的精彩内容如下：
分享了一款WP插件Nav Menu Roles，可以实现在菜单上展示登录和未登录状态下显示不同内容，还有就是不同用户角色显示不同内容等功能。
今天进行隽永东方技术分享的是 @leo 他分享的精彩内容如下：
分享了一款动画组件及制作方法：
使用方法：
1、引入文件
|
1
|
<link rel="stylesheet" href="css/animate.min.css"> |
2、HTML
|
1
2
|
<div class="wow slideInLeft"></div><div class="wow slideInRight"></div> |
可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如：
|
1
2
|
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div><div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div> |
3、JavaScript
|
1
|
new WOW().init(); |
如果需要自定义配置，可如下使用：
|
1
2
3
4
5
6
7
8
|
var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true});wow.init(); |
配置
| 属性/方法 | 类型 | 默认值 | 说明 |
| boxClass | 字符串 | ‘wow’ | ‘wow’需要执行动画的元素的 class |
| animateClass | 字符串 | ‘animated’ | ‘animated’animation.css 动画的 class |
| offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
| mobile | 布尔值 | true | 是否在移动设备上执行动画 |
| live | 布尔值 | true | 异步加载的内容是否有效 |
同时还分享了一款很不错的非插件方式制作的右侧悬浮窗口：
skype:nbhengshen?chat
http://wpa.qq.com/msgrd?v=3&uin=987109406&site=qq&menu=yes 替换账号即可，其余像facebook、YouTube、Twitter等添加对应的公司企业页面链接
首先，在footer标签内添加一段html
<div class="side">
<ul>
<li><a href="#" target="_blank"><div class="sidebox"><i class="fa fa-skype" aria-hidden="true"></i>Skype</div></a></li>
<li><a href="#" target="_blank"><div class="sidebox"><i class="fa fa-qq" aria-hidden="true"></i>QQ</div></a></li>
<li><a href="#" target="_blank"><div class="sidebox"><i class="fa fa-facebook-square" aria-hidden="true"></i>Facebook</div></a></li>
<li><a href="#" target="_blank"><div class="sidebox"><i class="fa fa-youtube" aria-hidden="true"></i>YouTuBe</div></a></li>
<li style="border:none;"><a href="javascript:goTop();" class="sidetop"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a></li>
</ul>
</div>
然后再style样式表内添加一段css样式，只需改动颜色，适合网站主色调就行
/*悬浮窗*/
.side {
position: fixed;
width: 54px;
height: 275px;
right: 40px;
top: 214px;
z-index: 100;
}
.side ul li {
width: 54px;
height: 54px;
float: left;
position: relative;
border-bottom: 1px solid #444;
list-style: none;
}
.side ul li .sidebox {
position: absolute;
width: 54px;
height: 54px;
top: 0;
right: 0;
transition: all 0.3s;
background: #16062e;
opacity: 0.8;
filter: Alpha(opacity=80);
color: #fff;
font: 14px/54px "微软雅黑";
overflow: hidden;
}
.side ul li .sidetop {
width: 54px;
height: 54px;
line-height: 54px;
display: inline-block;
background: #16062e;
opacity: 0.8;
filter: Alpha(opacity=80);
transition: all 0.3s;
}
.side ul li .sidetop:hover {
background: #ae1c1c;
opacity: 1;
filter: Alpha(opacity=100);
}
.side ul li img {
float: left;
}
.side .fa{
font-size: 29px;
width: 54px;
text-align: center;
line-height: inherit;
}
.side ul li .sidetop .fa{
color: #fff;
}
最后添加一段jquery
$(document).ready(function(){
$(".side ul li").hover(function(){
$(this).find(".sidebox").stop().animate({"width":"124px"},200).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#ae1c1c"})
},function(){
$(this).find(".sidebox").stop().animate({"width":"54px"},200).css({"opacity":"0.8","filter":"Alpha(opacity=80)","background":"#16062e"})
});
});
//回到顶部
function goTop(){
$('html,body').animate({'scrollTop':0},600);
}
今天进行隽永东方技术分享的是 @april 她分享的精彩内容如下：
分享了有关 『MATERIAL DESIGN官方动效指南』，针对Google 推出的Material Design里边有关动效的定义规则，有助于前端同事理解动效概念，提升用户体验。
现在提供分享的精彩PPT：
[download id=”12131″]
今天进行隽永东方技术分享的是 @bob 他分享的精彩内容如下：
在WordPress网站中使用 Polylang 进行多语种扩充，另外就是安装 Attachment Taxonomies 插件实现WordPress网站媒体库的分类功能，方便归纳和管理众多的图片。
今天进行隽永东方技术分享的是 @ellen 她分享的精彩内容如下：
通过在Contact form 7里边嵌入如下代码可以实现全球国家列表：
[select country "United States" "Canada" "Mexico" "United Kingdom" "-----" "Afghanistan" "Albania" "Algeria" "American Samoa" "Andorra" "Angola" "Anguilla" "Antigua and Barbuda" "Argentina" "Armenia" "Armenia" "Aruba" "Australia" "Austria" "Azerbaijan" "Azerbaijan" "Bahamas" "Bahrain" "Bangladesh" "Barbados" "Belarus" "Belgium" "Belize" "Benin" "Bermuda" "Bhutan" "Bolivia" "Bonaire" "Bosnia and Herzegovina" "Botswana" "Bouvet Island (Bouvetoya)" "Brazil" "British Indian Ocean Territory (Chagos Archipelago)" "British Virgin Islands" "Brunei Darussalam" "Bulgaria" "Burkina Faso" "Burundi" "Cambodia" "Cameroon" "Cape Verde" "Cayman Islands" "Central African Republic" "Chad" "Chile" "China" "Christmas Island" "Cocos (Keeling) Islands" "Colombia" "Comoros" "Congo" "Congo" "Cook Islands" "Costa Rica" "Cote d'Ivoire" "Croatia" "Cuba" "Curaçao" "Cyprus" "Cyprus" "Czech Republic" "Denmark" "Djibouti" "Dominica" "Dominican Republic" "Ecuador" "Egypt" "El Salvador" "Equatorial Guinea" "Eritrea" "Estonia" "Ethiopia" "Falkland Islands (Malvinas)" "Faroe Islands" "Fiji" "Finland" "France" "French Guiana" "French Polynesia" "French Southern Territories" "Gabon" "Gambia" "Georgia" "Georgia" "Germany" "Ghana" "Gibraltar" "Greece" "Greenland" "Grenada" "Guadeloupe" "Guam" "Guatemala" "Guernsey" "Guinea" "Guinea-Bissau" "Guyana" "Haiti" "Heard Island and McDonald Islands" "Holy See (Vatican City State)" "Honduras" "Hong Kong" "Hungary" "Iceland" "India" "Indonesia" "Iran" "Iraq" "Ireland" "Isle of Man" "Israel" "Italy" "Jamaica" "Japan" "Jersey" "Jordan" "Kazakhstan" "Kazakhstan" "Kenya" "Kiribati" "Korea" "Korea" "Kuwait" "Kyrgyz Republic" "Lao People's Democratic Republic" "Latvia" "Lebanon" "Lesotho" "Liberia" "Libyan Arab Jamahiriya" "Liechtenstein" "Lithuania" "Luxembourg" "Macao" "Macedonia" "Madagascar" "Malawi" "Malaysia" "Maldives" "Mali" "Malta" "Marshall Islands" "Martinique" "Mauritania" "Mauritius" "Mayotte" "Micronesia" "Moldova" "Monaco" "Mongolia" "Montenegro" "Montserrat" "Morocco" "Mozambique" "Myanmar" "Namibia" "Nauru" "Nepal" "Netherlands" "Netherlands Antilles" "New Caledonia" "New Zealand" "Nicaragua" "Niger" "Nigeria" "Niue" "Norfolk Island" "Northern Mariana Islands" "Norway" "Oman" "Pakistan" "Palau" "Palestinian Territory" "Panama" "Papua New Guinea" "Paraguay" "Peru" "Philippines" "Pitcairn Islands" "Poland" "Portugal" "Puerto Rico" "Qatar" "Reunion" "Romania" "Russian Federation" "Rwanda" "Saint Barthelemy" "Saint Helena" "Saint Kitts and Nevis" "Saint Lucia" "Saint Martin" "Saint Pierre and Miquelon" "Saint Vincent and the Grenadines" "Samoa" "San Marino" "Sao Tome and Principe" "Saudi Arabia" "Senegal" "Serbia" "Seychelles" "Sierra Leone" "Singapore" "Sint Maarten (Netherlands)" "Slovakia (Slovak Republic)" "Slovenia" "Solomon Islands" "Somalia" "South Africa" "South Georgia & S. Sandwich Islands" "Spain" "Sri Lanka" "Sudan" "Suriname" "Svalbard & Jan Mayen Islands" "Swaziland" "Sweden" "Switzerland" "Syrian Arab Republic" "Taiwan" "Tajikistan" "Tanzania" "Thailand" "Timor-Leste" "Togo" "Tokelau" "Tonga" "Trinidad and Tobago" "Tunisia" "Turkey" "Turkey" "Turkmenistan" "Turks and Caicos Islands" "Tuvalu" "U.S. Virgin Islands" "U.S. Minor Outlying Islands" "Uganda" "Ukraine" "United Arab Emirates" "Uruguay" "Uzbekistan" "Vanuatu" "Venezuela" "Vietnam" "Wallis and Futuna" "Western Sahara" "Yemen" "Zambia" “Zimbabwe"]
插入以下代码可以实现精美的时钟效果：
<script>
$(function(){
var clock = document.getElementById("clock");
function initNumXY(){
// 1、12个数字的位置设置
var radius = 25;//大圆半价
var dot_num = 360/$(".dot").length;//每个div对应的弧度数
//每一个dot对应的弧度;
var ahd = dot_num*Math.PI/180;
$(".dot").each(function(index, el) {
$(this).css({
"left":25+Math.sin((ahd*index))*radius,
"top":25+Math.cos((ahd*index))*radius
});
});
}
initNumXY();//调用上面的函数
//获取时钟id
var hour_line = document.getElementById("hour_line"),
minute_line = document.getElementById("minute_line"),
second_line = document.getElementById("second_line"),
hour_time = document.getElementById("hour_time"),// 获去时间id
minute_time = document.getElementById("minute_time"),
second_time = document.getElementById("second_time");
//3、设置动态时间
function setTime(){
var nowdate = new Date();
//获取年月日时分秒
var hours = nowdate.getHours(),
minutes = nowdate.getMinutes(),
seconds = nowdate.getSeconds(),
date = nowdate.getDate();
// 获取日期id
hour_time.innerHTML = hours >=10 ? hours+":" : "0"+hours+":";
minute_time.innerHTML = minutes >=10 ? minutes+":": "0"+minutes+":";
second_time.innerHTML = seconds >=10 ? seconds : "0"+seconds;
//时分秒针设置
var hour_rotate = (hours*30-90) + (Math.floor(minutes / 12) * 6);
hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
minute_line.style.transform = 'rotate(' + (minutes*6 - 90) + 'deg)';
second_line.style.transform = 'rotate(' + (seconds*6 - 90)+'deg)';
}
// setTime();
setInterval(setTime, 1000);
});
</script>
今天进行技术分享的是 @ellen 精彩内容如下：
@ellen 分享了一个不同时间时区显示不同时间和白天黑夜状态图片的JS，如下：
<div class="time">
<ul>
<li>
<div class="img">
<?php
date_default_timezone_set('PRC'); //设定时区，PRC就是天朝
$hour = date('H');
if($hour <= 18 && $hour >= 6){
echo '<img src="/wp-content/themes/uniontradecn/images/sun.png" alt="sun" class="img-responsive">';
}else{
echo '<img class="moon img-responsive" src="/wp-content/themes/uniontradecn/images/moon.png" alt="moon" >';
}
?>
</div>
<?php
echo '<h2 id="bjdtime"></h2> ';
?>
<p>Beijing time</p>
</li>
<li>
<div class="img">
<?php
function_exists(date_default_timezone_set);
date_default_timezone_set("Etc/GMT");
date_default_timezone_set("Etc/GMT-2");
$hour = date('H');
if($hour <= 18 && $hour >= 6){
echo '<img src="/wp-content/themes/uniontradecn/images/sun.png" alt="sun" class="img-responsive">';
}else{
echo '<img class="moon img-responsive" src="/wp-content/themes/uniontradecn/images/moon.png" alt="moon" >';
}
?>
</div>
<?php
echo '<h2 id="nytime"></h2> ';
?>
<p>Ankara time</p>
</li>
</ul>
今天进行技术分享的是 @bob 和 @ellen 精彩内容如下：
@bob 主要分享了一个技巧，当手机端用户聚焦在input框的时候，输入框会被自动放大，如何去除这个自动放大呢，采用以下代码即可：
<?php if ( !(wp_is_mobile())) : ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php else : ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<?php endif;?>
@ellen 主要分享了通过安装一款 WP Favorite Posts 插件实现用户收藏最喜欢的内容的功能。
今天进行技术分享的为Caven，精彩分享内容如下：
@caven 分享了一款WordPress后台统计数据的插件：WP Statistics 使用这款插件，可以通过后台查看到很多网站统计信息，非常方便，另外一款插件叫做：Ninja Facebook Messenger 通过这款插件可以将 Facebook Messager 嵌入到网站里边。
今天进行技术分享的为Fans和Caven，精彩分享内容如下：
@fans 主要分享了通过在主题functions.php里边加入代码，实现查看历史的功能，具体参考：https://www.wpdaxue.com/wordpress-view-history.html
@caven 分享了一款不错的长尾关键词查询工具：https://ubersuggest.io/ 通过此工具结合Google Trends和MOZ等，可以很好的挑选合适的Google Adwords关键词，提升质量得分和投资回报率。
今天进行技术分享的为Fans，精彩分享内容如下：
@fans 主要分享了通过往functions.php里加入如下代码实现WordPress自带的搜索里边高亮显示搜索词：
function search_word_replace($buffer){
if(is_search()){
$arr = explode(" ", get_search_query());
$arr = array_unique($arr);
foreach($arr as $v)
if($v)
$buffer = preg_replace("/(".$v.")/i", "<span class=\"key-search-word\">$1</span>", $buffer);
}
return $buffer;
}
add_filter("the_title", "search_word_replace", 200);
add_filter("the_excerpt", "search_word_replace", 200);
add_filter("the_content", "search_word_replace", 200);
通过加入如下代码实现自适应的TAB切换效果：
<script src="<?php bloginfo('template_url')?>/js/responsive-tabs.js"></script>
<script type="text/javascript">
$( ' ul.nav.nav-tabs a' ).click(
function ( e ) { e.preventDefault();
$( this ).tab( 'show' ); } );
(function($) {
fakewaffle.responsiveTabs(['xs', 'sm']); })(jQuery);
</script>
通过加入如下代码，实现自定义分页效果：
function custom_posts_per_page($query){
if(is_search()){
$query->set('posts_per_page',20); }
if( $query->is_main_query() && !is_admin() && is_archive( 'induction_video_category' ) ) {
$query->set( 'posts_per_page', '15' ); } } add_action('pre_get_posts','custom_posts_per_page');
今天进行技术分享的有Fans和Bob，精彩分享内容如下：
@fans 主要分享了采用Bootstrap自带的功能来实现一些常用功能，比如通过在body和header里边加入如下代码可以实现将导航菜单伴随鼠标移动和悬浮出来：
<body data-spy="scroll" data-target="#primary-navigation" cz-shortcut-listen="true"> <header data-spy="affix" data-offset-top="100" data-offset-bottom="100">
通过以下代码可以实现右下角图标点击返回顶部的功能：
<script> // jQuery powered scroll to top
jQuery(document).ready(function(){
//Check to see if the window is top if not then display button
jQuery(window).scroll(function(){ if (jQuery(this).scrollTop() > 100) { jQuery('.scroll-to-top').fadeIn(); } else { jQuery('.scroll-to-top').fadeOut(); } });
//Click event to scroll to top
jQuery('.scroll-to-top').click(function(){ jQuery('html, body').animate({scrollTop : 0},800); return false; }); });
</script>
通过以下代码可以实现Accordion伸展效果：
<script> $('.home-faq-list li:first').show(); $('.home-faq-list li:first .collapse').addClass('in'); $('.home-faq-list li:first').show(); $('.home-faq-list li:first').addClass('actives'); var $myGroup = $('#home-faq-list'); $myGroup.on('show.bs.collapse','.collapse', function() { $myGroup.find('.collapse.in').collapse('hide');}); jQuery('.home-faq-list li h3').click(function() { $('.home-faq-list li').removeClass('actives'); $(this).parents('.home-faq-list li').addClass('actives'); }); </script>
@bob 主要分享了一个网站SEO检测工具：http://dig.tools/seo-tools/ 其中展示了一款很不错的网站SEO检测工具：https://toolbox.seositecheckup.com/apps/seo-checkup 通过此工具可以检测网站常规的所有问题，并一一处理修复。
本次做技术分享的是April Xue，以下简单记录一下此次分享的精彩瞬间：
April Xue
@april 分享了年龄化自适应设计的概念，也就是说设计要依据不同的年龄层次做对应的设计，比如针对老年人来说可能还是拟物化的设计要比扁平化设计来得合适；
正值中秋小长假期结束和隽永东方4位小伙伴9月份生日，隽永东方特举办了一场小型的生日聚会，现场气氛温馨愉快，其乐融融：
随后隽永东方小伙伴们如期进行了一周一次的II SHOW技术分享：
@fans 分享了一种使用USB启动盘进行重装操作系统的方式；
@caven 分享了cPanel中做301跳转和添加Addon Domain的方法，并介绍了一款不错的WordPress自适应插件：Responsive menu 并进行了现场效果演示；
@april 分享了如何对Windows环境下的photoshop进行设置的Reset重置操作；
@danny 新同事向大家做了一下简单的自我介绍，希望能够尽快融入隽永东方的大家庭当中。
隽永东方重磅推出的 Imagination & Inspiration Show Time (简称：I.I Show Time) 活动如期举行，本次分享创意和灵感的是Bob Zhao，以下简单记录一下此次分享的精彩瞬间：
Bob Zhao
@bob 分享了一款WordPress知名的高级搜索筛选插件facetwp：https://facetwp.com/ DEMO：https://facetwp.com/demo/cars/ 通过这个可以制作出很复杂的产品筛选功能；
隽永东方重磅推出的 Imagination & Inspiration Show Time (简称：I.I Show Time) 活动如期举行，本次分享创意和灵感的是Fans Fan、Drake Chen 和 Ellen Zuo，以下简单记录一下此次分享的精彩瞬间：
Fans Fan
@fans 通过给主题 functions.php 里边加入代码实现对网站主题自定义LOGO，标题等方面的后台管理；
/**
* Sangeet Custom Logo ( Used function_exists() wrapper to maintain backwards compatibility with older versions of WordPress. )
*/
function sangeet_get_custom_logo() {
if ( function_exists( 'get_custom_logo' ) ) {
return get_custom_logo();
}
}
//以下代码为输出LOGO显示；
<?php $logoOutput = sangeet_get_custom_logo();
if( ($logoOutput != '') ): ?>
<?php echo $logoOutput; ?>
<?php endif; ?>
Drake Chen
@drake 分享了一款很不错的可以视频本地和云端化的本地播放器，完美兼容所有移动设备，支持Responsive：https://github.com/selz/plyr#Options ；
Ellen Zuo
@ellen 分享了项目中使用Fancybox 和 lightbox 效果以后的兼容冲突处理方式，同时还分享了一款jQuery图片滚动插件 jquery.mThumbnailScroller 展示效果参考：http://www.ak-elec.com/adh50a-q/
隽永东方重磅推出的 Imagination & Inspiration Show Time (简称：I.I Show Time) 活动如期举行，本次分享创意和灵感的是April Xue 、 Fans Fan 和 Xiaoge Zhong，以下简单记录一下此次分享的精彩瞬间：
April Xue
@april 分享了一款类似Fontawesome的矢量字体库，可以直接嵌入网站： ；
Fans Fan
@fans 分享了奥凯项目Responsive菜单的做法，具体效果参考：http://www.ak-elec.com/。
Xiaoge Zhong
@eastern_design_studio 分享了Slider Revolution中通过导入经典DEMO数据，改造出炫酷的HTML5动画效果，演示如下：
隽永东方重磅推出的 Imagination & Inspiration Show Time (简称：I.I Show Time) 活动如期举行，本次分享创意和灵感的是April Xue 和 Xiaoge Zhong，以下简单记录一下此次分享的精彩瞬间：
April Xue
@april 分享了值得每个设计师收藏的《完美像素使用手册》之软件技巧篇：http://www.uisdc.com/pixel-perfect-precision-skills；
Xiaoge Zhong
@eastern_design_studio 分享了隽永东方团队内部云平台 Cloud Station的功能和使用方式，同时分享了Visual Composer的Templates的合理使用可以极大提升项目内页的制作效率。
隽永东方重磅推出的 Imagination & Inspiration Show Time (简称：I.I Show Time) 活动如期举行，本次分享创意和灵感的是Fans Fan 和 Caven Chen，以下简单记录一下此次分享的精彩瞬间：
Fans Fan
@fans 主要分享了一个静态背景图效果的CSS属性：background-attachment: fixed; 然后是有关ubermenu插件的一些新特性；
Caven Chen
@caven 分享了网站优化过程中有关图片裁切的注意事项，同时介绍了各种可能影响网页载入速度的因素。
隽永东方重磅推出的 Imagination & Inspiration Show Time (简称：I.I Show Time) 活动如期举行，本次分享创意和灵感的是Fans Fan 和 April Xue，以下简单记录一下此次分享的精彩瞬间：
Fans Fan
@fans 主要分享了一个 jQuery 的资源站： ，实现的特殊效果，比如： 首页的特殊TAB切换效果；
April Xue
@april 分享了知名图片分享网站：https://www.pinterest.com/ 通过此网站搜索关键词，获取设计素材和资源的方法。