学习安装carousel-3d



  • 最近我们打算将论坛的页面更新一下,作为可选的技术方案,我们考察了一下好的图片控件,于是我找到了一个好的东西,可以在浏览器中显示3D图片的效果,这个控件就是carousel-3d

    大家可能不知道什么是carousel,这里谷歌给你答案——圆盘传送带。也就是说,想让图片循环的展示,除了普通的渐变外,还可以采用3D的方式来表现图片的切换效果。而carousel-3d呢,就是我寻找的一个非常适合的控件。这个控件是韩国人(组织)开发的哦。它的网址是:

    http://paio-co-kr.github.io/carousel-3d

    不过呢,我从github中检出了代码,可是一波三折。

    首先,就是无法使用bower。我查了一下网络,知道bower是前端库常用的,类似npm,可以通过npm进行安装。可是呢,我使用了这个脚本:

    npm install -g bower
    

    那边始终卡在了一个地方。害得我一个晚上都没有办法研究。

    今天好歹是将bower安装好了,可是运行example/default.html文件,却没有显示出它那边显示的效果。什么原因呢?起初我觉得它那边依赖的一个库modernizr使用的是2.8.3的版本,而最新的版本已经是3.3.1了,可能是这个原因。但是后面我发现,carousel-3d这个库所依赖的库,modernizr可以通过bin/modernizr 这个脚本来生成modernizr.js文件。可是不幸的是,当我按照readme中的方法运行这条语句时:

    ./bin/modernizr -c lib/config-all.json
    

    移植报找不到module的错误。我想可能依赖没有全吧。我就尝试了npm install,可是npm install净报错,真是非常沮丧。后面我考虑不依赖一蹴而就的解决办法,开始一个一个进行安装,于是运行了下面几条语句:

    npm install lodash
    npm install requirejs
    npm install file
    npm install marked
    npm install doctrine
    npm install yargs
    

    所谓哪里不会点哪里,诶,最后真的成功生成modernizr.js文件了!我继续浏览器打开example/default.html,终于出现了我想要的结果!

    0_1471850628094_upload-36c5a6a0-86e6-4d46-b677-b36b5d20dc8b

    记录一下,算作给后来的朋友们一点儿提示吧。



  • 这个控件的特点应该是支持ie8,9.
    如果需要3D显示的话,webgl就可以搞定。html5的规范



  • @flowerlove 那的确,可能用WebGL灵活性更大一些,不过要不要学习,我还观察一下。有机会的话,还是看看WebGL和three.js。



  • 加油哟彩阳兄~~~~~~~~~~~~


Log in to reply
 

走马观花

最近的回复

  • 萌梦 男孩,女孩,和蛋

    menghome.png

    read more
  • 设计模式-工厂模式

    使用qt/qml来演示设计模式效果,便于学习理解

    1)定义创建对象的接口,封装对象的创建
    2)使具体化类的工作延迟到工厂子类中

    bg.png
    image.png

    1. 工厂类

    createProduct使用了参数来选择要创建哪个产品

    #ifndef FACTORY_H #define FACTORY_H #include <QObject> class Product; class QString; class Factory: public QObject { Q_OBJECT public: virtual ~Factory() = 0; virtual Product* createProduct(QString type) = 0; protected: Factory(); }; class ConcreteFactory: public Factory { Q_OBJECT public: ~ConcreteFactory(); ConcreteFactory(); public slots: Product* createProduct(QString type); }; #endif // FACTORY_H #include "factory.h" #include "product.h" #include <QtQml/qqml.h> Factory::~Factory() { } Factory::Factory() { qmlRegisterType<Product>("Product", 1, 0, "Product"); } ConcreteFactory::~ConcreteFactory() { } ConcreteFactory::ConcreteFactory() { } Product *ConcreteFactory::createProduct(QString type) { if(type == "boy") return static_cast<Product *>(new ConcreteProduct1()); else if(type == "girl") return static_cast<Product *>(new ConcreteProduct2()); return static_cast<Product *>(new ConcreteProduct1()); } 2 产品类

    一个产品是萌梦男,一个产品是萌梦女

    #ifndef PRODUCT_H #define PRODUCT_H #include <QObject> class Product: public QObject { Q_OBJECT public: virtual ~Product() = 0; Q_PROPERTY(QString icon READ icon NOTIFY iconChanged) QString m_icon; QString icon() const { return m_icon; } signals: void iconChanged(QString icon); protected: Product(); signals: public slots: }; class ConcreteProduct1: public Product { Q_OBJECT public: ~ConcreteProduct1(); ConcreteProduct1(); }; class ConcreteProduct2: public Product { Q_OBJECT public: ~ConcreteProduct2(); ConcreteProduct2(); }; #endif // PRODUCT_H #include "product.h" Product::~Product() { } Product::Product() { } ConcreteProduct1::~ConcreteProduct1() { } ConcreteProduct1::ConcreteProduct1() { m_icon = "qrc:/images/boy.png"; } ConcreteProduct2::~ConcreteProduct2() { } ConcreteProduct2::ConcreteProduct2() { m_icon = "qrc:/images/girl.png"; } 3. main.qml

    使用timer,canvas,listview等实现一个自动化生产的动画效果

    源代码

    Fork me on Gitee

    read more
  • blender建模 章鱼
    捕获2.PNG 😵

    read more

关注我们

微博
QQ群