请选择 进入手机版 | 继续访问电脑版
论坛公告
论坛公告
在线工具
在线工具
热门版块
热门版块
查看: 354|回复: 11

超酷的HTML 3D动态效果

[复制链接]
  • TA的每日心情
    无聊
    2018-11-6 05:25
  • 签到天数: 47 天

    [LV.5]常住居民I

    39

    主题

    505

    帖子

    5035

    积分

    管理员

    德勋
    241
    金丹
    3316
    功绩
    49
    灵芝
    683
    精华
    0
    阅读权限
    255
    注册时间
    2016-6-25
    在线时间
    201 小时

    最佳新人活跃会员管理员优秀会员勤劳之星

    发表于 2017-3-8 19:41:23 | 显示全部楼层 |阅读模式


    代码如下:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Wanna tell her - interactive DHTML</title>
    <meta http-equiv="imagetoolbar" content="no">
    <style type="text/css">
    html {
    overflow: hidden;
    }
    body {
    position: absolute;
    margin: 0px;
    padding: 0px;
    background: #fff;
    width: 100%;
    height: 100%;
    }
    #screen {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    background: #fff;
    }
    #screen img {
    position: absolute;
    cursor: pointer;
    width: 0px;
    height: 0px;
    -ms-interpolation-mode:nearest-neighbor;
    }
    #bankImages {
    visibility: hidden;
    }
    #FPS {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 10px;
    color: #666;
    font-family: verdana;
    }

    </style>

    <script type="text/javascript">
    /* ==== Easing function ==== */
    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 : [],
    fps : 0,
    screen : {},
    angle : {
    x : new Library.ease(),
    y : new Library.ease()
    },
    camera : {
    x : new Library.ease(),
    y : new Library.ease()
    },
    create3DHTML : function (i, x, y, z, sw, sh) {
    /* ==== create HTML image element ==== */
    var o = document.createElement('img');
    o.src = i.src;
    tv.screen.obj.appendChild(o);
    /* ==== 3D coordinates ==== */
    o.point3D = {
    x : x,
    y : y,
    z : new Library.ease(),
    sw : sw,
    sh : sh,
    w : i.width,
    h : i.height
    };
    o.point3D.z.target = z;
    /* ==== push object ==== */
    o.point2D = {};
    tv.O.push(o);

    /* ==== on mouse over event ==== */
    o.onmouseover = function () {
    if (this != tv.o) {
    this.point3D.z.target = tv.mouseZ;
    tv.camera.x.target = this.point3D.x;
    tv.camera.y.target = this.point3D.y;
    if (tv.o) tv.o.point3D.z.target = 0;
    tv.o = this;
    }
    return false;
    }

    /* ==== on mousedown event ==== */
    o.onmousedown = function () {
    if (this == tv.o) {
    if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;
    else {
    tv.o = false;
    this.onmouseover();
    }
    }
    }

    /* ==== main 3D function ==== */
    o.animate = function () {
    /* ==== 3D coordinates ==== */
    var x = this.point3D.x - tv.camera.x.position;
    var y = this.point3D.y - tv.camera.y.position;
    this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);
    /* ==== rotations ==== */
    var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position;
    var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position;
    var yz = tv.angle.cy * xz - tv.angle.sy * x;
    var yx = tv.angle.sy * xz + tv.angle.cy * x;
    /* ==== 2D transform ==== */
    var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
    x = yx * scale;
    y = xy * scale;
    var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));
    var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));
    /* ==== HTML rendering ==== */
    var o = this.style;
    o.left = Math.round(x + tv.screen.w - w * .5) + 'px';
    o.top = Math.round(y + tv.screen.h - h * .5) + 'px';
    o.width = w + 'px';
    o.height = h + 'px';
    o.zIndex = 10000 + Math.round(scale * 1000);
    }
    },

    /* ==== init script ==== */
    init : function (structure, FL, mouseZ, rx, ry) {
    this.screen.obj = document.getElementById('screen');
    this.screen.obj.onselectstart = function () { return false; }
    this.screen.obj.ondrag = function () { return false; }
    this.mouseZ = mouseZ;
    this.camera.focalLength = FL;
    this.angle.rx = rx;
    this.angle.ry = ry;
    /* ==== create objects ==== */
    var i = 0, o;
    while( o = structure[i++] )
    this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);
    /* ==== start script ==== */
    this.resize();
    mouse.y = this.screen.y + this.screen.h;
    mouse.x = this.screen.x + this.screen.w;
    /* ==== loop ==== */
    setInterval(tv.run, 16);
    setInterval(tv.dFPS, 1000);
    },

    /* ==== resize window ==== */
    resize : function () {
    var o = tv.screen.obj;
    if (o) {
    tv.screen.w = o.offsetWidth / 2;
    tv.screen.h = o.offsetHeight / 2;
    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 () {
    tv.fps++;
    /* ==== motion ease ==== */
    tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);
    tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);
    tv.camera.x.move(tv.camera.x.target, .025);
    tv.camera.y.move(tv.camera.y.target, .025);
    /* ==== 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 images ==== */
    var i = 0, o;
    while( o = tv.O[i++] ) o.animate();
    },

    /* ==== trace frames per seconds ==== */
    dFPS : function () {
    document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
    tv.fps = 0;
    }
    }

    /* ==== 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;
    }

    /* ==== starting script ==== */
    onload = function() {
    onresize = tv.resize;
    /* ==== build grid ==== */
    var img = document.getElementById('bankImages').getElementsByTagName('img');
    var structure = [];
    for (var i = -300; i <= 300; i += 120)
    for (var j = -300; j <= 300; j += 120)
    structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 });
    /* ==== let's go ==== */
    tv.init(structure, 350, -200, .005, .0025);
    }

    </script>
    </head>

    <body>

    <div id="screen"></div>

    <div id="bankImages">
    <img alt="" src="http://wp.yalangelt.com/userfiles/xuehai/lt/22.gif">
    </div>
    <div id="FPS"></div>

    </body>
    </html>





    评分

    参与人数 3德勋 +29 金丹 +29 灵芝 +29 收起 理由
    温凤蝶飞 + 11 + 11 + 11
    晓恋缘 + 8 + 8 + 8 非常给力.值得称赞!
    相依相伴 + 10 + 10 + 10 非常给力.值得称赞!

    查看全部评分

    回复

    使用道具 举报

    该用户从未签到

    61

    主题

    2759

    帖子

    1万

    积分

    中级会员

    德勋
    357
    金丹
    5856
    功绩
    20
    灵芝
    3046
    精华
    0
    阅读权限
    50
    注册时间
    2016-7-3
    在线时间
    106 小时

    勤劳之星真我风采新人优秀会员最佳新人活跃会员版主

    发表于 2017-3-8 23:35:40 | 显示全部楼层
    跟着鼠标动,好美
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    61

    主题

    2759

    帖子

    1万

    积分

    中级会员

    德勋
    357
    金丹
    5856
    功绩
    20
    灵芝
    3046
    精华
    0
    阅读权限
    50
    注册时间
    2016-7-3
    在线时间
    106 小时

    勤劳之星真我风采新人优秀会员最佳新人活跃会员版主

    发表于 2017-3-8 23:36:20 | 显示全部楼层
    问好老师,谢谢老师分享,辛苦了{:1_329:}
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    61

    主题

    2759

    帖子

    1万

    积分

    中级会员

    德勋
    357
    金丹
    5856
    功绩
    20
    灵芝
    3046
    精华
    0
    阅读权限
    50
    注册时间
    2016-7-3
    在线时间
    106 小时

    勤劳之星真我风采新人优秀会员最佳新人活跃会员版主

    发表于 2017-3-8 23:36:31 | 显示全部楼层
    {:5_404:}{:5_404:}
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    3 天前
  • 签到天数: 173 天

    [LV.7]常住居民III

    964

    主题

    1万

    帖子

    17万

    积分

    阁主

    德勋
    22289
    金丹
    64561
    功绩
    3693
    灵芝
    38464
    精华
    114
    阅读权限
    255
    注册时间
    2016-6-25
    在线时间
    947 小时

    主题500主题800终生成就优秀会员金点子最火真我风采勤劳之星宣传达人活跃会员突出贡献管理员功勋威望达人主题过百主题300文学

    发表于 2017-3-8 23:53:14 | 显示全部楼层
    这个效果也不错,就是对于我来说好像不是很实用,不知道用在哪儿!;P
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    3 天前
  • 签到天数: 173 天

    [LV.7]常住居民III

    964

    主题

    1万

    帖子

    17万

    积分

    阁主

    德勋
    22289
    金丹
    64561
    功绩
    3693
    灵芝
    38464
    精华
    114
    阅读权限
    255
    注册时间
    2016-6-25
    在线时间
    947 小时

    主题500主题800终生成就优秀会员金点子最火真我风采勤劳之星宣传达人活跃会员突出贡献管理员功勋威望达人主题过百主题300文学

    发表于 2017-3-8 23:53:34 | 显示全部楼层
    感谢管管分享精彩,辛苦了!{:5_404:}
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    无聊
    2018-10-29 14:02
  • 签到天数: 27 天

    [LV.4]偶尔看看III

    47

    主题

    1万

    帖子

    4万

    积分

    超级版主

    德勋
    889
    金丹
    17974
    功绩
    47
    灵芝
    13026
    精华
    4
    阅读权限
    150
    注册时间
    2016-7-3
    在线时间
    128 小时

    活跃会员真我风采勤劳之星优秀会员最佳新人新人

    发表于 2017-3-9 11:14:10 | 显示全部楼层
    感谢管管精彩分享,辛苦了!{:5_404:}
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    无聊
    2018-10-29 14:02
  • 签到天数: 27 天

    [LV.4]偶尔看看III

    47

    主题

    1万

    帖子

    4万

    积分

    超级版主

    德勋
    889
    金丹
    17974
    功绩
    47
    灵芝
    13026
    精华
    4
    阅读权限
    150
    注册时间
    2016-7-3
    在线时间
    128 小时

    活跃会员真我风采勤劳之星优秀会员最佳新人新人

    发表于 2017-3-9 11:14:16 | 显示全部楼层
    {:5_412:}{:5_412:}
    回复

    使用道具 举报

  • TA的每日心情

    前天 21:45
  • 签到天数: 34 天

    [LV.5]常住居民I

    36

    主题

    845

    帖子

    8506

    积分

    中级会员

    德勋
    1338
    金丹
    3064
    功绩
    47
    灵芝
    1864
    精华
    2
    阅读权限
    50
    注册时间
    2017-2-27
    在线时间
    80 小时

    最佳新人活跃会员新人优秀会员

    发表于 2017-3-9 15:33:10 | 显示全部楼层
    这个特效很好玩,喜欢!分享辛苦!{:1_329:}
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    郁闷
    2018-12-2 13:59
  • 签到天数: 28 天

    [LV.4]偶尔看看III

    86

    主题

    1948

    帖子

    1万

    积分

    高级会员

    德勋
    2212
    金丹
    9243
    功绩
    206
    灵芝
    3809
    精华
    0
    阅读权限
    100
    注册时间
    2016-7-14
    在线时间
    141 小时

    最佳新人活跃会员版主新人优秀会员

    发表于 2017-3-9 15:44:50 | 显示全部楼层
    魔幻鼠标吗,很漂亮,但是不懂什么软件做的{:5_404:}
    回复 支持 反对

    使用道具 举报

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

    本版积分规则

    Powered by Discuz! 3.4

    快速回复 返回顶部 返回列表