大家好,我大概花了1个多月的空余时间用js写了一个类似web qq的demo,在这里发布出来和大家共享一下。因为最近才开始在博客园上发有不足的地方请大家见谅。

      说回这个demo,我先把“使用文档挂出来”,具体如下:

-------------------------------------------------------------------------------

Welcome:

Hello,大家好!我是来自魔兽世界三区黑铁的黄之戀。

非常感谢你花费宝贵的时间来看我的这个作品。

请用FF或者IE 8.0 测试,其他版本的确没那么多时间去测试了。
--------------------------------------------------------------------------------

为什么做这个?

1. 主要目的是为了练习前端技术;

2. 玩了这么多年的WOW,也是时候为它做点什么了。
--------------------------------------------------------------------------------

用了哪些技术?

1. 做这个的初衷就是为了在IE下面也能浏览,当然后续还会做些HTML5和CSS3的作品出来和大家分享;

2. 其中主要是:原生javascript(为什么叫原生,我看大家都这样写,应该是没有jquery这些吧),css2,flash,ps;

ps: 里面的代码,素材基本上都是我亲手制作。美工的确很差请见谅!
--------------------------------------------------------------------------------

主要功能

1. 导航栏,差不多是一个弹性导航栏,好像jquery也这个动画事件。我还是坚持用JS自己写吧:)

2. 页面切换,一共有3个页面可以用鼠标拖动。切屏有拖动距离判断,当然嘛这个拖动距离很特殊,你懂的。。。

3. 点击每一屏上面的站点log可以打开对应的站点,魔兽官网不允许用Iframe打开,呵呵;

4. 在同一屏打开的新的页面我这里做了一个小小的管理,页面上只显示一个iframe,当然是用z-index来控制显示;

5. 在新打开页面的匡匡上可以拖动、最小,大化,可以关闭。在FF下面可以双击变大变小,IE暂时不支持该功能;

6. 最后一屏:鼠标放在光盘上面可以显示大图,点击就可以放相应的歌曲。

7. 播放面板的按钮均可使用,just try
--------------------------------------------------------------------------------

BUG

1.拖动时,鼠标拖进新页面会有问题;

2.flash播放器不够完美,因为我也只是学as1个周。如果某次打开没有播放,请重新刷新。 >.<

当然如果你发现了其他什么问题请联系我。

后记:如果你有什么问题和对于代码有什么见解可以联系我。
QQ:775486560
email:wskgeqshe@126.com 
View Code

 

   因为JS代码有64K,而且里面还有些图片和音频文件不能直接在这个上面挂出来。具体细节我已经写在使用文档里面了。

  主要功能

  1. 导航栏,差不多是一个弹性导航栏,好像jquery也这个动画事件。我还是坚持用JS自己写吧:)

  2. 页面切换,一共有3个页面可以用鼠标拖动。切屏有拖动距离判断,当然嘛这个拖动距离很特殊,你懂的。。。

  3. 点击每一屏上面的站点log可以打开对应的站点,魔兽官网不允许用Iframe打开,呵呵;

  4. 在同一屏打开的新的页面我这里做了一个小小的管理,页面上只显示一个iframe,当然是用z-index来控制显示;

  5. 在新打开页面的匡匡上可以拖动、最小,大化,可以关闭。在FF下面可以双击变大变小,IE暂时不支持该功能;

  6. 最后一屏:鼠标放在光盘上面可以显示大图,点击就可以放相应的歌曲。

  7. 播放面板的按钮均可使用,just try。

  效果图如下:

     图一:

   

  图二

 

 图三:

 

主要的功能差不多就是这些,具体的话大家可以下载具体的demo,谢谢!

posted @ 2013-06-11 11:43 黄之戀 阅读(557) 评论(0) 推荐(0)
摘要: 第一次在博客园上发贴子,就以去年自己无聊写的一个软键盘作为处女贴吧。功能都是模仿的,可能部分功能不全请大家见谅。直接上代码。HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http- 阅读全文
posted @ 2013-06-09 17:28 黄之戀 阅读(245) 评论(1) 推荐(1)
点击右上角即可分享
微信分享提示