js旋转木马、锚点切换(bootstrap中的附加导航功能)、回顶部功能

早上起来想给我们的素材库首页写一些js效果,决心是抄袭百度图片的首页。他的js旋转木马和类似bootstrap的附加导航功能让我觉得比较不错。本想看看他的源代码,可惜审查元素一看MVC架构的全JS站,代码还经过了压缩的,找了半天没找到一句用得上的代码,于是就开始自己琢磨。

首先推荐两款插件:

一、旋转木马 infiniteCarousel 的跟百度的有区别(个人觉得没有百度的好,但是百度的功能不知道是怎么实现的,找了好久的源码没找到)。

二、锚点切换  这个插件是用原生javascript写的,个人觉得不怎么样,但是我为什么贴出来呢,是因为我最先找到的他,然后看了他的源码给了我灵感。所以还是很感谢他。另外需要说明的是,这个插件需要的是最后一个锚距离底部必须要有一屏高,不然最后一个锚点不会起作用。本来想用bootstrap来写这些效果,但是对他了解得不是很深,再加上html也是copy过来的,所以无法按照bootstrap的html格式来。另外觉得他强制了很多样式,一旦引入bootstrap.css就意味着一切都得按照他的设计来了,个人觉得有点傻瓜式。

三、回顶部,这个很简单不说了。

效果演示  demo

js 代码

<script type="text/javascript">
 var $anchor_dom = $('#content-body .tag-wrapper, .content-foot');
 var $anchor = new Array();
 var $anchor_target = $('#guide-layer a');
 var $windowheight = $(window).height();
 $.each($('#content-body .tag-wrapper, .content-foot'), function(index,item){
 $anchor.push($(item).offset().top);
 });
 function scroll_func(){
 var scrollheight = $(document).scrollTop();
 for (var i = 0; i < $anchor.length; i ++ ) {
 if (i == ($anchor.length -1)) {
 if ($anchor[i] + $($anchor_dom[i]).height() <= (scrollheight + $windowheight)){
 if (!$($anchor_target[i]).hasClass('selected')){
 $anchor_target.removeClass('selected');
 $($anchor_target[i]).addClass('selected');
 }
 }
 } else {
 if ($anchor[i] + $($anchor_dom[i]).height() <= (scrollheight + $windowheight) && (scrollheight + $windowheight)< $anchor[i+1] + $($anchor_dom[i]).height()){
 if (!$($anchor_target[i]).hasClass('selected')){
 $anchor_target.removeClass('selected');
 $($anchor_target[i]).addClass('selected');
 return true;
 }
 }
 }
 }
 scrollheight > 0 ? $('.goto-top').show() : $('.goto-top').hide();
 }
 function Rsize() {
 $windowheight = $(window).height();
 var documentwidth = $(document.body).width();
 $('.goto-top, #guide-layer').css( 'left' ,(1030 + (documentwidth - 980)/2) + 'px');
 }
 var $slider = $('#index-slider'), 
 $wrapper = $slider.find('.wrapper'), 
 $item = $wrapper.find(".content"),
 $first = $item.filter(":first"),
 $last = $item.filter(":last"),
 singleWidth = $first.width(), 
 currentdom = 1,
 pages = $item.length;
 $first.before($last.clone());
 $last.after($first.clone());
 $slider.scrollLeft(730);
 function gotoPage(dom_num) {
 var dir = dom_num < currentdom ? -1 : 1,
 left = singleWidth * dir;
 $slider.filter(':not(:animated)').animate({
 scrollLeft : '+=' + left
 }, 500, function () {
 if (dom_num == 0) {
 $slider.scrollLeft(singleWidth * pages );
 dom_num = pages;
 } else if (dom_num > pages) {
 $slider.scrollLeft(singleWidth);
 dom_num = 1;
 }
 currentdom = dom_num;
 });
 return false;
 }
 $(function(){
 Rsize();
 $('#guide-layer').show();
 scroll_func();
 $(window).bind({'scroll' : scroll_func, 'resize' : Rsize });
 $anchor_target.bind('click',function(){
 $anchor_target.removeClass('selected');
 $(this).addClass('selected');
 })
 $('.goto-top').click(function(){
 $('html, body').animate({scrollTop:0},300);
 });
 $('#index-slider-btn-left').click(function(){
 return gotoPage(currentdom - 1);
 });
 $('#index-slider-btn-right').click(function(){
 return gotoPage(currentdom + 1); 
 })
 })
 </script>