我要评论演示图：
代码：
$(document).ready(function() {
greyinitredux();
iedropdownsnav();
iedropdownsfilter();
itemviewer();
jstabsetinit();
slider();
headertabs();
carousel();
emergencyclose();
replylinks();
adjournlinks();
zebra_strip_rows();
visitor_site_slideshow();
});
var carousel_round = 0;
/*-------------------------------------------
grey initial values
-------------------------------------------*/
function greyinitredux() {
$("input.filled, textarea.filled").focus(function(e){
if(this.value == this.defaultvalue)
{
$(this).removeclass('filled');
this.value= '';
}
$(this).blur(function(f){
if(this.value == this.defaultvalue) {
$(this).addclass('filled');
} else if(this.value == "") {
this.value = this.defaultvalue;
$(this).addclass('filled');
}
});
})
}
/*-------------------------------------------
ie6 css main nav dropdowns
-------------------------------------------*/
function iedropdownsnav() {
if(document.all&&document.getelementbyid)
{
navroot = document.getelementbyid('main-nav');
if (!navroot) { return false; }
for(i=0; i<navroot.childnodes.length; i++)
{
node = navroot.childnodes[i];
if (node.nodename=='li')
{
node.onmouseover=function()
{
this.classname+=' over';
}
node.onmouseout=function()
{
this.classname=this.classname.replace(' over', '');
}
}
}
}
}
/*-------------------------------------------
ie6 css main nav dropdowns
-------------------------------------------*/
function iedropdownsfilter() {
if(document.all&&document.getelementbyid)
{
navroot = document.getelementbyid('filter-drop');
if (!navroot) { return false; }
for(i=0; i<navroot.childnodes.length; i++)
{
node = navroot.childnodes[i];
if (node.nodename=='div')
{
node.onmouseover=function()
{
this.classname+=' over';
}
node.onmouseout=function()
{
this.classname=this.classname.replace(' over', '');
}
}
}
}
}
/*-------------------------------------------
view more
-------------------------------------------*/
function itemviewer() {
//$(document).delegate('#filter-drop a, .expandable > .load, .filter-nav a', 'click', function (e)
//$(document).delegate('.expandable > .load, .filter-nav a', 'click', function (e)
$(document).delegate('.filter-nav a', 'click', function (e)
{
// get the src for the content we're trying to view
var datasrc = $(this).attr('data-src');
// determine whether we're trying to sort the existing view
if($(this).attr('data-sort')) {
var datasort = $(this).attr('data-sort');
} else {
var datasort = $('.filter-nav > li > a').attr('data-sort');
}
// how many items do we have?
var itemoffset = $('.expandable .listing > li').size();
//find out if we clicked the menu, if so, clear out everything and add data attribute to the load more
if($(this).closest('p').hasclass("filter"))
{
var hiddendiv = $('<p />', {
"class": "items hidden spacer",
"height": $('.expandable').outerheight()
});
$('.expandable > .load').before(hiddendiv);
$('.expandable > ul, .expandable > p:not(.spacer)').remove();
$('.load').attr('data-src',datasrc);
// change class of dropdown toggle
var clickedclass = $(this).parent().attr('class');
$("#filter-drop strong").removeclass().addclass(clickedclass);
// change text of dropdown toggle
var thislabel = $(this).text();
$("#filter-drop strong span").text(thislabel);
// grab datasrc from clicked-on menu item and populate the filters with it
$('.filter-nav a').attr('data-src' , datasrc);
$('.filter-nav li').removeclass('active');
$('.filter-nav > li').eq(0).addclass('active');
}
//find out if we clicked the filter nav, if so let's switch the active class
if($(this).closest('ul').hasclass("filter-nav")) {
$('.filter-nav li').removeclass('active');
$(this).parent().addclass('active');
//also let's remove all the items before replacing them with what we want
var hiddendiv = $('<p />', {
"class": "items hidden spacer",
"height": $('.expandable').outerheight()
});
$('.expandable > .load').before(hiddendiv);
$('.expandable > ul, .expandable > p:not(.spacer)').remove();
}
$.get(datasrc, { offset: itemoffset, sort: datasort }, function(data) {
$('.expandable .spacer').remove();
var hiddendiv = $('<p class="items hidden"></p>');
$('.expandable > .load').before(hiddendiv);
$(hiddendiv).append(data).hide().removeclass("hidden").fadein();
});
e.preventdefault();
});
}
function jstabsetinit() {
var $tabset = $('.heading-tabset').eq(0);
var $tablist = $('<ul />', {"class": "heading-tab"});
$tabset.prepend($tablist);
$('p.heading-tab h3').each(function()
{
var $anchor = $('<a />', {
"class": $(this).attr('class'),
"onclick": '_gaq.push([\'_trackevent\', \'connect\', \'click\', \'head'+$(this).attr('class')+'\', 3]);',
"href": "#",
"html": $(this).html()
});
var $li = $('<li />');
$li.append($anchor);
$tablist.append($li);
});
$('p.heading-tab').remove();
$('.heading-tabset:gt(0)').each(function()
{
$tabset.append($(this).find('.listing'));
$(this).remove();
});
}
function slider() {
$('.slider').each(function()
{
// as we loop through the slider items we'll document the tallest one and the left position
// of each element
var maxheight = 0, lastwidth = 0;
// grab the slider and make sure the overflow is hidden and it has a defined width
var $slider = $(this);
$slider.css('width', $slider.outerwidth());
$slider.css('position', 'relative');
$slider.css('overflow', 'hidden');
// store the index (or the currently "selected" slide)
$slider.prop('index', 0);
// loop through each of the direct children
$slider.find('> *').each(function()
{
// localize the child as a jquery object
var $li = $(this);
// if this is the tallest child, document it
if ($li.outerheight() > maxheight)
{
maxheight = $li.outerheight();
}
// position each child to the immediate right of its preceding sibling
$li.css('position', 'absolute');
$li.css('top', 0);
$li.css('left', lastwidth);
// update our maths so we know where to place the next sibling
lastwidth+= $li.outerwidth();
});
// set the height of the slider based on the tallest child
//$slider.css('height', maxheight);
// build the previous control button and store a reference to its related slider
var $previous = $('<a />', {"class": "prev disabled", "href": "#", "text": "previous"});
$previous.prop('slider', $slider);
// build the next control button and store a reference to its related slider
var $next = $('<a />', {"class": "next", "href": "#", "text": "next"});
$next.prop('slider', $slider);
// build the controls p and add it to the markup
var $controls = $('<p />', {"class": "controls"}).append($previous).append($next);
$slider.after($controls);
$slider.prop('controls', $controls);
});
// watch for clicks on the controls
$(document).delegate('.listing + .controls .prev, .listing + .controls .next', 'click', function (event)
{
// stop our clicks from affecting the browser/url
event.preventdefault();
// localize a jquery version of the clicked link
var $anchor = $(this);
// grab the slider, that we previously stored while creating these links
var $slider = $anchor.prop('slider');
// localize the index for prettier code
var focusedindex = $slider.prop('index');
// determine what slide is focused
var $focus = $slider.find('> *').eq(focusedindex);
// grab the width of that focused slide
var widthdelta = $focus.outerwidth();
// if we clicked the next button we're moving to the left (negative values, so
// multiply by -1).
if ($anchor.hasclass('next'))
{
widthdelta *= -1;
}
focusedindex += ($anchor.hasclass('next')) ? 1 : -1;
// check that the upcoming movement won't push the first element too far to the right
// leaving whitespace before the element
if ($slider.find('> *').eq(0).position().left + widthdelta > 0)
{
return true;
}
// check that the upcoming movement won't push the last element too far to the left
// leaving whitespace after the element
var $lastchild = $slider.find('> *').eq(-1)
if ($lastchild.position().left + widthdelta < $slider.outerwidth() - $lastchild.outerwidth() - 1)
{
return true;
}
// get all the child elements, so we can loop through them and detmine offsets based
// on widths
var $siblings = $slider.find('> *');
// finally loop through each child and kick off the animation
$siblings.each(function(index)
{
// we'll determine the `left` in just a second, sit tight
var left = 0;
// localize the child element
var $li = $(this);
// loop through each sibling and determine the new left
if (index < focusedindex)
{
left = -$slider.outerwidth();
}
if (index >= focusedindex && index < focusedindex + 3)
{
left = 219 * (index - focusedindex);
}
if (index >= focusedindex + 3)
{
left = $slider.outerwidth() * 2;
}
// start the animation
$li.animate({'left': left}, 300);
// are we at the beginning?
if (index == 0 && left == 0)
{
$slider.prop('controls').find('.prev').addclass('disabled');
}
else if (index == 0)
{
$slider.prop('controls').find('.prev').removeclass('disabled');
}
// are we at the end?
if (index == $siblings.size()-1 && left == $slider.outerwidth() - $lastchild.outerwidth() - 1)
{
$slider.prop('controls').find('.next').addclass('disabled');
}
else if (index == $siblings.size()-1)
{
$slider.prop('controls').find('.next').removeclass('disabled');
}
});
// if we got down here then we actually moved the slider, update the reference to the
// focused slide
$slider.prop('index', focusedindex);
});
}
function headertabs()
{
var $tabset = $('.heading-tabset')
$tabset.find('.listing:gt(0)').hide();
$tabset.find('.controls:gt(0)').hide();
$tabset.find('.heading-tab li').eq(0).addclass('active');
$(document).delegate('.heading-tab a', 'click', function(event)
{
event.preventdefault();
$(this).parent().addclass('active');
$(this).parent().siblings().removeclass('active');
var index = $(this).parent().prevall('*').size();
$(this).parents('.heading-tabset').find('.listing').hide();
$(this).parents('.heading-tabset').find('.listing').eq(index).show();
$(this).parents('.heading-tabset').find('.controls').hide();
$(this).parents('.heading-tabset').find('.controls').eq(index).show();
});
}
function carousel()
{
$(document).delegate('.carousel .next, .carousel .previous', 'click', function(event)
{
// prevent the default anchor action
event.preventdefault();
// get the current carousel
var $carousel = $(this).parents('.carousel');
// check if we're already in the middle of a movement
if ($carousel.prop('moving'))
{
return true;
}
// if we actually clicked it, then stop any running timers
if (event.clientx)
{
stop($carousel);
}
// localize the index, so we know where we are
var index = $carousel.prop('index');
// determine if we're going forward or backward
var movingforward = $(this).hasclass('next');
// grab all the slides
var $slides = $carousel.find('.carousel-item');
// grab the currently focused slide
var $focus = $slides.eq(index);
// figure out where're we going from here
var nextobject = movingforward ? nextslide($carousel, index) : previousslide($carousel, index);
// locaalize the next p to be shown
var $next = nextobject.element;
// localize the index of the next element to be shown
var newindex = nextobject.index;
// determine where we should place the next element so it slides from the correct side
var initialleft = movingforward ? $(document.body).outerwidth() : -$next.outerwidth();
// save the current zero position, everything will move to/from here
var zeroposition = $focus.offset().left;
// determine where the focus is moving to
var targetleft = zeroposition + (movingforward ? -$next.outerwidth() : $next.outerwidth());
// we're comitted to moving now so set the flag to true so we don't duplicate animations
$carousel.prop('moving', true);
// reset all z-indexes to 1
$slides.css('z-index', 1);
// make the currently focused slide higher than all the rest
$focus.css('z-index', 2);
// setup the current slide so it can animate out
$focus.css({
"position": "absolute",
"top": 0,
"left": zeroposition
});
// setup the next slide to slide in, moving it above the focused slide and off screen
$next.css({
"opacity": 0,
"position": "absolute",
"top": 0,
"left": initialleft,
"z-index": 3
});
// animate the current slide out
$focus.animate({
"opacity": 0,
"left": targetleft
}, 800);
// set up what we're animating
var animation = {
"opacity": 1,
"left": zeroposition
}
// horrible ie fix
if ($.browser.msie && parseint($.browser.version) <= 8)
{
delete animation.opacity;
$focus.get(0).style.removeattribute('filter');
$next.get(0).style.removeattribute('filter');
}
// animate in the next slide, then upon completion reset everything. switch it back to
// relative positioning, remove our animation flag and hide the previous element
$next.show().animate(animation, 800, function()
{
$focus.hide();
$(this).css({
"position": "relative",
"left": 0
});
// fix msie
if ($.browser.msie && parseint($.browser.version) <= 8)
{
this.style.removeattribute('filter');
}
$carousel.prop('moving', false);
});
// animate the height of our carousel, because things are abosulte the box model is shot
$carousel.animate({
//"min-height": $next.outerheight()
});
// finally update our index to reflect the current view
$carousel.prop('index', newindex);
});
$(document).delegate('.carousel .pause', 'click', function(event)
{
// prevent the default anchor action
event.preventdefault();
// localize the carousel
var $carousel = $(this).parents('.carousel');
// get the current timer, if it exists
var timer = $carousel.prop('timer');
// no timer? start it
if (!timer)
{
start($carousel);
}
// timer? stop it
else
{
stop($carousel);
}
});
// start a new timer, additionally update the play/pause button to the correct visual state
function start($carousel)
{
timer = setinterval(function()
{
$carousel.find('.next').eq(0).trigger('click');
//n.c.: added to stop carousel after one round.
var index = $carousel.prop('index');
if ( index==0 && carousel_round > 0 ) {
stop($carousel);
}
else if ( index==1 ) {
carousel_round++;
}
}, 5000);
$carousel.prop('timer', timer);
$carousel.find('.play.pause').removeclass('play');
}
// stop any existing timers, additionally update the play/pause button to the correct
// visual state
function stop($carousel)
{
clearinterval(timer);
$carousel.prop('timer', false);
$carousel.find('.pause').addclass('play');
//n.c.: added to stop carousel after one round.
carousel_round = 0;
}
function nextslide($carousel, index)
{
var $slides = $carousel.find('.carousel-item');
if (index+1 < $slides.size())
{
return {"index":index+1, "element":$slides.eq(index+1)};
}
return {"index":0, "element":$slides.eq(0)};
}
function previousslide($carousel, index)
{
var $slides = $carousel.find('.carousel-item');
if (index-1 >= 0)
{
return {"index":index-1, "element":$slides.eq(index-1)};
}
return {"index":$slides.size()-1, "element":$slides.eq(-1)};
}
// build the controls for inclusion into the page
var $previousbtn = $('<a />', {"class": "previous", "href": "#", "text": "previous"});
var $playpausebtn = $('<a />', {"class": "play pause", "href": "#", "text": "play/pause"});
var $nextbtn = $('<a />', {"class": "next", "href": "#", "text": "next"});
var $controlsdiv = $('<p />', {"class": "carousel-controls"});
$controlsdiv.append($previousbtn);
$controlsdiv.append($playpausebtn);
$controlsdiv.append($nextbtn);
// loop through each carousel and set some default properties/styles
$('.carousel').each(function()
{
// localize the carousel to this function
var $carousel = $(this);
// set the positioning and a default height, becuase we're going to be taken out of the
// flow once our animation starts
$carousel.css({
"position": "relative"
//"min-height": $carousel.find('.carousel-item').eq(0).outerheight() //n.c. commented out
});
// store the currently visible slide's index
$carousel.prop('index', 0);
// hide subsequent slides
$carousel.find('.carousel-item:gt(0)').hide();
// append in our controls
$carousel.prepend($controlsdiv.clone(true));
// add the previous/next images
$carousel.find('.main-image').each(function(index)
{
// get the previous image
var $previmage = $(previousslide($carousel, index).element).find('.main-image').clone();
// remove the class
$previmage.removeclass('main-image');
// create a link for the previous image
var $previousanchor = $('<a />', {
"href": "#",
"class": "prev-image",
"html": $previmage
});
$previousanchor.css('opacity', 0.2);
// add in the previous image/anchor
$(this).before($previousanchor);
// get the next image
var $nextimage = $(nextslide($carousel, index).element).find('.main-image').clone();
// remove the class
$nextimage.removeclass('main-image');
// create a link for the previous image
var $nextanchor = $('<a />', {
"href": "#",
"class": "next-image",
"html": $nextimage
});
$nextanchor.css('opacity', 0.2);
// add in the next image/anchor
$(this).after($nextanchor);
});
// start the carousel by default
start($carousel);
});
}
function emergencyclose() {
//$('.emergency .wrap').append('<a href="#" class="close">close</a>');
$(document).delegate('.emergency .close', 'click', function(event)
{
event.preventdefault();
$(this).parents('.emergency').remove();
});
}
function replylinks() {
//$close = $('<a />', {"class": "close", "href": "#", "text": "close"});
$twitterwrap = $('<p />', {"id": "twitter-wrap"});
//$twitterwrap.append($close);
$twitter = $('<p />', {"id": "twitter"});
$twitterwrap.append($twitter);
$(document.body).append($twitterwrap);
/*twttr.anywhere(function (t) {
t("#twitter").tweetbox({
"width": 515,
"height": 133,
"defaultcontent": "",
"ontweet": function()
{
$("#twitter-wrap").fadeout('fast');
$('#overlay').fadeout();
$('#overlay').remove();
_gaq.push(['trackevent', 'home', 'submitreply', 'twitterreply', 5]);
//$twitter.remove();
}
});
});*/
$(document).delegate('.link-reply', 'click', function(event)
{
event.preventdefault();
//if ( !$('#overlay') ) {
$(document.body).prepend($('<p />', {"id": "overlay"}));
//}
$('#overlay').fadein();
$("#twitter-wrap").css({
"position": "fixed",
"top": 200,
"left": ($(document.body).width()-515)/2
});
if ($.browser == 'msie')
{
$("#twitter-wrap").css({
"position": "absolute",
"top": $(document.body).scrolltop() + 200
});
}
$("#twitter-wrap").fadein('fast');
});
$(document).delegate('#overlay, #twitter-wrap .close', 'click', function(event)
{
event.preventdefault();
$('#twitter-wrap').fadeout('fast');
$('#overlay').fadeout('fast', function()
{
$(this).remove();
})
});
}
function adjournlinks()
{
$('.adjoin-options').each(function()
{
var headings = [];
$(this).find('*[data-heading]').each(function()
{
headings[$(this).attr('data-heading')] = $(this).attr('data-heading');
});
var $headings = $('<ul />', {
"class": "adjoin-header"
});
for (var heading in headings)
{
var $li = $('<li />');
var $a = $('<a />', {
"href": "#",
"onclick": '_gaq.push([\'_trackevent\', \'socialdirectory\', \'click\', \'head'+heading+'\', 3]);',
"data-show": heading,
"text": heading
})
$li.append($a);
$headings.append($li);
}
$(this).before($headings);
});
$(document).delegate('a[data-show]', 'click', function(event)
{
// stop the default click action
event.preventdefault();
// set active
$(this).parent().siblings().find('.active').removeclass('active');
$(this).addclass('active');
// find the appropriate elements
$('.adjoin-options *[data-heading]').hide();
$('.adjoin-options *[data-heading="'+$(this).attr('data-show')+'"].').fadein();
});
$('.adjoin-header').find('a[data-show]').eq(0).trigger('click');
}
$(document).ready(function ()
{
var $filter = $('#filter-drop');
var $filterspacer = $('<p />', {
"class": "filter-drop-spacer",
"height": $filter.outerheight()
});
var $homeshield = $('.home .primary');
var $totalheight = $('.carousel').outerheight() + $('.header').outerheight()
if ($filter.size())
{
$(window).scroll(function ()
{
if($(window).scrolltop() > $totalheight ) {
$homeshield.addclass("shieldfix");
}
else if ($homeshield.hasclass('shieldfix') && $(window).scrolltop() < $totalheight)
{
$homeshield.removeclass("shieldfix");
}
if (!$filter.hasclass('fix') && $(window).scrolltop() > $filter.offset().top)
{
$filter.css('width', $filter.width());
$filter.before($filterspacer);
$filter.addclass("fix");
}
else if ($filter.hasclass('fix') && $(window).scrolltop() < $filterspacer.offset().top)
{
$filter.removeclass("fix");
$filterspacer.remove();
}
});
}
});
function get_more_home_items() {
if ( views_left>0 ) {
jquery("#home_items_loading").show();
jquery.ajax({
type: 'post',
url: 'ajax/home_items',
data: 'timestamp='+curr_timestamp+'&index='+views_left,
datatype: 'json',
success: function(data) {
jquery("#home_items_loading").hide();
jquery("#home_content").append(data.html);
curr_timestamp=data.timestamp;
}
});
views_left--;
}
var click_index = 2-views_left;
_gaq.push(['_trackevent', 'viewmorechannels', 'click', 'viewmore_'+click_index.tostring(), 3]);
if ( views_left<=0 ) {
jquery("#view_more").hide();
}
}
/*-------------------------------------------
add zebra strip rows of table with class "stripe" -- chris traganos
-------------------------------------------*/
function zebra_strip_rows() {
$("table.stripe tr:odd").addclass("odd");
$("table.stripe tr:even").addclass("even");
}
function visitor_site_slideshow() {
/* $('.visitors_slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollup, shuffle, etc...
}); */
}
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论