Общительный Сервис Lамастера. JS

11/07/2018 19:42

Код скрипта РОТАТОР 1

Образец работы скрипта можно увидеть на странице блога Lамастера.
( № 1)

<HEAD> </HEAD> <body> <center> <A href="javascript:gotoshow()"><IMG style="FILTER: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)" border=0 name=slide></A> <SCRIPT language=JavaScript1.1>  </SCRIPT> <SCRIPT language=JavaScript1.1>  </SCRIPT> </center> </body>

09/07/2018 13:38

Код скрипта РОТАТОР 2

Образец работы скрипта можно увидеть на странице блога Lамастера.
( № 2)

<HEAD> </HEAD> <body> <center> <MARQUEE behavior="scroll" direction="up" height="195" scrollamount="1" scrolldelay="1" onmouseover='this.start()' onmouseout='this.stop()'> <center> <a href="1.jpg"><img src="1.jpg" WIDTH=280 HEIGHT=190 border="0"><br>Привет !</a><br><br> <a href="2.jpg"><img src="2.jpg" WIDTH=200 HEIGHT=190 border="0"><br>---</a><br><br> <a href="3.jpg"><img src="3.jpg" WIDTH=200 HEIGHT=190 border="0"><br>---</a><br><br> <a href="4.jpg"><img src="4.jpg" WIDTH=200 HEIGHT=190 border="0"><br>---</a><br><br> <a href="5.jpg"><img src="5.jpg" WIDTH=200 HEIGHT=190 border="0"><br>---</a><br><br> <a href="6.jpg"><img src="6.jpg" WIDTH=200 HEIGHT=190 border="0"><br>---</a><br><br> <a href="7.jpg"><img src="7.jpg" WIDTH=200 HEIGHT=190 border="0"><br>---</a><br><br> <a href="8.jpg"><img src="8.jpg" WIDTH=200 HEIGHT=190 border="0"><br>---</a><br><br> <a href="9.jpg"><img src="9.jpg" WIDTH=200 HEIGHT=190 border="0"><br>---</a><br><br> <a href="10.jpg"><img src="10.jpg" WIDTH=280 HEIGHT=190 border="0"><br>---</a><br><br> </center> </marquee> </center> </body>

08/07/2018 22:45

Код скрипта РОТАТОР 3

Образец работы скрипта можно увидеть на странице блога Lамастера.
( № 3)

<HEAD> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> </HEAD> <body> <center> <script type="text/javascript"> var trans_width='200px' var trans_height='200px' var pause=3000 // пауза (3000=3 seconds) var degree=10 // скорость анимации var slideshowcontent=new Array() slideshowcontent[0]=["1.jpg", "http://link.ru", "_blank"] slideshowcontent[1]=["2.jpg", "", ""] slideshowcontent[2]=["3.jpg", "", ""] slideshowcontent[3]=["4.jpg", "", ""] slideshowcontent[4]=["5.jpg", "", ""] slideshowcontent[5]=["0.jpg", "", ""] //// далее нельзя редактировать ///////////// var bgcolor='white' var imageholder=new Array() for (i=0;i<slideshowcontent.length;i++){ imageholder[i]=new Image() imageholder[i].src=slideshowcontent[i][0] } var ie4=document.all var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1 if (ie4||dom) document.write('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>') else if (document.layers){ document.write('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>') } var curpos=trans_width*(-1) var curcanvas="canvas0" var curindex=0 var nextindex=1 function getslidehtml(theslide){ var slidehtml="" if (theslide[1]!="") slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">' slidehtml+='<img src="'+theslide[0]+'" border="0">' if (theslide[1]!="") slidehtml+='</a>' return slidehtml } function moveslide(){ if (curpos<0){ curpos=Math.min(curpos+degree,0) tempobj.style.left=curpos+"px" } else{ clearInterval(dropslide) if (crossobj.filters) crossobj.filters.alpha.opacity=100 else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=1 nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML=getslidehtml(slideshowcontent[curindex]) nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0 setTimeout("rotateslide()",pause) } } function rotateslide(){ if (ie4||dom){ resetit(curcanvas) crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ if (crossobj.filters) document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20 else if (crossobj.style.MozOpacity) document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2 var temp='setInterval("moveslide()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else if (document.layers){ crossobj.document.write(getslidehtml(slideshowcontent[curindex])) crossobj.document.close() } curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0 } function jumptoslide(which){ curindex=which rotateslide() } function resetit(what){ curpos=parseInt(trans_width)*(-1) var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) crossobj.style.left=curpos+"px" } function startit(){ crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub if (ie4||dom){ crossobj.innerHTML=getslidehtml(slideshowcontent[curindex]) rotateslide() } else{ document.tickernsmain.visibility='show' curindex++ setInterval("rotateslide()",pause) } } if (window.addEventListener) window.addEventListener("load", startit, false) else if (window.attachEvent) window.attachEvent("onload", startit) else if (ie4||dom||document.layers) window.onload=startit </script> </center> </body>

