Dhtml - Zoom e Sipario

Zoom e Sipario

Il presente Dynamic Html realizza un effetto molto originale: la pagina su cui si produce la demo risulta completamente nera, e l'unico "spiraglio" che permette di visualizzare il contenuto e' una sorta di lente. E' possibile spostare tale lente sullo schermo e cliccare su un punto qualsiasi della schermo per rendere visibile tutta la pagina.

Introdurre il codice sottostante in una parte qualsiasi della vostra pagina, salvarla insieme a questa immagine nella stessa cartella di destinazione.

il codice da inserire nella tua pagina

<style> TD{font-family:arial,helvetica; font-size:10pt} BODY{background-color:black} A{color:Navy; text-decoration:none} A:hover{color:red} A:visited:{color:#808080} #divExCont{position:absolute; left:-1; top:-1; clip:rect(0,0,0,0); layer-background-color:white; background-color:white} #divCircle{position:absolute; z-index:500; visibility:hidden; width:200} </style> <script> /******************************************************************************** Copyright (C) 1999 Thomas Brattli This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! ********************************************************************************/ //Easy browsercheck. var n = (document.layers) ? 1:0; var ie = (document.all) ? 1:0; /****************************************************************************** Making the clipobject part ******************************************************************************/ function makeObj(obj,nest,x,y){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style') this.clipIt=b_clipIt; this.clip=b_clip; this.clipTo=b_clipTo; this.obj = obj + "Object"; eval(this.obj + "=this") return this } //clip part function b_clipTo(t,r,b,l){ if(n){this.css.clip.top=t;this.css.clip.right=r;this.css.clip.bottom=b;this.css.clip.left=l }else{ this.css.clip="rect("+t+","+r+","+b+","+l+")"; } } function b_clipIt(tstop,rstop,bstop,lstop,step,fn){ if(!fn) fn=null var clipval=new Array() if(ie) { clipval=this.css.clip clipval=clipval.slice(5,clipval.length-1); clipval=clipval.split(' ') for(var i=0;i<4;i++){clipval[i]=parseInt(clipval[i])} }else{ clipval[0]=this.css.clip.top clipval[1]=this.css.clip.right clipval[2]=this.css.clip.bottom clipval[3]=this.css.clip.left } totantstep=Math.max(Math.max(Math.abs((tstop-clipval[0])/step),Math.abs((rstop-clipval[1])/step)), Math.max(Math.abs((bstop-clipval[2])/step),Math.abs((lstop-clipval[3])/step))) if(!this.clipactive) this.clip(clipval[0],clipval[1],clipval[2],clipval[3],(tstop-clipval[0])/totantstep, (rstop-clipval[1])/totantstep,(bstop-clipval[2])/totantstep, (lstop-clipval[3])/totantstep,totantstep,0, fn) } function b_clip(tcurr,rcurr,bcurr,lcurr,tperstep,rperstep,bperstep,lperstep,totantstep,antstep, fn){ tcurr=tcurr+tperstep; rcurr=rcurr+rperstep bcurr=bcurr+bperstep; lcurr=lcurr+lperstep this.clipTo(tcurr,rcurr,bcurr,lcurr) if(antstep<totantstep){ this.clipactive=true antstep++ setTimeout(this.obj+".clip("+tcurr+","+rcurr+","+bcurr+","+lcurr+","+tperstep+"," +rperstep+","+bperstep+","+lperstep+","+totantstep+","+antstep+",'"+fn+"')",50) }else{ this.clipactive=false eval(fn) } } /****************************************************************************** Initiating the page and the clip objects. ******************************************************************************/ function spotInit(){ pageWidth=(n)?innerWidth:document.body.offsetWidth; pageHeight=(n)?innerHeight:document.body.offsetHeight; oExCont=new makeObj('divExCont') oExCont.clipTo(0,0,0,0) if(ie){oExCont.css.width=pageWidth+10;oExCont.css.height=pageHeight+10} oCircle=new makeObj('divCircle','divExCont') oCircle.css.visibility="visible" if(n)document.captureEvents(Event.MOUSEMOVE) document.onmousemove=moveCircle; } function moveCircle(e){ x=(n)?e.pageX:event.x;y=(n)?e.pageY:event.y oExCont.clipTo(y-100,x+100,y+100,x-100) oCircle.css.left=x-100;oCircle.css.top=y-100 } //This is being called when someone clicks the circle. function showCont(){ document.onmousemove=null oCircle.css.visibility="hidden" oExCont.clipIt(-20,pageWidth+20,pageHeight+20,-20,20) } onload=spotInit; </script> </HEAD> <BODY bgcolor="black">  <script type="text/javascript" src="https://i5.plug.it/cmp/iub_conf_libero.js"></script> <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub-v2.js"></script> <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>   <script src='https://i5.plug.it/cmp/qciol.min.js' async="true"></script>  <script src="//barra-spazio.libero.it/x/js/barra_n04_siti.js?ver=1" type="text/javascript" language="Javascript"></script> <script language="Javascript" type="text/javascript" src="//digistatic.libero.it/css/header_8_3_04/js/hf.js"></script> <script language="JavaScript" type="text/javascript" src="//digistatic.libero.it/css/header_8_3_04/js/clickserver.js"></script> <script language="Javascript" type="text/javascript"> Libero.Stash.HF = { version: '8.3.04', cksrv: { a: 'HF8.3.04', b: 'digilander' } }; </script>   <style> #lh_header #lh_area02a{ position:relative; overflow: visible; height: 30px; } #lh_header #lh_area02b{ z-index: -1; } #lh_header #lh_area02a .lh_pos { position: absolute; margin-bottom: 0; } #lh_header #lh_area02a .lh_on { } #lh_header .lh_finput_area input { height: 27px; padding-top: 0; padding-bottom: 0; line-height: 27px !important; font-size: 15px !important; } #lh_altro{ position: relative !important; } #lh_header_top .lh_popup { } #lf_footer .lf_finput_area input { font-size: 12px !important; line-height: 25px !important; vertical-align: middle; padding: 0 !important; margin: 0 !important; } </style>   <style> #l_header_topbar,#l_header_fixed_topbar_placeholder{height:98px} </style>  <div id="l_header_fixed_topbar_placeholder"></div> <script language="javascript" type="text/javascript">  </script> <script language="javascript" type="text/javascript">  </script>   <link rel="preconnect" href="https://tags.crwdcntrl.net"> <link rel="preconnect" href="https://bcp.crwdcntrl.net"> <link rel="dns-prefetch" href="https://tags.crwdcntrl.net"> <link rel="dns-prefetch" href="https://bcp.crwdcntrl.net"> <script type='text/javascript' src='https://www.iolam.it/js/iam2.0.js?ns=libero/web/community/siti/1.2' async></script>  <div id="ad72890top" align="center"></div>  <div id="divExCont"> <div id="divCircle"> <a href="#" onclick="showCont(); if(ie)this.blur()"><img src="black_circle.gif" width=234 height=241 border="0"></a> </div> Clicca su qualsiasi punto della pagina per allargare lo schermo </div>  <div id="ad72890bottom" align="center"></div>  <SCRIPT LANGUAGE="Javascript">  </SCRIPT> <SCRIPT LANGUAGE="Javascript" SRC="http://digilander.libero.it/_ad/digi_ad_13.js"> </SCRIPT>  <script> if(window.location === window.parent.location){ // Static Queue Snippet ! function(t, n) { t[n] = t[n] || { nlsQ: function(e, o, c, r, s, i) { return s = t.document, r = s.createElement("script"), r.async = 1, r.src = ("http:" === t.location.protocol ? "http:" : "https:") + "//cdn-gl.imrworldwide.com/conf/" + e + ".js#name=" + o + "&ns=" + n, i = s.getElementsByTagName("script")[0], i.parentNode.insertBefore(r, i), t[n][o] = t[n][o] || { g: c || {}, ggPM: function(e, c, r, s, i) { (t[n][o].q = t[n][o].q || []).push([e, c, r, s, i]) } }, t[n][o]}}} (window, "NOLBUNDLE"); // SDK Initialization var nSdkInstance = NOLBUNDLE.nlsQ("P1504C48C-9D0B-4ADE-B7CD-04AF56A52362", "nlsnInstance"); // Content Metadata var nielsenMetadata = { type: 'static', assetid: ( location.hostname + location.pathname + location.search ).replace( /([^\w]|_)+/g, '-' ).replace( /^-+|-+$/g, '' ) || 'homepage', section: 'LiberoCommunity_BRW' }; // Event 'staticstart' Call nSdkInstance.ggPM("staticstart", nielsenMetadata); } </script>   <script type="text/javascript"> if ( rs_DLRERR == 1 ) { var libero_comscore_error = 404; } </script> <script type="text/javascript"> document.write(unescape("%3Cscript src='" + (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js'%3E%3C/script%3E")); </script> <script type="text/javascript"> if (rs_DLR) { document.write(unescape("%3Cscript id='libero_tracking_js_site' src='http://digistatic.libero.it/js/comscore_8_3_04/comscore_digilander.libero.it.js'%3E%3C/script%3E")); document.write(unescape("%3Cscript id='libero_tracking_js_site' src='http://digistatic.libero.it/js/comscore_8_3_04/comscore_engine.js'%3E%3C/script%3E")); } </script> <noscript> <img src="http://b.scorecardresearch.com/p?c1=2&c2=13259779&cj=1&name=libero.others&ns_site=libero" /> </noscript>   <script src="//i.plug.it/iplug/js/lib/iol/analytics/data/digilander-libero-it/tracking_digilander-libero-it.min.js"></script> <script src="//i.plug.it/iplug/js/lib/iol/analytics/engine/IOL.Analytics.Tracking.min.js"></script> <script type="text/javascript"> var iat = new IOL.Analytics.Tracking.Engine(); iat.send(); </script> <noscript><img src="//italiaonline01.wt-eu02.net/215973748390194/wt.pl?p=315,libero.web.share.digiland.siti.digilander&cg1=libero&cg2=web&cg3=share&cg4=digiland&cg5=siti&cg6=digilander&cg7=libero.web.share.digiland.siti.digilander" height="1" width="1" alt=""></noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=G-9K5Y6YYGV4"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-9K5Y6YYGV4'); </script>  <div id="adinterstitial"></div> </BODY> </HTML>

E' vietata la riproduzione anche solo parziale di immagini, icone, layout e contenuti senza previa autorizzazione.
I marchi, i loghi e i prodotti citati sono dei legittimi proprietari.