书签页效果个人博客html5模板_个人博客个人网站div+css,html,静态页面模板免费下载_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

个人博客html模板

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

001$(function() {
002 //some elements..
003 var $ps_container = $('#ps_container'),
004 $ps_image_wrapper  = $ps_container.find('.ps_image_wrapper'),
005 $ps_next = $ps_container.find('.ps_next'),
006 $ps_prev = $ps_container.find('.ps_prev'),
007 $ps_nav = $ps_container.find('.ps_nav'),
008 $tooltip = $ps_container.find('.ps_preview'),
009 $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
010 $links = $ps_nav.children('li').not($tooltip),
011 total_images = $links.length,
012 currentHovered = -1,
013 current = 0,
014 $loader = $('#loader');
015  
016 /*check if you are using a browser*/
017 var ie  = false;
018 if ($.browser.msie) {
019 ie = true;//you are not!Anyway let's give it a try
020 }
021 if(!ie)
022 $tooltip.css({
023 opacity : 0
024 }).show();
025  
026  
027 /*first preload images (thumbs and large images)*/
028 var loaded = 0;
029 $links.each(function(i){
030 var $link  = $(this);
031 $link.find('a').preload({
032 onComplete : function(){
033 ++loaded;
034 if(loaded == total_images){
035 //all images preloaded,
036 //show ps_container and initialize events
037 $loader.hide();
038 $ps_container.show();
039 //when mouse enters the pages (the dots),
040 //show the tooltip,
041 //when mouse leaves hide the tooltip,
042 //clicking on one will display the respective image 
043 $links.bind('mouseenter',showTooltip)
044   .bind('mouseleave',hideTooltip)
045   .bind('click',showImage);
046 //navigate through the images
047 $ps_next.bind('click',nextImage);
048 $ps_prev.bind('click',prevImage);
049 }
050 }
051 });
052 });
053  
054 function showTooltip(){
055 var $link = $(this),
056 idx = $link.index(),
057 linkOuterWidth = $link.outerWidth(),
058 //this holds the left value for the next position
059 //of the tooltip
060 left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
061 //the thumb image source
062 $thumb = $link.find('a').attr('rel'),
063 imageLeft;
064  
065 //if we are not hovering the current one
066 if(currentHovered != idx){
067 //check if we will animate left->right or right->left
068 if(currentHovered != -1){
069 if(currentHovered < idx){
070 imageLeft = 75;
071 }
072 else{
073 imageLeft = -75;
074 }
075 }
076 currentHovered = idx;
077  
078 //the next thumb image to be shown in the tooltip
079 var $newImage = $('<img/>').css('left','0px')
080    .attr('src',$thumb);
081  
082 //if theres more than 1 image 
083 //(if we would move the mouse too fast it would probably happen)
084 //then remove the oldest one (:last)
085 if($ps_preview_wrapper.children().length > 1)
086 $ps_preview_wrapper.children(':last').remove();
087  
088 //prepend the new image
089 $ps_preview_wrapper.prepend($newImage);
090  
091 var $tooltip_imgs = $ps_preview_wrapper.children(),
092 tooltip_imgs_count = $tooltip_imgs.length;
093  
094 //if theres 2 images on the tooltip
095 //animate the current one out, and the new one in
096 if(tooltip_imgs_count > 1){
097 $tooltip_imgs.eq(tooltip_imgs_count-1)
098  .stop()
099  .animate({
100 left:-imageLeft+'px'
101   },150,function(){
102 //remove the old one
103 $(this).remove();
104   });
105 $tooltip_imgs.eq(0)
106  .css('left',imageLeft + 'px')
107  .stop()
108  .animate({
109 left:'0px'
110   },150);
111 }
112 }
113 //if we are not using a "browser", we just show the tooltip,
114 //otherwise we fade it
115 //
116 if(ie)
117 $tooltip.css('left',left + 'px').show();
118 else
119 $tooltip.stop()
120 .animate({
121 left : left + 'px',
122 opacity : 1
123 },150);
124 }
125  
126 function hideTooltip(){
127 //hide / fade out the tooltip
128 if(ie)
129 $tooltip.hide();
130 else
131 $tooltip.stop()
132     .animate({
133 opacity : 0
134 },150);
135 }
136  
137 function showImage(e){
138 var $link = $(this),
139 idx = $link.index(),
140 $image = $link.find('a').attr('href'),
141 $currentImage  = $ps_image_wrapper.find('img'),
142 currentImageWidth = $currentImage.width();
143  
144 //if we click the current one return
145 if(current == idx) return false;
146  
147 //add class selected to the current page / dot
148 $links.eq(current).removeClass('selected');
149 $link.addClass('selected');
150  
151 //the new image element
152 var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
153    .attr('src',$image);
154  
155 //if the wrapper has more than one image, remove oldest
156 if($ps_image_wrapper.children().length > 1)
157 $ps_image_wrapper.children(':last').remove();
158  
159 //prepend the new image
160 $ps_image_wrapper.prepend($newImage);
161  
162 //the new image width. 
163 //This will be the new width of the ps_image_wrapper
164 var newImageWidth = $newImage.width();
165  
166 //check animation direction
167 if(current > idx){
168 $newImage.css('left',-newImageWidth + 'px');
169 currentImageWidth = -newImageWidth;
170 } 
171 current = idx;
172 //animate the new width of the ps_image_wrapper 
173 //(same like new image width)
174 $ps_image_wrapper.stop().animate({
175     width : newImageWidth + 'px'
176 },350);
177 //animate the new image in
178 $newImage.stop().animate({
179     left : '0px'
180 },350);
181 //animate the old image out
182 $currentImage.stop().animate({
183     left : -currentImageWidth + 'px'
184 },350);
185  
186 e.preventDefault();
187 } 
188  
189 function nextImage(){
190 if(current < total_images){
191 $links.eq(current+1).trigger('click');
192 }
193 }
194 function prevImage(){
195 if(current > 0){
196 $links.eq(current-1).trigger('click');
197 }
198 }
199});

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

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

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

猜你喜欢