Вы наверно встречали подобные баннеры, и наверняка мечтали о таком же.
Вот собственно говоря я и выкладываю. баннер абсолютно не глючный.
Установка:
открываете блокнот кидаете туда:
Code
(function($){
$.fn.fold = function(options) {
var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
// We just won't show it for IE5.5 and IE6. Go away. I'm really tempted to write "document.location= 'http://www.getfirefox.com';" here.
if (ie55 || ie6) {this.remove(); return true;}
// New - you don't have to specify options!
options = options || {};
// Default awesomeness
var defaults = {
directory: '.', // The directory we're in
side: 'right', // change me to "right" if you want rightness
turnImage: 'fold-sw.png', // The triangle-shaped fold image
maxHeight: 400, // The maximum height. Duh.
startingWidth: 80, // The height and width
startingHeight: 80, // with which to start (these should probably be camelCase, d'oh.)
autoCurl: true // If this is set to true, the fold will curl/uncurl on mouseover/mouseout.
};
// Change turnImage if we're running the default image, and they've specified 'right'
if (options.side == 'right' && !options.turnImage) defaults.turnImage = 'fold-sw.png';
// Merge options with the defaults
var options = $.extend(defaults, options);
// Set up the wrapper objects
var turn_hideme = $('<div id="turn_hideme">');
var turn_wrapper = $('<div id="turn_wrapper">');
var turn_object = $('<div id="turn_object">');
var img = $('<img id="turn_fold" src="'+ (options.directory+'/'+options.turnImage) +'">');
// Set starting width and height of our turn-o-ma-bob
turn_object.css({
width: options.startingWidth,
height: options.startingHeight
});
// There are different CSS considerations for a top-right fold.
if (options.side == 'right') turn_wrapper.addClass('right');
// Rappin', I'm rappin' - I'm rap-rap-rappin'.
this.wrap(turn_wrapper).wrap(turn_object).after(img).wrap(turn_hideme);
// If you want autoCurl, you don't get scrolling. Why? Because it looks silly.
turn_wrapper = $('#turn_wrapper');
turn_object = $('#turn_object');
if (!options.autoCurl) {
// Hit 'em with the drag-stick because it ain't gonna curl itself!
turn_object.resizable({
maxHeight: options.maxHeight,
aspectRatio: true,
handles: options.side == 'left' ? 'se' : 'sw'
});
} else {
// Thanks to @zzzrByte for this bit!
turn_wrapper.hover(
function(){
turn_object.stop().animate({
width: options.maxHeight,
height: options.maxHeight
});
},
function(){
turn_object.stop().animate({
width: options.startingHeight,
height: options.startingHeight
});
}
);
}
};
})(jQuery);
сохраняете как turn.js
Code
#noborder { border:none};
#turn_wrapper {
width: 80px;
height: 80px;
display: block;
position: absolute;
top: 0;
left: 0;
}
#turn_hideme {
width: 85%;
height: 85%;
overflow: hidden;
display: block;
position: absolute;
float: left;
top: 0;
left: 0;
z-index: 1;
}
#turn_object{
position: relative;
}
#turn_wrapper.right #turn_hideme *,
#turn_wrapper.right #turn_object {
float: right !important;
}
#turn_wrapper.right #turn_hideme {
float: right !important;
right: 0 !important;
left: auto;
}
#turn_wrapper.right #turn_object {
right: 0 !important;
left: auto !important;
}
#turn_wrapper.right {
position: absolute;
top: 0;
width: 100%;
height: 0;
right: 0 !important;
}
#turn_wrapper.right #turn_object * {
position: absolute;
right: 0 !important;
}
#turn_wrapper #turn_object img#turn_fold {
display: block;
width: 100%;
height: 100%;
z-index: 1000;
right: 0;
position: absolute;
}
/* the jQuery CSS Framework */
#turn_wrapper .ui-resizable { position: relative;}
#turn_wrapper .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; background-image: url(#none)}
#turn_wrapper .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 0; bottom: 0; }
#turn_wrapper .ui-resizable-sw { cursor: sw-resize; width: 12px; height: 12px; left: 0; bottom: 0; }
заливаете 3 картинки в корень сайта:
1. code.png
2. fold.png
3. fold-sw.png
теперь прописываем:
Code
<head>
<script src="turn.js"></script>
<link rel="stylesheet" href="turn.css">
<script type="text/javascript">
$(document).ready(function(){
$('#target').fold();
});
</script>
</head>
<body>
<img src="code.png" id="target">
</body>
Вод собственно и все )