08/07/2018 19:32

Код скрипта РОТАТОР 4

Образец работы скрипта можно увидеть на странице блога Lамастера.
( № 4)

<HEAD> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> </HEAD> <body onLoad="showimage()"> <center> <script language=Javascript type=text/javascript> var p=6 // максимальное число файлов p var i=1 function next(){ i++ if (i==p+1) i=1 // максимальное число файлов p s="img/"+i+".jpg" // имена файлов (может иметь любое расширение, в том числе .gif, .jpg, .png) document.all.innerframe.src=s } function prev(){ i-- if (i==0) i=p s="img/"+i+".jpg" document.all.innerframe.src=s } function GotoNomber(nomber){ i=nomber s="img/"+nomber+".jpg" document.all.innerframe.src=s } function nombersShow(){ document.all.raw.style.display="" document.all.raw.style.visibility="visible" document.all.nombers.href="javascript:nombersHide()" } function nombersHide(){ document.all.raw.style.display="none" document.all.raw.style.visibility="hidden" document.all.nombers.href="javascript:nombersShow()" } </script> <br /> <table><tr id=raw style="DISPLAY: none; VISIBILITY: hidden"><td><center><font size=2>Номер фото:<strong> <a href="javascript:GotoNomber(1)">1</a>  <a href="javascript:GotoNomber(2)">2</a> <a href="javascript:GotoNomber(3)">3</a> <a href="javascript:GotoNomber(4)">4</a> <a href="javascript:GotoNomber(5)">5</a>  <a href="javascript:GotoNomber(6)">6</a> </strong> </td></tr> <tr><td> <iframe frameBorder="0" height="200" id=innerframe src="img/1.jpg" width="220"></iframe></td> </tr></table> <a href="javascript:prev()">« <img src="img/prev.png" ></a> | <a href="javascript:nombersShow()" id=nombers title="Оглавление"><strong></strong></a> | <a href="javascript:next()"><img src="img/next.png" > »</a> </center> </body>

08/07/2018 18:15

Код скрипта РОТАТОР 5

Образец работы скрипта можно увидеть на странице блога Lамастера.
( № 5)

<HEAD> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> </HEAD> <body onLoad="Rotate('linkpic')"> <center> <A HREF="javascript:Openner(a)"><IMG NAME="linkpic" BORDER=1 src="00.jpg" ></a> <script language="javascript">  </script> </center> </body>

07/07/2018 19:42

Код скрипта РОТАТОР 6

Образец работы скрипта можно увидеть на странице блога Lамастера.
( № 6)

<HEAD> </HEAD> <body onLoad="showimage()"> <center> <script language="JavaScript1.1"> var photos=new Array() var text=new Array() var which=0 var what=0 //Change the below variables to reference your own images. You may have as many images in the slider as you wish photos[0]="1.jpg" photos[1]="2.jpg" photos[2]="3.jpg" photos[3]="4.jpg" photos[4]="5.jpg" photos[5]="6.jpg" //change coresponding description text[0]=" Привет..." text[1]="Здесь просто текст!." text[2]="Здесь просто текст!." text[3]="Здесь просто текст!." text[4]="Здесь просто текст!." text[5]="Здесь просто текст!." window.onload=new Function("document.rotater.description.value=text[0]") function backward(){ if (which>0){ window.status='' which-- document.images.photoslider.src=photos[which]; what-- document.rotater.description.value=text[what]; } } function forward(){ if (which<photos.length-1){ which++ document.images.photoslider.src=photos[which] what++ document.rotater.description.value=text[what]; } else window.status='End of gallery' } function type() { alert("This textbox will only display default comments") } </script> <input type=text name="description" style="width:200px" size=50> <p><center> <a href="#" name="B2" onclick="backward();return false">« <img src="prev.png" ></a> <a href="#" onClick="which=1;what=1;backward();return false"><small>ПОВТОР</small></a> <a href="#" name="B1" onclick="forward();return false"><img src="next.png" > »</a> <br> </center></p> </center> </body>

07/07/2018 18:22

Код скрипта РОТАТОР 7

Образец работы скрипта можно увидеть на странице блога Lамастера.
( № 7)

<HEAD> <SCRIPT LANGUAGE="JavaScript">    </script> </HEAD> <body> <center> <a href="#" onmouseover="fade_in()" onmouseout="fade_out()"> <br> <img name="fade-pic" height="220" width="220" border="0" src="img/1.jpg"> <br></a> </center> </body>

