step_2 用BootScript制作一个展示页面

2019年9月14日 114次阅读 来源: 林奈木

受了点刺激，默默地滚来做展示页面，算是bootstrap一次深入实战，之前用过一次，时间紧张，是基于组件制作的，这次算是深入开发，试试自己做的js组件

以下就是基本工作流程：
对于每个需要定制的元素，在Bootstrap CSS文件（未压缩版）中找到其出现的位置。
将需要定制的样式代码拷贝并粘贴到你自己的文件中。例如，定制导航条（navbar）的背景（background），只需要拷贝.navbar样式。
在你自己的样式表文件中修改拷贝过来的CSS代码。不需要增加新的class或使用!important属性。尽量简单就好。
重复上述过程，直到自己满意为止。
BootStrap起步

开始动手了，内心的设想是做个和Laraval 官网相似的页面，毕竟只是简单的展示页面。
有点想做个十个矩形摆成的圆形，来做一个导航。最近看了一本书，叫做《众妙之门——JavaScript与jQuery技术精粹》，感觉还不赖，里面第六章讲的就是绘图，利用它的代码，做一次尝试好了~
代码如下

Plot = function(stage){
this.setDimensions = function(x,y){
    this.elm.style.width = x + 'px';
    this.elm.style.height = y + 'px';
    this.width = x;
    this.height = y;
}
this.position = function(x,y){
    var xoffset = argument[2] ? 0 : this.width / 2;
    var yoffset = argument[2] ? 0 : this.height / 2;
    this.elm.style.left = (x - xoffset) + 'px';
    this.elm.style.top = (y - yoffset) + 'px';
    this.x = x;
    this.y = y; 
}
this.setBackground = function( col ){
    this.elm.style.background = col;
}
this.kill = function(){
    stage.removeChild( this.elm );
}
this.rotate = function( str ){
    this.elm.style.webkitTransform = this.elm.style.MozTransform = this.elm.style.OTransform = this.elm.style.transform = 
    'rotate(' + str + ')';
}
this.content = function( content ){
    this.elm.innerHTML = content;
}
this.round = function( round ){
    this.elm.style.borderRadius = round ? '50%/50%' : '';
}
this.elm = document.createElement( 'div' );
this.elm.style.position = 'absolute';
stage.appendChild( this.elm );

}

var stage = document.querySelector('.stage');
var plots = 10;
var increase = Math.PI * 2 / plots;
var angle = 0,x = 0,y = 0;
for( var i = 0; i < plots; i++)
{
    var p = new Plot( stage );
    p.setBackground( 'green' );
    p.setDimensions( 40,40 );
    x = 100 * Math.cos( angle ) + 200;
    y = 100 * Math.sin( angle ) + 200;//圆心在(200,200)
    p.position( x,y );
    angle += increase;
}

之前很少直接写类来用，这次算是很直接的写了一次，看这段代码看了好久，总算透彻的理解了一番。
但是，如果真的那么顺利，那就不是锻炼了好嘛!
yabali出现了一个error，如图:
《step_2 用BootScript制作一个展示页面》
感觉上，如果要调试JS还是喜欢用chrome，因为错误提示还是比较明显的说。
这个问题的原因是什么呢？

前段时间在微博上看到HTML5中国的分享，关于滚动条插件的。11个最佳jQuery滚动条插件
试了一下flux。
这里借用一下小畅的博客Flux Slider插件的介绍与应用 ，
HTML代码不放了，放上jquery代码，能设置的参数还是相当多的：

$(function(){
        window.myFlux = new flux.slider('#slider',{
            controls: false,
            autoplay: true,
            transitions: ['zip','bars3d']
        });
    });

当然也可以对图片做一些小小的处理，先绑定事件:

$('#slider').bind('fluxTransitionEnd', function(event){
        var img = event.data.currentImage;
        //DO SOMETHING
    })

不过总觉得这个插件在chrome下效果卡卡的，这是我的错觉么。
遇到的难题是，图片的大小不知道该如何设置，在flux.js源码中看到了可以设置height与width的参数，但是设置之后就不运行了，就指教><

this.options = $.extend({
        autoplay: true,
        transitions: this.transitions,
        delay: 4000,
        pagination: true,
        controls: false,
        captions: false,
        width: null,
        height: null,
        onTransitionEnd: null
    }, opts);

突然发现了很有意思的地方，链接在这里我看到了参数的设置，居然给的是integer,简直惊呆了，要知道，我之前写的参数都是带px的，立马OK了有木有。
边做边写blog还是很带感的。不过我好像得了布局中就会死的病。
最近有点忙，暂时要暂停做这个了。转战PHP。我会很快回来的~

    原文作者：林奈木
    原文地址: https://segmentfault.com/a/1190000000489567
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