+Joky Postat Ianuarie 9, 2015 Raport Postat Ianuarie 9, 2015 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery.extend(jQuery.easing, {easeOutExpo:function (x, t, b, c, d) { //see: This is the hidden content, please Autentificare sau Înregistrare return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; } }); (function($){ $.fn.overlaycontent=function(options) { var setting={id:'', dir:'up', speed:200, opacity:1} return this.each(function(){ $.extend(setting, options, (this.getAttribute('data-overlayid'))? {id:this.getAttribute('data-overlayid')} : {}) var $target=$(this).css({position:'relative', overflow:'hidden'}) //set anchor DIV position to relative var $overlay=$('#'+(setting.id)) //reference overlay DIV box var startpoint={} if (setting.dir=="up" || setting.dir=="down"){ //set initial position of overlay box (either "top" or "left" property affected) startpoint={top:$target.outerHeight()* (setting.dir=="down"? -1 : 1)} } else{ startpoint={left:$target.outerWidth()* (setting.dir=="right"? -1 : 1)} } var overlaydimenions={w:$target.outerWidth()-($overlay.outerWidth()-$overlay.width()), h:$target.outerHeight()-($overlay.outerHeight()-$overlay.height())} $overlay.css($.extend({position:'absolute', zIndex:'1000', width:overlaydimenions.w, height:overlaydimenions.h, left:0, top:0, visibility:'visible'}, startpoint)).appendTo($target) if (setting.opacity<1) $overlay.css({opacity:setting.opacity}) $target.hover( function(){ $overlay.dequeue().animate((setting.dir=="up" || setting.dir=="down")? {top:0} : {left:0}, setting.speed, 'easeOutExpo') }, function(){ $overlay.dequeue().animate(startpoint, setting.speed) } ) //end hover }) } })(jQuery); </script> <script> jQuery(function($){ //on document.ready $('#info').overlaycontent({ //initialize overlay on single DIV with id="info" speed:500, //duration of animation in milliseconds dir:'up' //supports 'up', 'down', 'left', or 'right' }) $('div.imagecontainers').overlaycontent({ //initialize overlay on DIVs with class="imagecontainers" speed:300, dir:'right', opacity:0.8 //opacity: 0 to 1 }) }) </script> <style type="text/css"> div#summerinfo{ background:white; padding:5px; } </style> </head> <body> <div class="imagecontainers" data-overlayid="summerinfo" style="display:block-inline;width:200px;height:150px"> <img src="http://www.htmlbestcodes.com/images/summery.jpg"> </div> <div id="summerinfo"> <a href=" This is the hidden content, please Autentificare sau Înregistrare ">Useful Scripts</a><br /> <a href=" This is the hidden content, please Autentificare sau Înregistrare ">Beautiful and well designed</a><br /> <a href=" This is the hidden content, please Autentificare sau Înregistrare ">Latest technologies</a><br /> <a href=" This is the hidden content, please Autentificare sau Înregistrare "> This is the hidden content, please Autentificare sau Înregistrare </a><br /> </div> <br/> </body> </html>
Postări Recomandate
Creează un cont sau autentifică-te pentru a adăuga comentariu
Trebuie să fi un membru pentru a putea lăsa un comentariu.
Creează un cont
Înregistrează-te pentru un nou cont în comunitatea noastră. Este simplu!
Înregistrează un nou contAutentificare
Ai deja un cont? Autentifică-te aici.
Autentifică-te acum