Угловой баннер (версия на jq)

[Zeppter]

Вы наверно встречали подобные баннеры, и наверняка мечтали о таком же.
Вот собственно говоря я и выкладываю.

баннер абсолютно не глючный.

Установка:

открываете блокнот кидаете туда:

Код: Выделить всё

(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

в css:

Код: Выделить всё

#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



теперь прописываем:

Код: Выделить всё

<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>

Вод собственно и все )

[uWeb]

плагин это