- $(function() {
- //当前窗口的宽度和高度
- var window_w = $(window).width();
- var window_h = $(window).height();
- //主层的div
- var $pc_panel = $('#pc_panel');
- //封装层和内容的层
- var $pc_wrapper = $('#pc_wrapper');
- var $pc_content = $('#pc_content');
- //滑动层
- var $pc_slider = $('#pc_slider');
- //引用层-当滚动到此元素的时候,则触发滑动层出来
- var $pc_reference = $('#pc_reference');
- var maxWidth,maxHeight,marginL;
- buildPanel();
- function buildPanel(){
- $pc_panel.CSS({'height': window_h + 'px'});
- hidePanel();
- //此处我怕翻译得不好,所以不删除英文了
- //we want to display the items in a grid.
- //we need to calculate how much width and height
- //the wrapper should have.
- //we also want to display it centered, so we need to calculate
- //the margin left of the wrapper
- //First, lets see how much of height:
- //maxHeight = Math.floor((window_h-20)/135)*135;
- //20 => pc_titles height
- //135 => 125 of each items height plus its margin (10)
- //我们期望在表格里显示推荐文章项。
- //我们需要计算出封装层需要多大的宽度和高度。
- //我们想让它居中显示,因此我们需要计算出封装层的margin-left 的数值
- //首先,让我们来看下需要多少高度:
- //maxHeight = Math.floor((window_h-20)/135)*135;
- //20是指 pc_titles 的高度
- //135是指每篇推荐文章的高度(120)加上 margin (10)
- maxHeight = Math.floor((window_h-20)/135)*135;
- //maxWidth = Math.floor((window_w-35)/220)*220;
- //220 = item width + margins (left and right)
- //220 等于每项的宽度加上边缘宽度 (左边和右边)
- maxWidth = Math.floor((window_w-35)/220)*220;
- marginL = (window_w - maxWidth)/2;
- $pc_wrapper.css({
- 'width' : maxWidth + 20 + 'px',
- 'height' : maxHeight +'px',
- 'margin-left' : marginL + 'px'
- });
- //初始化滑动层
- try{
- $pc_slider.slider('destroy');
- }catch(e){}
- //total_scroll 就是我们所能够滚动的数目
- var total_scroll = $pc_content.height()-maxHeight;
- //添加滑块到内容的div里
- //在推荐层展开之前先隐藏它
- if(total_scroll > 0){
- $pc_slider.slider({
- orientation : 'vertical',
- max : total_scroll,
- min : 0,
- value : total_scroll,
- slide : function(event, ui) {
- $pc_wrapper.scrollTop(Math.abs(ui.value-total_scroll));
- }
- }).css({
- 'height' : maxHeight -40 + 'px',//40 extra
- 'left' : maxWidth + 20 + marginL + 'px',
- 'top' : 30 + 20 + 'px',
- //30 = 20 of title + 10 margin, 20 extra
- 'display' : 'none'
- });
- }
- }
- //the panel gets positioned out of the viewport,
- //and ready to be slided out!
- //这个推荐层的定位和是否被滑动要看窗口的情况,
- function hidePanel(){
- //165 => 20 pc_title + 120 item + margins
- $pc_panel.css({
- 'right' : -window_w + 'px',
- 'top' : window_h - 165 + 'px'
- }).show();
- try{
- //在开始的时候定位滑块的位置
- slideTop();
- }catch(e){}
- $pc_slider.hide();
- $pc_panel.find('.collapse')
- .addClass('expand')
- .removeClass('collapse');
- }
- //重置滑块到顶部
- function slideTop(){
- var total_scroll = $pc_content.height()-maxHeight;
- $pc_wrapper.scrollTop(0);
- $pc_slider.slider('option', 'value', total_scroll );
- }
- $(window).bind('scroll',function(){
- /*
- When we reach the element pc_reference, we want to show the panel.
- Let's get the distance from the top to the element
- /当我们到达pc_reference的这个元素的时候,我们讲显示这个推荐层。
- 让我们获取这个元素的距离吧。
- */
- var distanceTop = $pc_reference.offset().top - window_h;
- if($(window).scrollTop() > distanceTop){
- if(parseInt($pc_panel.css('right'),10) == -window_w)
- $pc_panel.stop().animate({'right':'0px'},300);
- }
- else{
- if(parseInt($pc_panel.css('right'),10) == 0)
- $pc_panel.stop().animate({'right': -window_w + 'px'},300,function(){
- hidePanel();
- });
- }
- }).bind('resize',function(){
- //on resize calculate the windows dimentions again,
- //and build the panel accordingly
- //重新调整并计算出当前窗口的尺寸
- //并由此建立出推荐层出来
- window_w = $(window).width();
- window_h = $(window).height();
- buildPanel();
- });
- //when clicking on the expand button,
- //we animate the panel to the size of the window,
- //reset the slider and show it
- //当我们点击展开的按钮的时候,我们将看到推荐层动态的占满整个窗口,
- //同事要重置滑块并且显示它
- $pc_panel.find('.expand').bind('click',function(){
- var $this = $(this);
- $pc_wrapper.hide();
- $pc_panel.stop().animate({'top':'0px'},500,function(){
- $pc_wrapper.show();
- slideTop();
- $pc_slider.show();
- $this.addClass('collapse').removeClass('expand');
- });
- })
- //clicking collapse will hide the slider,
- //and minimize the panel
- //点击折叠的时候我们将隐藏滑块和缩小推荐层
- $pc_panel.find('.collapse').live('click',function(){
- var $this = $(this);
- $pc_wrapper.hide();
- $pc_slider.hide();
- $pc_panel.stop().animate({'top':window_h - 165 + 'px'},500,function(){
- $pc_wrapper.show();
- $this.addClass('expand').removeClass('collapse');
- });
- });
- //点击关闭我们将隐藏推荐层
- $pc_panel.find('.close').bind('click',function(){
- $pc_panel.remove();
- $(window).unbind('scroll').unbind('resize');
- });
- //mouse over the items add class "selected"
- //鼠标经过文章的时候将添加类“selected”
- $pc_wrapper.find('.pc_item').hover(
- function(){
- $(this).addClass('selected');
- },
- function(){
- $(this).removeClass('selected');
- }
- ).bind('click',function(){
- window.open($(this).find('.pc_more').html());
- });
- });
- //该片段来自于http://www.codesnippet.cn/detail/160520149590.html
来源: http://www.codesnippet.cn/detail/160520149590.html