الرئيسية
تسجيل الدخول
انشاء حساب 
S andreaseيونيو 16th 2011, 9:54 pm
عدد المساهمات : 2
نقاط : 6
السٌّمعَة : 0
تاريخ التسجيل : 16/06/2011
العمر : 30
السلام عليكم ورحمة الله وبركاتو
اقدم لكم كود معرض صور احترافى بتقنية 3D
حصرى لاول مرة على المنتديات والمواقع العربية مصمم عن طريق
Css-Html-Javascript
مثال مباشر للمعاينة
http://mns4.ahladalil.com/h17-page
طريقة التركيب
اولا تذهب الى
لوحة الادارة-عناصر اضافية-ادارة صفحات Html-انشاء صفحة Html جديدة
حول النمط للوضع العادى باللون الاخضر
فى خيارات الصفحة
العنوان- ضع اى اسم
هل تود استعمال أعلى و أسفل صفحة منتداك؟ لا
استعمال هذه الصفحة كصفحة رئيسية؟ لا
ثم الصق الكود التالى
فى الصفحة - سجل
الكود
المعرض حصري على المنتديات والمواقع العربية ومتعوب عليه بجد .. ممنوع حذف الحقوق
اوالنقل بدون ذكر رابط الموضوع الاصلى http://mns4.ahladalil.com/t1170-topic
يمكنك اخذ الرابط الخاص بصفحتك الجديدة ووضعه باى مكان تحب فى اعلانات منتداك او توقيعك وخلافه....
ويمكنكم التغيير والتعديل على الصور واضافة رابط ووصف للصور..
تحياتي
اقدم لكم كود معرض صور احترافى بتقنية 3D
حصرى لاول مرة على المنتديات والمواقع العربية مصمم عن طريق
Css-Html-Javascript
مثال مباشر للمعاينة
http://mns4.ahladalil.com/h17-page
طريقة التركيب
اولا تذهب الى
لوحة الادارة-عناصر اضافية-ادارة صفحات Html-انشاء صفحة Html جديدة
حول النمط للوضع العادى باللون الاخضر
فى خيارات الصفحة
العنوان- ضع اى اسم
هل تود استعمال أعلى و أسفل صفحة منتداك؟ لا
استعمال هذه الصفحة كصفحة رئيسية؟ لا
ثم الصق الكود التالى
فى الصفحة - سجل
الكود
| الرمز: |
| <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>معرض صور-3D-</title> <style type="text/css"> /*----- http://mns4.ahladalil.com شبكة المنصورة نت -----*/ html { overflow:hidden; } body { position:absolute; background:#111; width:100%; height:100%; margin:0; padding:0; } #screen { position:absolute; left:10%; top:10%; width:80%; height:80%; background:#000; } #screen img { position:absolute; cursor:pointer; visibility:hidden; width:0; height:0; -ms-interpolation-mode:nearest-neighbor; } #screen .tvover { border:solid #fff; } #screen .tvout { border:solid #222; } #bankImages { display:none; } a:active { background-color:0; text-decoration:none; } a:hover { color:a2d151; text-decoration:none; letter-spacing:2px; font-weight:700; } a:link,a:visited { color:e3e3e3; text-decoration:none; } /*----- http://mns4.ahladalil.com شبكة المنصورة نت -----*/ </style> <script language="JavaScript1.2"> function ejs_nodroit() { return(false); } document.oncontextmenu = ejs_nodroit; </script> <script type="text/javascript"> // ============================================================= // ===== photo 3D ===== // script written by Gerard Ferrandez - October 21th, 2007 // http://www.dhteumeuleu.com // ============================================================= /* ==== library ==== */ var Library = {}; Library.ease = function () { this.target = 0; this.position = 0; this.move = function (target, speed) { this.position += (target - this.position) * speed; } } var tv = { /* ==== variables ==== */ O : [], screen : {}, grid : { sizeX : 4, // 4x4 grid sizeY : 4, borderSize : 6, // borders size zoomed : false }, angle : { x : new Library.ease(), y : new Library.ease() }, camera : { x : new Library.ease(), y : new Library.ease(), zoom : new Library.ease(), focalLength : 750 // camera Focal Length }, /* ==== init script ==== */ init : function () { this.screen.obj = document.getElementById('screen'); var img = document.getElementById('bankImages').getElementsByTagName('img'); this.screen.obj.onselectstart = function () { return false; } this.screen.obj.ondrag = function () { return false; } /* ==== create images grid ==== */ var ni = 0; var nx = (tv.grid.sizeX / 2) - .5; var ny = (tv.grid.sizeY / 2) - .5; for (var y = -ny; y <= ny; y++) { for (var x = -nx; x <= nx; x++) { /* ==== create HTML image element ==== */ var o = document.createElement('img'); var i = img[(ni++) % img.length]; o.className = 'tvout'; o.src = i.src; tv.screen.obj.appendChild(o); /* ==== 3D coordinates ==== */ o.point3D = { x : x, y : y, z : new Library.ease() }; /* ==== push object ==== */ o.point2D = {}; o.ratioImage = 1; tv.O.push(o); /* ==== on mouse over event ==== */ o.onmouseover = function () { if (!tv.grid.zoomed) { if (tv.o) { /* ==== mouse out ==== */ tv.o.point3D.z.target = 0; tv.o.className = 'tvout'; } /* ==== mouse over ==== */ this.className = 'tvover'; this.point3D.z.target = -.5; tv.o = this; } } /* ==== on click event ==== */ o.onclick = function () { if (!tv.grid.zoomed) { /* ==== zoom in ==== */ tv.camera.x.target = this.point3D.x; tv.camera.y.target = this.point3D.y; tv.camera.zoom.target = tv.screen.w * 1.1; tv.grid.zoomed = this; } else { if (this == tv.grid.zoomed){ /* ==== zoom out ==== */ tv.camera.x.target = 0; tv.camera.y.target = 0; tv.camera.zoom.target = tv.screen.w / (tv.grid.sizeX + .1); tv.grid.zoomed = false; } } } /* ==== 3D transform function ==== */ o.calc = function () { /* ==== ease mouseover ==== */ this.point3D.z.move(this.point3D.z.target, .5); /* ==== assign 3D coords ==== */ var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position; var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position; var z = this.point3D.z.position * tv.camera.zoom.position; /* ==== perform rotations ==== */ var xy = tv.angle.cx * y - tv.angle.sx * z; var xz = tv.angle.sx * y + tv.angle.cx * z; var yz = tv.angle.cy * xz - tv.angle.sy * x; var yx = tv.angle.sy * xz + tv.angle.cy * x; /* ==== 2D transformation ==== */ this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz); this.point2D.x = yx * this.point2D.scale; this.point2D.y = xy * this.point2D.scale; this.point2D.w = Math.round( Math.max( 0, this.point2D.scale * tv.camera.zoom.position * .8 ) ); /* ==== image size ratio ==== */ if (this.ratioImage > 1) this.point2D.h = Math.round(this.point2D.w / this.ratioImage); else { this.point2D.h = this.point2D.w; this.point2D.w = Math.round(this.point2D.h * this.ratioImage); } } /* ==== rendering ==== */ o.draw = function () { if (this.complete) { /* ==== paranoid image load ==== */ if (!this.loaded) { if (!this.img) { /* ==== create internal image ==== */ this.img = new Image(); this.img.src = this.src; } if (this.img.complete) { /* ==== get width / height ratio ==== */ this.style.visibility = 'visible'; this.ratioImage = this.img.width / this.img.height; this.loaded = true; this.img = false; } } /* ==== HTML rendering ==== */ this.style.left = Math.round( this.point2D.x * this.point2D.scale + tv.screen.w - this.point2D.w * .5 ) + 'px'; this.style.top = Math.round( this.point2D.y * this.point2D.scale + tv.screen.h - this.point2D.h * .5 ) + 'px'; this.style.width = this.point2D.w + 'px'; this.style.height = this.point2D.h + 'px'; this.style.borderWidth = Math.round( Math.max( this.point2D.w, this.point2D.h ) * tv.grid.borderSize * .01 ) + 'px'; this.style.zIndex = Math.floor(this.point2D.scale * 100); } } } } /* ==== start script ==== */ tv.resize(); mouse.y = tv.screen.y + tv.screen.h; mouse.x = tv.screen.x + tv.screen.w; tv.run(); }, /* ==== resize window ==== */ resize : function () { var o = tv.screen.obj; tv.screen.w = o.offsetWidth / 2; tv.screen.h = o.offsetHeight / 2; tv.camera.zoom.target = tv.screen.w / (tv.grid.sizeX + .1); for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) { tv.screen.x += o.offsetLeft; tv.screen.y += o.offsetTop; } }, /* ==== main loop ==== */ run : function () { /* ==== motion ease ==== */ tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1); tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1); tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025); tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025); tv.camera.zoom.move(tv.camera.zoom.target, .05); /* ==== angles sin and cos ==== */ tv.angle.cx = Math.cos(tv.angle.x.position); tv.angle.sx = Math.sin(tv.angle.x.position); tv.angle.cy = Math.cos(tv.angle.y.position); tv.angle.sy = Math.sin(tv.angle.y.position); /* ==== loop through all images ==== */ for (var i = 0, o; o = tv.O[i]; i++) { o.calc(); o.draw(); } /* ==== loop ==== */ setTimeout(tv.run, 32); } } /* ==== global mouse position ==== */ var mouse = { x : 0, y : 0 } document.onmousemove = function(e) { if (window.event) e = window.event; mouse.x = e.clientX; mouse.y = e.clientY; return false; } </script> </head> <body> <div id="screen"></div> <div id="bankImages"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wi2311.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt0610.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt1410.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt1610.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt1910.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt2110.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt2510.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt2710.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt4310.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt4610.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt5512.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt4710.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt5310.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt4010.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt3510.jpg"> <img alt="" src="https://i.servimg.com/u/f28/15/28/56/97/wt4810.jpg"> </div> <script type="text/javascript"> /* ==== start script ==== */ onresize = tv.resize; tv.init(); </script> </body> </html> |
المعرض حصري على المنتديات والمواقع العربية ومتعوب عليه بجد .. ممنوع حذف الحقوق
اوالنقل بدون ذكر رابط الموضوع الاصلى http://mns4.ahladalil.com/t1170-topic
يمكنك اخذ الرابط الخاص بصفحتك الجديدة ووضعه باى مكان تحب فى اعلانات منتداك او توقيعك وخلافه....
ويمكنكم التغيير والتعديل على الصور واضافة رابط ووصف للصور..
تحياتي
