×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 3333|回复: 22

求大家帮我改改这个网页

[复制链接]
发表于 2010-12-2 10:06:39 | 显示全部楼层 |阅读模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="2010AI同事聚会相册" />
<meta name="keywords" content="JS代码,相册代码,JS广告代码,JS特效代码" />
<meta name="description" content="2010AI同事聚会相册" />
<title>同事聚会相册</title>
<style type="text/css">
        html {
                overflow: hidden;
        }
        body {
                position: absolute;
                margin: 0px;
                padding: 0px;
                background: #111;
                width: 100%;
                height: 100%;
        }
        #screen {
        position: absolute;
        left: 37px;
        top: 48px;
        width: 80%;
        height: 80%;
        background: #000;
        }
        #screen img {
                position: absolute;
                cursor: pointer;
                visibility: hidden;
                width: 0px;
                height: 0px;
        }
        #screen .tvover {
                border: solid #876;
                opacity: 1;
                filter: alpha(opacity=100);
        }
        #screen .tvout {
                border: solid #fff;
                opacity: 0.3;
        }
        #bankImages {
                display: none;
        }
</style>

<script type="text/javascript">
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 : {
                size       : 5,  // 4x4 grid
                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 n = (tv.grid.size / 2) - .5;
                for (var y = -n; y <= n; y++)
                {
                        for (var x = -n; x <= n; 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.25;
                                                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.size + .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.size + .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) * .0050, .1);
                tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0050, .1);
                tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .50 : .050);
                tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .50 : .050);
                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="images/1.jpg">
        <img alt="" src="images/2.jpg">
        <img alt="" src="images/3.jpg">
        <img alt="" src="images/4.jpg">
    <img alt="" src="images/5.jpg">
        <img alt="" src="images/6.jpg">
        <img alt="" src="images/7.jpg">
        <img alt="" src="images/8.jpg">
    <img alt="" src="images/9.jpg">
        <img alt="" src="images/10.jpg">
        <img alt="" src="images/11.jpg">
        <img alt="" src="images/12.jpg">
    <img alt="" src="images/13.jpg">
        <img alt="" src="images/14.jpg">
        <img alt="" src="images/15.jpg">
        <img alt="" src="images/16.jpg">
   
    <img alt="" src="images/17.jpg">
        <img alt="" src="images/18.jpg">
        <img alt="" src="images/19.jpg">
        <img alt="" src="images/20.jpg">

        <img alt="" src="images/21.jpg">
        <img alt="" src="images/22.jpg">
        <img alt="" src="images/23.jpg">
        <img alt="" src="images/24.jpg">
        <img alt="" src="images/25.jpg">

</div>

<script type="text/javascript">
        /* ==== start script ==== */
        onresize = tv.resize;
        tv.init();
</script>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div align="center">
  <p style="color:#FFFFFF">2010AI同事聚会相册</p>
  <p></p>
  <p style="color:#FFFFFF"></p>
  <p></p>
</div>

</body>
</html>
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=337643
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论
发表于 2010-12-4 09:44:51 | 显示全部楼层
酷素材
为什么要改?改成什么样?你遇到什么问题了?????
回复 支持 反对

使用道具 举报

发表于 2010-12-17 10:35:46 | 显示全部楼层
你的这个页面很纠结,弄下来一片黑,什么都不到,可能是用了定位吧,选中都不行,呵呵,没法修改,你是想要中间的黑块垂直水平居中吗?还是要干吗
回复 支持 反对

使用道具 举报

发表于 2011-4-7 18:48:23 | 显示全部楼层
初学,你的这个页面,不懂
回复 支持 反对

使用道具 举报

发表于 2011-4-9 20:07:45 | 显示全部楼层
酷素材
不懂,初学
回复 支持 反对

使用道具 举报

发表于 2011-4-21 23:28:44 | 显示全部楼层
酷素材
貌似你要是把所有的文件都附带上 就好了!!!!
回复 支持 反对

使用道具 举报

发表于 2011-4-21 23:29:06 | 显示全部楼层
貌似你要是把所有的文件都附带上 就好了!!!!
回复 支持 反对

使用道具 举报

发表于 2011-4-21 23:36:40 | 显示全部楼层
貌似你要是把所有的文件都附带上 就好了!!!!
回复 支持 反对

使用道具 举报

发表于 2018-2-7 10:16:07 | 显示全部楼层
顶顶多好
回复 支持 反对

使用道具 举报

发表于 2018-2-7 09:39:03 | 显示全部楼层
真心顶。。。。
回复 支持 反对

使用道具 举报

发表于 2018-2-7 09:34:04 | 显示全部楼层
说的非常好
回复 支持 反对

使用道具 举报

发表于 2018-2-7 10:19:52 | 显示全部楼层
不错不错
回复 支持 反对

使用道具 举报

发表于 2018-2-7 10:19:38 | 显示全部楼层
楼主我支持你
回复 支持 反对

使用道具 举报

发表于 2018-4-1 13:56:34 | 显示全部楼层
楼主是超人
回复 支持 反对

使用道具 举报

发表于 2018-4-1 14:04:17 | 显示全部楼层
LZ真是人才
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则