07/01/2020 18:33

Код скрипта РОТАТОР 8

Образец работы скрипта можно увидеть на странице блога Lамастера.
( № 8)

<HEAD> <style> /* KENBURNS STYLES -------------------------------------------------------*/ /* kenburns_slideshow is the wrapper div. Our list of Images scrolls inside of this frame To compute the minimum frame size needed:; image width * scale image height * scale if the image size is smaller than the frame size, gaps may appear. If image sizes are exactly the same, the images will fade over one another and not move. */ #kenburns-slideshow { position: relative; width: 220px; height: 160px; border: 1px solid darkred; box-sizing: border-box; z-index: 1; overflow: hidden; } /* The plugin wraps the images in div.kb-slide. This allows me to run separate animations simultaneously. */ .kb-slide{ position: absolute; z-index: 1; opacity: 0; } /* I used position relative here because IE8 didnt like the opacity when the img was set to absolute* translate3d(000) kicks them into HW acceleration, and backface-visibility gives some performance boosts.*/ .kb-slide img{ position: relative; -webkit-transform: translate3d(0,0,0) -moz-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } /* If the script encounters an image that hasnt loaded, it pops up a little loading wheel. I used a little CSS3 but you could also use a gif to better handle ie8*/ .loader { width:32px; height:32px; top:6px; left:550px; border:5px solid rgba(128,128,128,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px dotted rgba(0,0,0,0); border-radius:32px; -moz-animation:spin .7s infinite linear; -webkit-animation:spin .7s infinite linear; } @-moz-keyframes spin { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); } } @-moz-keyframes spinoff { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(-360deg); } } @-webkit-keyframes spin { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } } @-webkit-keyframes spinoff { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(-360deg); } } #status{ color:#333; font-size: 12px; float:right; clear: right; } /* #### CSS that's applied when the viewing area's height is 600px or less #### */ @media screen and (max-width: 600px){ #kenburns-slideshow{ width: 100%; height: 200px; border: none; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> /* * */ ;(function ( $, window, document, undefined ) { /* Plugin Parameters ------------------------------------------------------------------------------------------------- */ var pluginName = 'Kenburns', defaults = { images:[], duration:400, fadeSpeed:500, scale:1, ease3d:'cubic-bezier(.81, 0, .26, 1)', onLoadingComplete:function(){}, onSlideComplete:function(){}, onListComplete:function(){}, getSlideIndex:function(){ return currentSlide; } }; var imagesObj = {}; var currentSlide = 0; function Plugin( element, options ) { this.element = element; this.options = $.extend( {}, defaults, options) ; this._defaults = defaults; this._name = pluginName; this.maxSlides = this.options.images.length; this.init(); } /* 1. Initialization ------------------------------------------------------------------------------------------------- */ /** * Init * Initial setup - dermines width, height, and adds the loading icon. */ Plugin.prototype.init = function () { var list = this.options.images; var that = this; this.width = $(this.element).width(); this.height = $(this.element).height(); this.has3d = has3DTransforms(); for (i in list) { imagesObj["image"+i] = {}; imagesObj["image"+i].loaded = false; this.attachImage(list[i], "image"+i , i); } var loader = $('<div/>'); loader.addClass('loader'); loader.css({'position':'absolute','z-index':10000}); $(this.element).prepend(loader); $(this.element).on('click', function(e){ if (that.options.urls && that.options.urls[currentSlide]){ window.open(that.options.urls[currentSlide]) } }) }; /* 2. Loading and Setup ------------------------------------------------------------------------------------------------- */ /** * Attach image */ Plugin.prototype.attachImage = function(url,alt_text,index) { var that = this; //put the image in an empty div to separate the animation effects of fading and moving var wrapper = $('<div/>'); wrapper.attr('class','kb-slide'); wrapper.css({'opacity':0}); var img = $("<img />"); img.attr('src', url); img.attr('alt', alt_text); wrapper.html(img); //First check if the browser supports 3D transitions, initialize the CSS accordingly if(this.has3d) { img.css({'-webkit-transform-origin':'left top'}); img.css({'-moz-transform-origin':'left top'}); img.css({'-webkit-transform':'scale('+that.options.scale+') translate3d(0,0,0)'}); img.css({'-moz-transform':'scale('+that.options.scale+') translate3d(0,0,0)'}); } //Switch the transition to the 3d version if it does exist this.doTransition = (this.has3d)?this.transition3d:this.transition; //set up the image OBJ parameters - used to track loading and initial dimensions img.on('load', function() { imagesObj["image"+index].element = this; imagesObj["image"+index].loaded = true; imagesObj["image"+index].width = $(this).width(); imagesObj["image"+index].width = $(this).height(); that.insertAt(index,wrapper); that.resume(index); }); } /** * Resume * Resume will continue the transition after the stalled image loads * it also fires the complete action when the series of images finishes loading */ Plugin.prototype.resume = function(index){ //first image has loaded if(index == 0) { this.startTransition(0); $(this.element).find('.loader').hide(); } //if the next image hasnt loaded yet, but the transition has started, // this will match the image index to the image holding the transition. // it will then resume the transition. if(index == this.holdup) { $('#status').html(""); $(this.element).find('.loader').hide(); this.startTransition(this.holdup); } //if the last image in the set has loaded, add the images in order if(this.checkLoadProgress() == true) { //reset the opacities and z indexes except the last and first images $(this.element).find('.stalled').each(function(){ $(this).css({'opacity':1,'z-index':1}); $(this).removeClass('stalled'); }); //fire the complete thing this.options.onLoadingComplete(); } } //if any of the slides are not loaded, the set has not finished loading. Plugin.prototype.checkLoadProgress = function() { var imagesLoaded = true; for(i=0;i<this.maxSlides;i++){ if (imagesObj["image"+i].loaded == false){ imagesLoaded = false; } } return imagesLoaded; } /** * Wait * Stops the transition interval, shows the loader and * applies the stalled class to the visible image. */ Plugin.prototype.wait = function() { clearInterval(this.interval); $('#status').html("loading"); $(this.element).find('.loader').show(); var image = imagesObj["image"+(currentSlide-1)].element; $(image).parent().stop(true,true); $(image).parent().addClass('stalled'); } /* 3. Transitions and Movement ------------------------------------------------------------------------------------------------- */ /** * startTransition * Begins the Gallery Transition and tracks the current slide * Also manages loading - if the interval encounters a slide * that has not loaded, the transition pauses. */ Plugin.prototype.startTransition = function(start_index) { var that = this; currentSlide = start_index; //current slide that.element.style.cursor = (that.options.urls && that.options.urls[currentSlide])? 'pointer' : 'auto' that.doTransition(); this.interval = setInterval(function(){ //Advance the current slide if(currentSlide < that.maxSlides-1){ currentSlide++; }else { currentSlide = 0; } that.element.style.cursor = (that.options.urls && that.options.urls[currentSlide])? 'pointer' : 'auto' //Check if the next slide is loaded. If not, wait. if(imagesObj["image"+currentSlide].loaded == false){ that.holdup = currentSlide; that.wait(); //if the next slide is loaded, go ahead and do the transition. }else { that.doTransition(); } },this.options.duration); } /** * chooseCorner * This function chooses a random start corner and a random end corner * that is different from the start. This gives a random direction effect * it returns coordinates used by the transition functions. */ Plugin.prototype.chooseCorner = function() { var scale = this.options.scale; var image = imagesObj["image"+currentSlide].element; var ratio = image.height/image.width; var sw = Math.floor($(this.element).width()*(1/scale)); var sh = Math.floor($(this.element).width()*ratio*(1/scale)); $(image).width(sw); $(image).height(sh); var w = $(this.element).width(); var h = $(this.element).height(); //console.log(sw+ ", " + this.width); var corners = [ {x:0,y:0}, {x:1,y:0}, {x:0,y:1}, {x:1,y:1} ]; //Pick the first corner. Remove it from the array var choice = Math.floor(Math.random()*4); var start = corners[choice]; //Pick the second corner from the subset corners.splice(choice,1); var end = corners[Math.floor(Math.random()*3)]; //build the new coordinates from the chosen coordinates var coordinates = { startX: start.x * (w - sw*scale) , startY: start.y * (h - sh*scale), endX: end.x * (w - sw), endY: end.y * (h - sh) } // // console.log(coordinates.startX + " , "+coordinates.startY + " , " +coordinates.endX + " , " +coordinates.endY); return coordinates; } /** * Transiton3D * Transition3d Function works by setting the webkit and moz translate3d properties. These * are hardware accellerated and give a very smooth animation. Since only one animation * can be applied at a time, I wrapped the images in a div. The shorter fade is applied to * the parent, while the translation and scaling is applied to the image. */ Plugin.prototype.transition3d = function () { var that = this; var scale = this.options.scale; var image = imagesObj["image"+currentSlide].element; var position = this.chooseCorner(); //First clear any existing transition $(image).css({'-webkit-transition':'none'}); $(image).css({'-moz-transition':'none'}); $(image).css({'-webkit-transform':'scale('+scale+') translate3d('+position.startX+'px,'+position.startY+'px,0)'}); $(image).css({'-moz-transform':'scale('+scale+') translate3d('+position.startX+'px,'+position.startY+'px,0)'}); //Set the wrapper to fully transparent and start it's animation $(image).parent().css({'opacity':0,'z-index':'3'}); $(image).parent().animate({'opacity':1},that.options.fadeSpeed); //Add the transition back in $(image).css({'-webkit-transition':'-webkit-transform '+(that.options.duration+that.options.fadeSpeed)+'ms '+that.options.ease3d}); $(image).css({'-moz-transition':'-moz-transform '+(that.options.duration+that.options.fadeSpeed)+'ms '+that.options.ease3d}); //set the end position and scale, which fires the transition $(image).css({'-webkit-transform':'scale(1) translate3d('+position.endX+'px,'+position.endY+'px,0)'}); $(image).css({'-moz-transform':'scale(1) translate3d('+position.endX+'px,'+position.endY+'px,0)'}); this.transitionOut(); this.options.onSlideComplete(); } /** * Transition * The regular JQuery animation function. Sets the currentSlide initial scale and position to * the value from chooseCorner before triggering the animation. It starts the image moving to * the new position, starts the fade on the wrapper, and delays the fade out animation. Adding * fadeSpeed to duration gave me a nice crossfade so the image continues to move as it fades out * rather than just stopping. */ Plugin.prototype.transition = function() { var that = this; var scale = this.options.scale; var image = imagesObj["image"+currentSlide].element; var sw = $(image).width(); var sh = $(image).height(); var position = this.chooseCorner(); $(image).css({'left':position.startX,'top':position.startY,'width':sw*(scale),'height':sh*(scale)}); $(image).animate({'left':position.endX,'top':position.endY,'width':sw,'height':sh}, that.options.duration + that.options.fadeSpeed); $(image).parent().css({'opacity':0,'z-index':3}); $(image).parent().animate({'opacity':1},that.options.fadeSpeed); this.transitionOut(); this.options.onSlideComplete(); } Plugin.prototype.transitionOut = function() { var that = this; var image = imagesObj["image"+currentSlide].element; $(image).parent().delay(that.options.duration).animate({'opacity':0},that.options.fadeSpeed, function(){ $(this).css({'z-index':1}); }); } /* 4. Utility Functions ------------------------------------------------------------------------------------------------- */ /** * has3DTransforms * Tests the browser to determine support for Webkit and Moz Transforms * Creates an element, translates the element, and tests the values. If the * values return true, the browser supports 3D transformations. */ function has3DTransforms() { var el = document.createElement('p'), has3d, transforms = { 'WebkitTransform':'-webkit-transform', 'MozTransform':'-moz-transform', }; document.body.insertBefore(el, null); for (var t in transforms) { if (el.style[t] !== undefined) { el.style[t] = "translate3d(1px,1px,1px)"; has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]); } } document.body.removeChild(el); return (has3d !== undefined && has3d.length > 0 && has3d !== "none"); } /** * insertAt * Utility function that inserts objects at a specific index * Used to maintain the order of images as they are loaded and * added to the DOM */ Plugin.prototype.insertAt = function (index, element) { var lastIndex = $(this.element).children().length; if (index < 0) { index = Math.max(0, lastIndex + 1 + index); } var imgWrapper = $(this.element).append(element); if (index < lastIndex) { $(this.element).children().eq(index).before($(this.element).children().last()); } } $.fn[pluginName] = function ( options ) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Plugin( this, options )); } }); } })( jQuery, window, document ); </script> <script type="text/javascript"> var titles = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]; $(document).ready(function() { $('#kenburns-slideshow').Kenburns({ images: [ "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg" ], urls: [ "", "http://javascriptkit.com", "http://dynamicdrive.com", "", "http://cssdrive.com" ], scale:0.75, duration:5000, fadeSpeed:1000, ease3d:'cubic-bezier(0.445, 0.050, 0.550, 0.950)', onSlideComplete: function(){ $('#slide-title').html(titles[this.getSlideIndex()]); }, onLoadingComplete: function(){ //$('#status').html("Loading Complete"); } }); }); </script> </HEAD> <body> <center> <br> <div id="kenburns-slideshow"></div> <div id="slide-title"></div> </center> </body>

