Dieser Artikel beschreibt den von JS implementierten Display -Effekt der Folienschaltung. Teilen Sie es für Ihre Referenz wie folgt weiter:
HTML:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> pure JS-Slide-Version </title> <style tytyp = "text/csS">*{{; Polsterung: 0;}#Banner {Breite: 1000px; Text-Align: links; Hintergrund: #ffff; Rand: 0 Auto;}#Banner img {display: block; float: links;}. mainBox {Überlauf: versteckt; Position: relativ;}. FlashBox {Überlauf: versteckt; Position: relativ;}. ImageBox {text-align: rechts; Position: relativ; Z-Index: 999;}. Bitdiv {Anzeige: Inline-Block; Breite: 18px; Höhe: 18px; Margin: 0 10px 10px 0px; Cursor: Pointer; Float: Rechts; background:url(styles/images/ppt_icon2.png);}.curimg{background:url(styles/images/ppt_icon1.png);}</style><script type="text/javascript" src="styles/js/ppt_ban.js"></script></head><body><div id="banner"> <script> var box =new Pptbox (); Box.width = 1000; // width box.height = 226; // Höhenbox.autoplayer = 3; // Autoplay -Intervallzeit // Box.add ({"url": "Bildadresse", "Titel": "Hoomtitel", "href": "Linkadresse"}) box.add ({"url": "styles/bilder/fck_04.jpg", "href": "###", "title": "hoom prompt title 1"}); box.add ({"url": "styles/bilder/fck_04.jpg", "href": "###", "title": "hoom prompt title 1"}); box.add ({"url": "styles/bilder/fck_04.jpg", "href": "###", "title": "suspension prompt title 1"}); box.add ({"url": "styles/bilder/fck_04.jpg", "href": "###", "title": "suspension prompt title 1"}); Box.show (); </script> </div> </body> </html>JS:
Funktion pptbox () {this.uid = pptBoxHelper.getId (); PptboxHelper.instance [this.uid] = this; this ._ $ = function (id) {return document.getElementById (id);}; this.width = 400; // width this.height = 300; // Höhe this.picwidth = 15; // kleine Bildbreite this.picheight = 12; // kleine Bildhöhe this.autoPlayer = 4; // Autoplay -Intervall (Sekunden) this.target = "_blank"; this._box = []; this._curindex = 0;} pptbox.prototype = {_createMainBox: function () {var bashboxwidth = this.width * this._box.length; var html = "<div id = '"+this.uid+"_ mainbox' class = 'mainBox' style = 'width:"+(this.width)+"px; Höhe:"+(thisheight)+"px;'>"; html+= "<div id = '"+this.uid+"_ FlashBox' class = 'flashbox' style = 'width:"+flashBoxwidth+"px; Höhe:"+(this.height)+"px;'> </div>"; html+= "<div id = '"+this.uid+"_ ImageBox' class = 'ImageBox' style = 'width:"+this.width+"px; Höhe:"+(this.picheight)+"px; top:-"+(this.picheight+20)+"px;'> </div>"; html += "</div>"; document.write (html); }, _init: function () {var picstyle = ""; var eventStr = "pptboxHelper.instance ['"+this.uid+"']"; var imageHtml = ""; var flashbox = ""; für (var i = 0; i <this._box.length; i ++) {var parameter = this._box [i]; FlashBox += this.flashhtml (parame.url, this.width, this.height, i); ImageHtml = "<div class = 'bitdiv"+((i == 0)? "curimg": "Defimg")+"' title ="+parame.title+"src = 'bit01.gif'"+picstyle+"Onclick = /"+ Events.s.Clickcpic("+")///". onmouseover =/"+eventStr+". ClearInterval (this._autoPlay); setInterval (Ereignisstrumente, AUTOPLAYER*1000); classId = 'clSID: D27CDB6E-AE6D-11CF-96B8-444553540000' "+" CODEBASE = 'http: //download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,7,0,0,19,0' " Höhe = '"+Höhe+"'> "+" <param name =/"move/" value =/"+url+"/"/>"+"<param name = 'quality' value = 'hoch'/>"+"<param name = 'wmode' value = 'transparent'> PluginSpage = 'http: //www.macromedia.com/go/getflashplayer' "+" type = 'application/x-shockwave-flash' height = '"+height+"'> </embed> "+" </Object>; if (this._box [idx] .Href) {style = "cursor: pointer"} html = "<img src = '"+url+"' style = 'width:"+width+"px; Höhe:"+Höhe+"Px; } return html; }, ändernIndex: function (idx) {var parameter = this._box [idx]; MoveElement (this.uid+"_ FlashBox",-(idx*this.width), 1); var imgs = this ._ $ (this.uid+"_ ImageBox"). getElementsByTagName ("div"); IMGS [this._box.length-1-this._curindex] .classname = "bitdiv Defimg"; imgs [this._box.length-1-idx] .className = "bitdiv curimg"; this._curindex = idx; }, mouseOverpic: function (idx) {this.changeIndex (idx); if (this.autoplay> 0) {ClearInterval (this._autoplay); var eventStr = "pptboxHelper.instance ['"+this.uid+"'] ._ Play ()"; this._autoplay = setInterval (eventSTR, this.autoPlayer*1000); }}, klicken Sie auf die Funktion (idx) {var parameter = this._box [idx]; if (parame.href & ¶Me.href! = "") {window.open (parame.href, this.target); }}, add: function (imgparam) {this._box [this.box.length] = imgparam; }, anzeigen: function () {this._CreateMainBox (); this._init (); if (this.autoPlayer> 0) {var eventStr = "pptboxHelper.instance ['"+this.uid+"'] ._ Play ()"; this._autoplay = setInterval (eventSTR, this.autoPlayer*1000); }}} var pptboxHelper = {count: 0, Instanz: {}, getId: function () {return '_ppt_box-'+(this.count ++); }}; function MoveElement (elementId, final_x, intervall) {if (! document.getElementById) return false; if (! document.getElementById (elementId)) return false; var elem = document.getElementById (elementId); if (Elem.Movement) {Clearimeout (Elem.Movement); } if (! elem.style.left) {Elem.Style.left = "0px"; } var xpos = parseInt (Elem.Style.Left); if (xpos == final_x) {return true; } if (xpos <final_x) {var dist = math.ceil ((final_x - xpos)/5); xpos = xpos + dist; } if (xpos> final_x) {var dist = math.ceil ((xpos - final_x)/5); xpos = xpos - dist; } Elem.Style.left = xpos + "px"; var repep = "moveElement ('"+elementId+"',"+final_x+","+intervall+")"; Elem.Movement = setTimeout (Wiederholung, Intervall);}Die Renderings sind wie folgt:
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm techniques", and "Zusammenfassung der Verwendung von JavaScript -Nutzung der mathematischen Operationen"
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.