书签页效果个人博客html5模板

    这是一款设计非常清新的书签页效果的个人博客HTML5模板，整个页面采用了淡淡的褐色网格作为背景，页面被一道“尺子”和“订书线”垂直的分成两部分，左边为书签效果的跟随滚轮滚动的导航，右边是正文。
    banner滚动没有采用插件，而是自己封装的插件，带缩略图预览和左右箭头。代码如下，可以自己研究下用在其他项目中，由于代码比较简单，并且有英文注释，这里不多做解释：

$(function() {
 //some elements..
 var $ps_container = $('#ps_container'),
 $ps_image_wrapper  = $ps_container.find('.ps_image_wrapper'),
 $ps_next = $ps_container.find('.ps_next'),
 $ps_prev = $ps_container.find('.ps_prev'),
 $ps_nav = $ps_container.find('.ps_nav'),
 $tooltip = $ps_container.find('.ps_preview'),
 $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
 $links = $ps_nav.children('li').not($tooltip),
 total_images = $links.length,
 currentHovered = -1,
 current = 0,
 $loader = $('#loader');
 
 /*check if you are using a browser*/ 
 var ie  = false;
 if ($.browser.msie) {
 ie = true;//you are not!Anyway let's give it a try
 }
 if(!ie)
 $tooltip.css({
 opacity : 0
 }).show();
 
 
 /*first preload images (thumbs and large images)*/
 var loaded = 0;
 $links.each(function(i){
 var $link  = $(this);
 $link.find('a').preload({
 onComplete : function(){
 ++loaded;
 if(loaded == total_images){
 //all images preloaded,
 //show ps_container and initialize events
 $loader.hide();
 $ps_container.show();
 //when mouse enters the pages (the dots),
 //show the tooltip,
 //when mouse leaves hide the tooltip,
 //clicking on one will display the respective image 
 $links.bind('mouseenter',showTooltip)
   .bind('mouseleave',hideTooltip)
   .bind('click',showImage);
 //navigate through the images
 $ps_next.bind('click',nextImage);
 $ps_prev.bind('click',prevImage);
 }
 }
 });
 });
 
 function showTooltip(){
 var $link = $(this),
 idx = $link.index(),
 linkOuterWidth = $link.outerWidth(),
 //this holds the left value for the next position
 //of the tooltip
 left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
 //the thumb image source
 $thumb = $link.find('a').attr('rel'),
 imageLeft;
 
 //if we are not hovering the current one
 if(currentHovered != idx){
 //check if we will animate left->right or right->left
 if(currentHovered != -1){
 if(currentHovered < idx){
 imageLeft = 75;
 }
 else{
 imageLeft = -75;
 }
 }
 currentHovered = idx;
 
 //the next thumb image to be shown in the tooltip
 var $newImage = $('<img/>').css('left','0px')
    .attr('src',$thumb);
 
 //if theres more than 1 image 
 //(if we would move the mouse too fast it would probably happen)
 //then remove the oldest one (:last)
 if($ps_preview_wrapper.children().length > 1)
 $ps_preview_wrapper.children(':last').remove();
 
 //prepend the new image
 $ps_preview_wrapper.prepend($newImage);
 
 var $tooltip_imgs = $ps_preview_wrapper.children(),
 tooltip_imgs_count = $tooltip_imgs.length;
 
 //if theres 2 images on the tooltip
 //animate the current one out, and the new one in
 if(tooltip_imgs_count > 1){
 $tooltip_imgs.eq(tooltip_imgs_count-1)
  .stop()
  .animate({
 left:-imageLeft+'px'
   },150,function(){
 //remove the old one
 $(this).remove();
   });
 $tooltip_imgs.eq(0)
  .css('left',imageLeft + 'px')
  .stop()
  .animate({
 left:'0px'
   },150);
 }
 }
 //if we are not using a "browser", we just show the tooltip,
 //otherwise we fade it
 //
 if(ie)
 $tooltip.css('left',left + 'px').show();
 else
 $tooltip.stop()
 .animate({
 left : left + 'px',
 opacity : 1
 },150);
 }
 
 function hideTooltip(){
 //hide / fade out the tooltip
 if(ie)
 $tooltip.hide();
 else
 $tooltip.stop()
     .animate({
 opacity : 0
 },150);
 }
 
 function showImage(e){
 var $link = $(this),
 idx = $link.index(),
 $image = $link.find('a').attr('href'),
 $currentImage  = $ps_image_wrapper.find('img'),
 currentImageWidth = $currentImage.width();
 
 //if we click the current one return
 if(current == idx) return false;
 
 //add class selected to the current page / dot
 $links.eq(current).removeClass('selected');
 $link.addClass('selected');
 
 //the new image element
 var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
    .attr('src',$image);
 
 //if the wrapper has more than one image, remove oldest
 if($ps_image_wrapper.children().length > 1)
 $ps_image_wrapper.children(':last').remove();
 
 //prepend the new image
 $ps_image_wrapper.prepend($newImage);
 
 //the new image width. 
 //This will be the new width of the ps_image_wrapper
 var newImageWidth = $newImage.width();
 
 //check animation direction
 if(current > idx){
 $newImage.css('left',-newImageWidth + 'px');
 currentImageWidth = -newImageWidth;
 } 
 current = idx;
 //animate the new width of the ps_image_wrapper 
 //(same like new image width)
 $ps_image_wrapper.stop().animate({
     width : newImageWidth + 'px'
 },350);
 //animate the new image in
 $newImage.stop().animate({
     left : '0px'
 },350);
 //animate the old image out
 $currentImage.stop().animate({
     left : -currentImageWidth + 'px'
 },350);
 
 e.preventDefault();
 } 
 
 function nextImage(){
 if(current < total_images){
 $links.eq(current+1).trigger('click');
 }
 }
 function prevImage(){
 if(current > 0){
 $links.eq(current-1).trigger('click');
 }
 }
});

    “MY RECENT WORK”部分的图片，点击后会弹出放大显示的层，效果是基于 jQuery fancybox弹出层。
    本模板非常适合作为个人博客的模板使用。因为比较有个性。我爱模板网之前也推荐过一款类似的博客模板： Klass木纹背景封面风格个人博客html模板。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！