简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 善良的好心人，请问这个巴拿马运河的效果是用什么技术做的呢？通过审查元素我没搞明白
怪我咯
怪我咯 2017-04-11 11:19:30
0
4
673

首先，这不是广告，这是auto cad的官网。
http://www.autodesk.com.cn/customer-stories/mwh-global
我在网上找资料是注意到了这条运河剖面图，在第四页，巨大的挑战，那里有一条巴拿马运河的剖面图，动态的。

我想高明白这个剖面图用什么技术做的，于是用了审查元素查看，然而，我是工程屌丝，所以，没看懂，求教各位大神，这个效果是用什么技术做的？
flash？html5？javascript?还是其他的？ p.s IE8也可以看到。另外我感觉不是flash，因为没找到下载链接，蓝色的水域可能使用p做的.

最近在看堂吉诃德，暂时沉浸其中，老是有意无意模仿里面的语气，请不要见怪，

怪我咯
怪我咯

走同样的路，发现不同的人生

全員に返信 (4)
洪涛
洪涛2017-04-11 11:21:30 4棟

船只和水域都是图片，用js控制位置变化。

いいねを押す+0
返信を追加
    迷茫
    迷茫2017-04-11 11:21:30 3棟

    http://videos.autodesk.com/zencoder/content/dam/autodesk/www/customer-stories/panama-canal//feature-banner-final-4-loop.mp4
    一个视频播放

    いいねを押す+0
    返信を追加
      Peter_Zhu
      Peter_Zhu2017-04-11 11:21:30 2棟


      在审查代码中，看到style一直在变化，大致推断是通过js去改变水的高度。
      蓝色的水的部分应该是一个p,或者是图片,通过设置定时器setTimeOut在特定的时间段改变width属性就可以实现水的效果。
      而小船是一个大小尺寸固定的图片，通过js修改position参数达到移动小船的效果。

      いいねを押す+0
      返信を追加
        洪涛
        洪涛2017-04-11 11:21:30 1棟

        是用jquery实现的。临时扒下的代码。有点多，你可以再改改。

            Document  

          
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
        太平洋
         
        加通湖 
         26 米/85 英尺
         
        大西洋
        いいねを押す+0
        返信を追加
          人気のトピック
          詳細>
          人気の記事
          人気のチュートリアル
          詳細>
          関連するチュートリアル
          人気のおすすめ
          最新のコース
          最新のダウンロード
          詳細>
          ウェブエフェクト
          公式サイト
          サイト素材
          フロントエンドテンプレート
          私たちについて 免責事項 Sitemap
          PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！