07/01/2020 21:27

Код скрипта РОТАТОР 9

Образец работы скрипта можно увидеть на странице блога Lамастера.
( № 9)

<HEAD> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type='text/javascript' src='sl/js/modernizr.custom.13303.js'></script> <script type='text/javascript' src='sl/js/jquery.shockwave.js'></script> <script type='text/javascript' src='sl/js/jquery.shockwave.effects.js'></script> <script> var imagesDataArray = [ //For demos, define a single set of images to be used in all of the demos below { src: '1.jpg', url: '#', target: '_blank', // default is _self, which opens in the same window (_blank in new window) description: '1.' }, { src: '2.jpg', url: '#', description: '2.' }, { src: '3.jpg', description: '3.', }, { src: '4.jpg', url: '#', description: '4.' }, { src: '5.jpg', url: '#', description: '5.' }, { src: '6.jpg', url: '#', description: '6.' }, { src: '7.jpg', url: '#', description: '7.' }, { src: '8.jpg', url: '#', description: '8.' }, { src: '9.jpg', description: '9.', } ]; jQuery(function(){ $('#unhookshow').shockwave(imagesDataArray, { 'slider-type': 'UnhookedSlider', 'random-time-to-unhook': 1500, // in ms 'free-fall-time': 150, // ms 'autostart-slideshow': true, 'maximum-slideshow-cycles': 2, 'slideshow-delay': 2000, 'duration': 100, 'tiles-in-x': 5, 'tiles-in-y': 5, 'show-permanent-description': false, 'standard-control-buttons-area': $('#unhookbuttons'), 'viewport-dimension': {width: 250, height: 262} }); }) </script> </HEAD> <body> <center> <br> <div id='unhookshow'></div> <div id='unhookbuttons'></div> <br> </center> </body>

07/01/2020 22:22

Код скрипта РОТАТОР 10

Образец работы скрипта можно увидеть на странице блога Lамастера.
( № 10)

<HEAD> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type='text/javascript' src='sl/js/modernizr.custom.13303.js'></script> <script type='text/javascript' src='sl/js/jquery.shockwave.js'></script> <script type='text/javascript' src='sl/js/jquery.shockwave.effects.js'></script> <script> var imagesDataArray = [ //For demos, define a single set of images to be used in all of the demos below { src: '1.jpg', url: '#', target: '_blank', // default is _self, which opens in the same window (_blank in new window) description: '1.' }, { src: '2.jpg', url: '#', description: '2.' }, { src: '3.jpg', description: '3.', }, { src: '4.jpg', url: '#', description: '4.' }, { src: '5.jpg', url: '#', description: '5.' }, { src: '6.jpg', url: '#', description: '6.' }, { src: '7.jpg', url: '#', description: '7.' }, { src: '8.jpg', url: '#', description: '8.' }, { src: '9.jpg', description: '9.', } ]; jQuery(function(){ $('#flipedge').shockwave(imagesDataArray, { 'slider-type': 'FlipEdgeSlider', 'tiles-in-x': 7, 'tiles-in-y': 1, 'fixed-rotation-axis': [1, 0, 0], 'controller-default-wave-origin': ['50%', '50%'], 'autostart-slideshow': true }); }) </script> </HEAD> <body> <center> <br> <div id='flipedge'></div> <br> </center> </body>

07/07/2018 16:33

Код скрипта РОТАТОР 0

Образец работы скрипта можно увидеть на странице блога Lамастера.
( № 0)

<HEAD> <style> /* carddeckslideshow.css * default class to style each Card Deck Slideshow in general. Change name as desired. */ div.stackcontainer{ width: 200px; /* default width */ height: 150px; /* default height */ border: 1px solid gray; overflow: hidden; -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } /* Do NOT change ".inner" class name itself, as it's used by script to identify each content */ div.stackcontainer > div.inner{ background: #222222; /* default background color of each slide */ overflow: hidden; /* keep this property */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Add padding to child DIV of each ".inner" container */ div.stackcontainer > div.inner > div{ padding: 8px; } /* hinge class that gets added to unveiling DIV (then removed) */ div.stackcontainer > div.hinge{ box-shadow: 0 0 10px gray; } /* CSS3 keyframes animation for unhinge effect */ @-moz-keyframes hingetopleft { 0% { -moz-transform: rotate(0);} 20% { -moz-transform: rotate(100deg);} 40% { -moz-transform: rotate(65deg);} 60% { -moz-transform: rotate(90deg);} 80% { -moz-transform: rotate(80deg) translateY(0);} 95% { -moz-transform: rotate (90deg) translate(120%, 0); opacity: 1;} 100% { -moz-transform: rotate(91deg) translate(150%, 0); opacity: 0; } } @-webkit-keyframes hingetopleft { 0% { -webkit-transform: rotate(0);} 20% { -webkit-transform: rotate(100deg);} 40% { -webkit-transform: rotate(65deg);} 60% { -webkit-transform: rotate(90deg);} 80% { -webkit-transform: rotate(80deg) translateY(0);} 95% { -webkit-transform: rotate (90deg) translate(120%, 0); opacity: 1;} 100% { -webkit-transform: rotate(91deg) translate(150%, 0); opacity: 0; } } @keyframes hingetopleft { 0% { transform: rotate(0);} 20% { transform: rotate(100deg);} 40% { transform: rotate(65deg);} 60% { transform: rotate(90deg);} 80% { transform: rotate(80deg) translateY(0);} 95% { transform: rotate (90deg) translate(120%, 0); opacity: 1;} 100% { transform: rotate(91deg) translate(150%, 0); opacity: 0; } } @-moz-keyframes hingetopright { 0% { -moz-transform: rotate(0);} 20% { -moz-transform: rotate(-100deg);} 40% { -moz-transform: rotate(-65deg);} 60% { -moz-transform: rotate(-90deg);} 80% { -moz-transform: rotate(-80deg) translateY(0);} 95% { -moz-transform: rotate (-90deg) translate(-120%, 0); opacity: 1;} 100% { -moz-transform: rotate(-91deg) translate(-150%, 0); opacity: 0; } } @-webkit-keyframes hingetopright { 0% { -webkit-transform: rotate(0);} 20% { -webkit-transform: rotate(-100deg);} 40% { -webkit-transform: rotate(-65deg);} 60% { -webkit-transform: rotate(-90deg);} 80% { -webkit-transform: rotate(-80deg) translateY(0);} 95% { -webkit-transform: rotate (-90deg) translate(-120%, 0); opacity: 1;} 100% { -webkit-transform: rotate(-91deg) translate(-150%, 0); opacity: 0; } } @keyframes hingetopright { 0% { transform: rotate(0);} 20% { transform: rotate(-100deg);} 40% { transform: rotate(-65deg);} 60% { transform: rotate(-90deg);} 80% { transform: rotate(-80deg) translateY(0);} 95% { transform: rotate (-90deg) translate(-120%, 0); opacity: 1;} 100% { transform: rotate(-91deg) translate(-150%, 0); opacity: 0; } } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <style> .stackcontainer{ margin: 10px 0 10px 0; } #demo1{ width: 250px; height: 200px; margin-left: 100px; } #demo2{ width: 350px; height: 200px; } #demo3 > div.inner{ background: lightyellow; } #demo1 h4, #demo3 h4{ margin: 0; } </style> <script> /* carddeckslideshow.js * Card Deck Slideshow (c) Dynamic Drive (www.dynamicdrive.com) * Last updated: May 2nd, 2013 * Visit http://www.dynamicdrive.com/ for this script and 100s more. * Requires: jQuery 1.7 or higher */ var carddeckslideshow = (function($){ var defaults = { hingepoint: 'top left', fxduration: 1200, source: 'inline', activeclass: 'hinge', autoplay: false, cycles: 2, persist: true, pause: 3000, onunhinge: function(curindex, previndex){} } var transform3d = typeof $(document.documentElement).css('perspective') != "undefined" // test for support for 3D transform function getCookie(Name){ var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null } function setCookie(name, value){ document.cookie = name+"="+value } function carddeckslideshow(options){ this.setting = $.extend({}, defaults, options) this.setting.pause += this.setting.fxduration var setting = this.setting this.curindex = ( setting.persist && getCookie(setting.id + '_lastviewedpanel') ) ? parseInt(getCookie(setting.id + '_lastviewedpanel')) : 0 this.contentzindex = 1000 this.playerstate = {autoplay: setting.autoplay, isautoplaying: false, frames: {cur:0, limit:0}, cycles: setting.cycles} this.animationstr = ((setting.hingepoint == 'top left')? 'hingetopleft' : 'hingetopright') + ' ' + setting.fxduration + 'ms ease-in-out forwards' var slideshow = this jQuery(function(){ slideshow.$container = $('#' + setting.id).css({position: 'relative', overflow: 'visible'}) if (setting.source != "inline") slideshow.getajaxcontent(setting.source) else slideshow.init() }) } carddeckslideshow.prototype = { navigate:function(action, stopautoplay){ function stepit(somevar, action){ switch (action){ case 'next': return (somevar < $contents.length-1)? somevar + 1 : 0 break case 'prev': return (somevar > 0)? somevar - 1 : $contents.length-1 break default: return Math.min( parseInt(action), $contents.length-1 ) } } var slideshow = this var setting = this.setting var curindex = this.curindex var $contents = this.$contents var animationstr = this.animationstr var contentzindex = this.contentzindex var nextindex = stepit(curindex, action) this.previndex = curindex if (stopautoplay !== false){ this.pause() this.playerstate.isautoplaying = false } $contents.eq(curindex).css({animation: animationstr, zIndex: ++contentzindex}).addClass(setting.activeclass) $contents.eq(nextindex).css({animation: '', zIndex: contentzindex - 1}).removeClass(setting.activeclass) if (!transform3d){ $contents.eq(curindex).css({opacity: 1}).animate({top: '150%', opacity: 0.4}, setting.duration, function(){ $(this).css({zIndex: -1, top: 0, animation: '', opacity: 1}).removeClass(setting.activeclass) setting.onunhinge.call(slideshow, slideshow.curindex, slideshow.previndex) }) } this.curindex = nextindex this.contentzindex = contentzindex }, // end navigate() play:function(){ // private function var slideshow = this this.playerstate.isautoplaying = true this.playtimer = setInterval(function(){ slideshow.navigate('next', false) if ( slideshow.playerstate.cycles !=0 && ++slideshow.playerstate.frames.cur >= slideshow.playerstate.frames.limit ){ // if player is in auto playing mode and has reached end of cycle slideshow.pause() slideshow.playerstate.isautoplaying = false } }, this.setting.pause) }, pause:function(){ // private function clearInterval(this.playtimer) }, userplay:function(){ clearTimeout(this.playtimer) this.playerstate.cycles = 0 this.play() }, userpause:function(){ this.playerstate.isautoplaying = false this.pause() }, getajaxcontent:function(url){ var slideshow = this if (this.$contents && this.$contents.length > 0){ this.$contents.remove() } this.$container.html('<div style="font-weight:bold; margin: 20px 10px">Fetching Panels...</div>') $.ajax({ url: url, dataType: 'html', error:function(ajaxrequest){ slideshow.$container.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText) }, success:function(content){ slideshow.$container.html(content) slideshow.init() } }) }, init:function(){ var slideshow = this var setting = this.setting var $container = this.$container .off('mouseenter mouseleave') .on('mouseenter', function(){ slideshow.pause() }) .on('mouseleave', function(){ if (slideshow.playerstate.isautoplaying){ slideshow.play() } }) var $contents = $container.find('>div.inner') .css({transformOrigin: setting.hingepoint, position:'absolute', width:'100%', height:'100%', left:0, top:0}) this.curindex = Math.min(this.curindex, $contents.length-1) this.previndex = this.curindex $contents.eq(this.curindex) .css({zIndex: ++this.contentzindex}) $contents.off('animationend').on('animationend', function(){ $(this).css({zIndex: -1, animation: ''}).removeClass(setting.activeclass) setting.onunhinge.call(slideshow, slideshow.curindex, slideshow.previndex) }) this.$contents = $contents if (slideshow.playerstate.autoplay && setting.cycles > 0){ this.playerstate.cycles = setting.cycles this.playerstate.frames.cur = 0 this.playerstate.frames.limit = this.$contents.length * slideshow.playerstate.cycles } setting.onunhinge.call(slideshow, slideshow.curindex, slideshow.previndex) if (slideshow.playerstate.autoplay === true){ clearInterval(this.playtimer) this.play() } $(window).off('unload.' + setting.id).on('unload.' + setting.id, function(){ if (setting.persist) setCookie(setting.id + '_lastviewedpanel', slideshow.curindex) slideshow.$contents.remove() }) } } return carddeckslideshow }) (jQuery) </script> <script> var demo1 = new carddeckslideshow({ id: 'demo1', autoplay: true, cycles: 2, persist: false }) var demo2 = new carddeckslideshow({ id: 'demo2', hingepoint: 'top right', fxduration: 1000 }) var demo3 = new carddeckslideshow({ id: 'demo3', hingepoint: '50% 60%', fxduration: 2000, pause: 1000 }) </script> </HEAD> <body> <center> <div id="demo3" class="stackcontainer"> <div class="inner"> <img src="1.jpg" alt="-" title="di" width="200" height="150" border="0" > </div> <div class="inner"> <img src="2.jpg" alt="-" title="di" width="200" height="150" border="0" > </div> <div class="inner"> <img src="3.jpg" alt="-" title="di" width="200" height="150" border="0" > </div> <div class="inner"> <img src="4.jpg" alt="-" title="di" width="200" height="150" border="0" > </div> <div class="inner"> <img src="5.jpg" alt="-" title="di" width="200" height="150" border="0" > </div> <div class="inner"> <img src="6.jpg" alt="-" title="di" width="200" height="150" border="0" > </div> </div> <div style="margin-top:1em"> <a href="javascript: demo3.navigate('prev')"><img src="prev.png" alt="-" title="prev" width="20" height="20" border="0" /></a> | <a href="javascript: demo3.navigate('next')"><img src="next.png" alt="-" title="next" width="20" height="20" border="0" /></a> | <a href="javascript: demo3.userplay()"><img src="pl.png" alt="-" title="play" width="20" height="20" border="0" /></a> | <a href="javascript: demo3.userpause()"><img src="close.png" alt="-" title="stop" width="20" height="20" border="0" /></a> </div> </center> </body>

Дата: /

Открытый КОД: