转储插件翻盖书中间需要渐变

Question

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

$(#.turn)({渐变:真，加速:真})；

但是渐变并没有出现在翻盖书中。书的中间应该有一个梯度。此外，(翻盖书)中的一些类也缺失了。奇数类和偶数类分别在页的左侧和右侧也丢失。但是这些类对造型来说真的很重要。任何提示都能让转盘的翻盖书有反应。

实际上，我在turn.js插件代码中看到里面有一些渐变类正在被制作。在选项中，如您所见，我在插件中初始化渐变，但它不起作用。

note: using third release of turnjs

Answer 1

实际上，通常都缺少div (跨web的例子)，但是，为了添加渐变( div )，在页面的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;
}