小编use*_*062的帖子

使用transform:scale进行滚动时的振动屏幕

我希望我的标题有一个缩小效果,加载放大的内容,以及滚动它缩小.

我所做的是通过transform:scale(1.4)增加大小,滚动时我从scrollTop和header height计算一个百分比,然后我将它乘以0.4.问题是在滚动时屏幕开始振动,刻度不平滑.你知道我的代码有什么问题吗?或者你能告诉我实现这个目的的最佳做法是什么?

jQuery(document).ready(function(){
    function zoom_out() {
        var page_header_height = jQuery('#page-header-custom').outerHeight();
        var scroll_top = jQuery(window).scrollTop();
        var zoom_multiplier = 0.4;
        var multiplier = (zoom_multiplier*(1-((scroll_top-jQuery('#page-header-custom').offset().top)/page_header_height))) > 1 ? 1 : (zoom_multiplier*(1-((scroll_top-jQuery('#page-header-custom').offset().top)/page_header_height)));

        if(multiplier <= 1) {
            jQuery('#page-header-inner').stop(true, true).transition({ scale: 1/(1+multiplier), translate: '0, -50%'  });

            jQuery('#page-header-custom').stop(true, true).transition({
                scale: 1+multiplier
            });
        }
    }

    zoom_out();

    jQuery(window).on('scroll', function(){
        zoom_out();
    });
});
Run Code Online (Sandbox Code Playgroud)

我创建了一个JSFiddle来实现它.

javascript jquery html5 css3 css-transforms

10
推荐指数
1
解决办法
740
查看次数

CSS等高柱

我想在我的css表中使用百分比.不幸的是,它对我不起作用.

这段代码出了什么问题?我应该使用flexbox而不是table吗?

我想用表,因为我想要相同的高度列.

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}
Run Code Online (Sandbox Code Playgroud)
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

html css css3 css-tables flexbox

5
推荐指数
2
解决办法
8740
查看次数

如何使侧边栏与内容div具有相同的高度?

代码如下:

(CSS)

#container {
    border:1px dashed #000;
    overflow:hidden;
}
#content, #sidebar {
    float:left;
    width:50%;
}
#content {
    background:yellow;
}

#sidebar {
    background:grey;
}

#sidebar {
    height:100%;
}
Run Code Online (Sandbox Code Playgroud)

(HTML)

<div id="container">
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
    </div>
    <div id="sidebar">
        <p>Few words</p>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我想看到一个#sidebar高度相同的#contentdiv,就像div一样,是否有可能没有绝对位置?在线版:http://jsfiddle.net/yJbUW/

css height

3
推荐指数
1
解决办法
2万
查看次数

在Bootstrap 3中放大图像

如何在bootstrap 3中放大图像?

通过添加.img响应类,可以使Bootstrap 3中的图像响应友好.这适用于max-width:100%; 和身高:汽车; 到图像,以便它很好地缩放到父元素.

使用以下代码,图像可以很好地缩小,但是在较大的屏幕上不能获得父div的大小.

<div class="row">
  <div class="col-md-5" style="background:yellow">
        <div class="image-container" style="background:green">
        <img src="http://placehold.it/350x150" class="img-responsive">
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

怎么做?演示:http://www.bootply.com/8uXBxX8Qjy

image css3 responsive-design twitter-bootstrap twitter-bootstrap-3

2
推荐指数
1
解决办法
3578
查看次数

如何为WooCommerce订单页面(管理员)添加自定义字段?

我想在WooCommerce/Wordpress中为订单添加一些输入字段.这些字段仅在管理页面上可见.怎么做?和页面/帖子一样吗?

对于上面的帖子类型,我使用了add_post_meta.它是最好的方式,还是订单字段的钩子?

wordpress woocommerce

1
推荐指数
1
解决办法
6842
查看次数