Question

在turnjs插件渐变中，默认情况下始终设置为true。

$（'＃magazine'）。turn（{gradients：true，acceleration：true}）;

但是翻书并没有出现渐变。书中间应该有一个渐变。而且还有一些来自div页面（翻书的页面）的类也缺失了。页面左侧和右侧的奇数和偶数类也相应缺失。但这些课程对于造型非常重要。任何关于翻转翻书的提示都会有所回应..

实际上我在turn.js中看到插件代码形式里面有一些渐变类正在制作中。并且在您看到的选项中初始化插件中的gradeints但它不起作用..

note: using third release of turnjs

Answer 1

确实一般都缺少Divs（例子穿过网页），但是，为了在页面的div中添加渐变，只有div命名的类，我将会超过我正在使用的整个结构工作得很好：

<div class="zoom-viewport">
    <div class="container">
       <div id="flipbook">
          <div class="hard"><div class="gradient"></div></div> 
          <div class="normalPage"><div class="gradient"></div><img src="pages/00.jpg" /></div> 
       </div>
    </div>
</div>

和渐变的css将是：

#flipbook .even .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -o-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
}

#flipbook .odd .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -ms-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -o-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
}

Answer 2

这就是我正在使用的：

#magazine .page:not(.hard).odd {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
    box-shadow: inset 0 0 5px #666;
    border-left: 1px solid #ccc;
}

#magazine .page:not(.hard).even {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
    box-shadow: inset 0 0 5px #666;
}

在turnjs插件的翻书中间需要渐变

2 个答案: