幽灵资源网 Design By www.bzswh.com
演示图:
代码:
$(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"filter"))
{
var hiddenDiv = $('<div />', {
"class": "items hidden spacer",
"height": $('.expandable').outerHeight()
});
$('.expandable > .load').before(hiddenDiv);
$('.expandable > ul, .expandable > div: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 = $('<div />', {
"class": "items hidden spacer",
"height": $('.expandable').outerHeight()
});
$('.expandable > .load').before(hiddenDiv);
$('.expandable > ul, .expandable > div:not(.spacer)').remove();
}
$.get(dataSrc, { offset: itemOffset, sort: dataSort }, function(data) {
$('.expandable .spacer').remove();
var hiddenDiv = $('<div class="items hidden"></div>');
$('.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);
$('div.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);
});
$('div.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 div and add it to the markup
var $controls = $('<div />', {"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')) "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"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 = $('<div />', {"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 = $('<div />', {"id": "twitter-wrap"});
//$twitterWrap.append($close);
$twitter = $('<div />', {"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($('<div />', {"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 = $('<div />', {
"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...
}); */
}
以上所述就是本文的全部内容了,希望大家能够喜欢。
标签:
jQuery,左右切换,焦点图
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
