今天进行技术分享的有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 通过此工具可以检测网站常规的所有问题,并一一处理修复。