Ahmed Alaa
مؤسس المنتدى
الدولة : 
عدد المساهمات : 936
النقاط : 2147488037
تاريخ الميلاد : 08/03/2000
تاريخ التسجيل : 15/11/2012
العمر : 24
الموقع : الدقهلية
 |  موضوع: حصريا معرض صور متحرك بتقنية 3d لأول مرة على المنتديات والمواقع العربية السبت 26 يناير 2013, 10:00 pm | |
|
السلام عليكم
اقدم لكم كود معرض صور احترافى بتقنية 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> |
| |
|
