#327 修改了样式表和js文件
This commit is contained in:
Li Jianxuan
parent
1c28c334e4
commit
08643ffa71
|
|
@ -27,7 +27,7 @@ input, select {vertical-align:middle;}
|
||||||
ul,ul li{list-style:none;}
|
ul,ul li{list-style:none;}
|
||||||
/* Base
|
/* Base
|
||||||
---------------------------------------------------------------------*/
|
---------------------------------------------------------------------*/
|
||||||
body {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;font-size:12px;background-color:#F2F2F2;color:#666;margin:0 auto;}
|
body {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;font-size:12px;background-color:#FFF;color:#666;margin:0 auto;}
|
||||||
a {outline:none;}
|
a {outline:none;}
|
||||||
h1,h2,h3,h4,h5,h6 {color:#4D5762;position:relative;word-spacing:-0.1em;}
|
h1,h2,h3,h4,h5,h6 {color:#4D5762;position:relative;word-spacing:-0.1em;}
|
||||||
h4,h5,h6 {font-weight:bold;}
|
h4,h5,h6 {font-weight:bold;}
|
||||||
|
|
@ -225,3 +225,4 @@ input[type="submit"]:hover,.btn:hover, .btn:focus, .btn:active {outline:medium n
|
||||||
|
|
||||||
#view h1{color:#329ECC;}
|
#view h1{color:#329ECC;}
|
||||||
|
|
||||||
|
#slideshowHolder{ background-repeat:no-repeat; background-position:center center;}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,314 @@
|
||||||
|
/**
|
||||||
|
* jqFancyTransitions - jQuery plugin
|
||||||
|
* @version: 1.8 (2010/06/13)
|
||||||
|
* @requires jQuery v1.2.2 or later
|
||||||
|
* @author Ivan Lazarevic
|
||||||
|
* Examples and documentation at: http://www.workshop.rs/projects/jqfancytransitions
|
||||||
|
|
||||||
|
* Dual licensed under the MIT and GPL licenses:
|
||||||
|
* http://www.opensource.org/licenses/mit-license.php
|
||||||
|
* http://www.gnu.org/licenses/gpl.html
|
||||||
|
**/
|
||||||
|
|
||||||
|
(function($) {
|
||||||
|
var opts = new Array;
|
||||||
|
var level = new Array;
|
||||||
|
var img = new Array;
|
||||||
|
var links = new Array;
|
||||||
|
var titles = new Array;
|
||||||
|
var order = new Array;
|
||||||
|
var imgInc = new Array;
|
||||||
|
var inc = new Array;
|
||||||
|
var stripInt = new Array;
|
||||||
|
var imgInt = new Array;
|
||||||
|
|
||||||
|
$.fn.jqFancyTransitions = $.fn.jqfancytransitions = function(options){
|
||||||
|
|
||||||
|
init = function(el){
|
||||||
|
|
||||||
|
opts[el.id] = $.extend({}, $.fn.jqFancyTransitions.defaults, options);
|
||||||
|
img[el.id] = new Array(); // images array
|
||||||
|
links[el.id] = new Array(); // links array
|
||||||
|
titles[el.id] = new Array(); // titles array
|
||||||
|
order[el.id] = new Array(); // strips order array
|
||||||
|
imgInc[el.id] = 0;
|
||||||
|
inc[el.id] = 0;
|
||||||
|
|
||||||
|
params = opts[el.id];
|
||||||
|
|
||||||
|
if(params.effect == 'zipper'){ params.direction = 'alternate'; params.position = 'alternate'; }
|
||||||
|
if(params.effect == 'wave'){ params.direction = 'alternate'; params.position = 'top'; }
|
||||||
|
if(params.effect == 'curtain'){ params.direction = 'alternate'; params.position = 'curtain'; }
|
||||||
|
|
||||||
|
// width of strips
|
||||||
|
stripWidth = parseInt(params.width / params.strips);
|
||||||
|
gap = params.width - stripWidth*params.strips; // number of pixels
|
||||||
|
stripLeft = 0;
|
||||||
|
|
||||||
|
// create images and titles arrays
|
||||||
|
$.each($('#'+el.id+' img'), function(i,item){
|
||||||
|
img[el.id][i] = $(item).attr('src');
|
||||||
|
links[el.id][i] = $(item).next().attr('href');
|
||||||
|
titles[el.id][i] = $(item).attr('alt') ? $(item).attr('alt') : '';
|
||||||
|
$(item).hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
// set panel
|
||||||
|
$('#'+el.id).css({
|
||||||
|
'background-image':'url('+img[el.id][0]+')',
|
||||||
|
'width': params.width,
|
||||||
|
'height': params.height,
|
||||||
|
'position': 'relative',
|
||||||
|
'background-position': 'center center',
|
||||||
|
'background-repeat':'no-repeat'
|
||||||
|
});
|
||||||
|
|
||||||
|
// create title bar
|
||||||
|
$('#'+el.id).append("<div class='ft-title' id='ft-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000; color: #fff; background-color: #000; '>"+titles[el.id][0]+"</div>");
|
||||||
|
if(titles[el.id][imgInc[el.id]])
|
||||||
|
$('#ft-title-'+el.id).css('opacity',opts[el.id].titleOpacity);
|
||||||
|
else
|
||||||
|
$('#ft-title-'+el.id).css('opacity',0);
|
||||||
|
|
||||||
|
if(params.navigation){
|
||||||
|
$.navigation(el);
|
||||||
|
$('#ft-buttons-'+el.id).children().first().addClass('ft-button-'+el.id+'-active');
|
||||||
|
}
|
||||||
|
|
||||||
|
odd = 1;
|
||||||
|
// creating bars
|
||||||
|
// and set their position
|
||||||
|
for(j=1; j < params.strips+1; j++){
|
||||||
|
|
||||||
|
if( gap > 0){
|
||||||
|
tstripWidth = stripWidth + 1;
|
||||||
|
gap--;
|
||||||
|
} else {
|
||||||
|
tstripWidth = stripWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(params.links)
|
||||||
|
$('#'+el.id).append("<a href='"+links[el.id][0]+"' class='ft-"+el.id+"' id='ft-"+el.id+j+"' style='width:"+tstripWidth+"px; height:"+params.height+"px; float: left; position: absolute;outline:none;'></a>");
|
||||||
|
else
|
||||||
|
$('#'+el.id).append("<div class='ft-"+el.id+"' id='ft-"+el.id+j+"' style='width:"+tstripWidth+"px; height:"+params.height+"px; float: left; position: absolute;'></div>");
|
||||||
|
|
||||||
|
// positioning bars
|
||||||
|
$("#ft-"+el.id+j).css({
|
||||||
|
'background-position': -stripLeft +'px top',
|
||||||
|
'left' : stripLeft
|
||||||
|
});
|
||||||
|
|
||||||
|
stripLeft += tstripWidth;
|
||||||
|
|
||||||
|
if(params.position == 'bottom')
|
||||||
|
$("#ft-"+el.id+j).css( 'bottom', 0 );
|
||||||
|
|
||||||
|
if (j%2 == 0 && params.position == 'alternate')
|
||||||
|
$("#ft-"+el.id+j).css( 'bottom', 0 );
|
||||||
|
|
||||||
|
// bars order
|
||||||
|
// fountain
|
||||||
|
if(params.direction == 'fountain' || params.direction == 'fountainAlternate'){
|
||||||
|
order[el.id][j-1] = parseInt(params.strips/2) - (parseInt(j/2)*odd);
|
||||||
|
order[el.id][params.strips-1] = params.strips; // fix for odd number of bars
|
||||||
|
odd *= -1;
|
||||||
|
} else {
|
||||||
|
// linear
|
||||||
|
order[el.id][j-1] = j;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.ft-'+el.id).mouseover(function(){
|
||||||
|
opts[el.id].pause = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.ft-'+el.id).mouseout(function(){
|
||||||
|
opts[el.id].pause = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#ft-title-'+el.id).mouseover(function(){
|
||||||
|
opts[el.id].pause = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#ft-title-'+el.id).mouseout(function(){
|
||||||
|
opts[el.id].pause = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
clearInterval(imgInt[el.id]);
|
||||||
|
imgInt[el.id] = setInterval(function() { $.transition(el) }, params.delay+params.stripDelay*params.strips);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// transition
|
||||||
|
$.transition = function(el,direction){
|
||||||
|
|
||||||
|
if(opts[el.id].pause == true) return;
|
||||||
|
|
||||||
|
stripInt[el.id] = setInterval(function() { $.strips(order[el.id][inc[el.id]], el) },opts[el.id].stripDelay);
|
||||||
|
|
||||||
|
$('#'+el.id).css({ 'background-image': 'url('+img[el.id][imgInc[el.id]]+')' });
|
||||||
|
|
||||||
|
if(typeof(direction) == "undefined")
|
||||||
|
imgInc[el.id]++;
|
||||||
|
else
|
||||||
|
if(direction == 'prev')
|
||||||
|
imgInc[el.id]--;
|
||||||
|
else
|
||||||
|
imgInc[el.id] = direction;
|
||||||
|
|
||||||
|
if (imgInc[el.id] == img[el.id].length) {
|
||||||
|
imgInc[el.id] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (imgInc[el.id] == -1){
|
||||||
|
imgInc[el.id] = img[el.id].length-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(titles[el.id][imgInc[el.id]]!=''){
|
||||||
|
$('#ft-title-'+el.id).animate({ opacity: 0 }, opts[el.id].titleSpeed, function(){
|
||||||
|
$(this).html(titles[el.id][imgInc[el.id]]).animate({ opacity: opts[el.id].titleOpacity }, opts[el.id].titleSpeed);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$('#ft-title-'+el.id).animate({ opacity: 0}, opts[el.id].titleSpeed);
|
||||||
|
}
|
||||||
|
|
||||||
|
inc[el.id] = 0;
|
||||||
|
|
||||||
|
buttons = $('#ft-buttons-'+el.id).children();
|
||||||
|
|
||||||
|
buttons.each(function(index){
|
||||||
|
if(index == imgInc[el.id]){
|
||||||
|
$(this).addClass('ft-button-'+el.id+'-active');
|
||||||
|
} else{
|
||||||
|
$(this).removeClass('ft-button-'+el.id+'-active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if(opts[el.id].direction == 'random')
|
||||||
|
$.fisherYates (order[el.id]);
|
||||||
|
|
||||||
|
if((opts[el.id].direction == 'right' && order[el.id][0] == 1)
|
||||||
|
|| opts[el.id].direction == 'alternate'
|
||||||
|
|| opts[el.id].direction == 'fountainAlternate')
|
||||||
|
order[el.id].reverse();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// strips animations
|
||||||
|
$.strips = function(itemId, el){
|
||||||
|
|
||||||
|
temp = opts[el.id].strips;
|
||||||
|
if (inc[el.id] == temp) {
|
||||||
|
clearInterval(stripInt[el.id]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$('.ft-'+el.id).attr('href',links[el.id][imgInc[el.id]]);
|
||||||
|
if(opts[el.id].position == 'curtain'){
|
||||||
|
currWidth = $('#ft-'+el.id+itemId).width();
|
||||||
|
$('#ft-'+el.id+itemId).css({ width: 0, opacity: 0, 'background-image': 'url('+img[el.id][imgInc[el.id]]+')' });
|
||||||
|
$('#ft-'+el.id+itemId).animate({ width: currWidth, opacity: 1 }, 1000);
|
||||||
|
} else {
|
||||||
|
$('#ft-'+el.id+itemId).css({ height: 0, opacity: 0, 'background-image': 'url('+img[el.id][imgInc[el.id]]+')' });
|
||||||
|
$('#ft-'+el.id+itemId).animate({ height: opts[el.id].height, opacity: 1 }, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
inc[el.id]++;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// navigation
|
||||||
|
$.navigation = function(el){
|
||||||
|
// create prev and next
|
||||||
|
$('#'+el.id).append("<a href='#' id='ft-prev-"+el.id+"' class='ft-prev'>prev</a>");
|
||||||
|
$('#'+el.id).append("<a href='#' id='ft-next-"+el.id+"' class='ft-next'>next</a>");
|
||||||
|
$('#ft-prev-'+el.id).css({
|
||||||
|
'position' : 'absolute',
|
||||||
|
'top' : params.height/2 - 15,
|
||||||
|
'left' : 0,
|
||||||
|
'z-index' : 1001,
|
||||||
|
'line-height': '30px',
|
||||||
|
'opacity' : 0.7
|
||||||
|
}).click( function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
$.transition(el,'prev');
|
||||||
|
clearInterval(imgInt[el.id]);
|
||||||
|
imgInt[el.id] = setInterval(function() { $.transition(el) }, params.delay+params.stripDelay*params.strips);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#ft-next-'+el.id).css({
|
||||||
|
'position' : 'absolute',
|
||||||
|
'top' : params.height/2 - 15,
|
||||||
|
'right' : 0,
|
||||||
|
'z-index' : 1001,
|
||||||
|
'line-height': '30px',
|
||||||
|
'opacity' : 0.7
|
||||||
|
}).click( function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
$.transition(el);
|
||||||
|
clearInterval(imgInt[el.id]);
|
||||||
|
imgInt[el.id] = setInterval(function() { $.transition(el) }, params.delay+params.stripDelay*params.strips);
|
||||||
|
});
|
||||||
|
|
||||||
|
// image buttons
|
||||||
|
$("<div id='ft-buttons-"+el.id+"'></div>").insertAfter($('#'+el.id));
|
||||||
|
$('#ft-buttons-'+el.id).css({
|
||||||
|
'text-align' : 'right',
|
||||||
|
'padding-top' : 5,
|
||||||
|
'width' : opts[el.id].width
|
||||||
|
});
|
||||||
|
for(k=1;k<img[el.id].length+1;k++){
|
||||||
|
$('#ft-buttons-'+el.id).append("<a href='#' class='ft-button-"+el.id+"'>"+k+"</a>");
|
||||||
|
}
|
||||||
|
$('.ft-button-'+el.id).css({
|
||||||
|
'padding' : 5
|
||||||
|
});
|
||||||
|
|
||||||
|
$.each($('.ft-button-'+el.id), function(i,item){
|
||||||
|
$(item).click( function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
$.transition(el,i);
|
||||||
|
clearInterval(imgInt[el.id]);
|
||||||
|
imgInt[el.id] = setInterval(function() { $.transition(el) }, params.delay+params.stripDelay*params.strips);
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// shuffle array function
|
||||||
|
$.fisherYates = function(arr) {
|
||||||
|
var i = arr.length;
|
||||||
|
if ( i == 0 ) return false;
|
||||||
|
while ( --i ) {
|
||||||
|
var j = Math.floor( Math.random() * ( i + 1 ) );
|
||||||
|
var tempi = arr[i];
|
||||||
|
var tempj = arr[j];
|
||||||
|
arr[i] = tempj;
|
||||||
|
arr[j] = tempi;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.each (
|
||||||
|
function(){ init(this); }
|
||||||
|
);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// default values
|
||||||
|
$.fn.jqFancyTransitions.defaults = {
|
||||||
|
width: 500, // width of panel
|
||||||
|
height: 332, // height of panel
|
||||||
|
strips: 10, // number of strips
|
||||||
|
delay: 5000, // delay between images in ms
|
||||||
|
stripDelay: 50, // delay beetwen strips in ms
|
||||||
|
titleOpacity: 0.7, // opacity of title
|
||||||
|
titleSpeed: 1000, // speed of title appereance in ms
|
||||||
|
position: 'alternate', // top, bottom, alternate, curtain
|
||||||
|
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
|
||||||
|
effect: '', // curtain, zipper, wave
|
||||||
|
navigation: false, // prev next and buttons
|
||||||
|
links : false // show images as links
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
Loading…
Reference in New Issue