1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

怎样用JS实现3D效果

本帖由 tsh072012-11-19 发布。版面名称:前端开发

  1. tsh07

    tsh07 New Member

    注册:
    2012-05-01
    帖子:
    162
    赞:
    0
    怎样用JS实现3D效果
    在平面上要想表现立体感,就是通过不同的移动速度产生远近景深的错觉。
    这个特效的核心是通过获取鼠标的坐标(坐标原点是(0,0)为浏览器窗口的左上

    角),然后以浏览器窗口的某一点为中心坐标来计算偏移量,再设置到需要移

    动的元素上。onmousemove时不停的计算偏移量,就有了移动的效果。
    如果某元素的移动范围是左右20px,上下10px,那么鼠标移动到(100,570)时

    ,它就要往左偏16px(-80%*20),往下偏9px(90%*10)。所以如果有3个元素,上

    下左右的移动范围就不一样,就会有立体的效果。另外远景和近景位移方向相

    反也是产生3D效果的方法
    本专题的中心坐标是浏览器窗口的宽65%、高50%处,因为把鼠标当成视角话,

    那么默认视角是在右侧的。
    说到坐标....你知道获取个坐标也有很多方法吗?offsetX、layerX、pageX、

    clientX、screenX....IE和FF下还都不一样呦,具体请看javascript事件对象

    坐标事件说明»,经过各种实验各种折腾,最后我选择了clientX,“只有

    clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.”我有一口血喷出来

    的赶脚,整出这么多又不兼容又不标准的玩意干嘛...另外搜索的关键词不对也

    挺坑爹的...
    JS是网页设计中的重要技术,也是网页设计培训的重要内容之一,如果想将网

    页做得更加精美简洁就一定要学习好JS效果的技术。
     
  2. beaumanoir

    beaumanoir New Member

    注册:
    2011-12-20
    帖子:
    26
    赞:
    0
    学习咯、、、、、、、
     
  3. sskjhao520

    sskjhao520 New Member

    注册:
    2012-12-01
    帖子:
    184
    赞:
    0
    很不错学习了
     
  4. 和商投资

    和商投资 Member

    注册:
    2017-08-22
    帖子:
    160
    赞:
    0
    有道理额