1

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

$('#magazine').turn({梯度：真，加速度：真});

但是渐变没有出现在翻书中。书的中间应该有渐变。此外，还有一些来自页面 div 的类（翻书的页面）也丢失了。页面左侧和右侧的奇数和偶数类也分别丢失。但这些类对于造型非常重要。以及任何使turnjs的翻书响应的提示..

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

note: using third release of turnjs
4

2 回答 2

1

实际上，一般情况下都缺少 Divs（示例跨网络），但是，为了在页面的 div 内添加带有名为 that 的类的渐变，我将跳过我正在使用的整个结构，它工作得很好：

<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%);
}
于 2014-03-03T11:05:52.077 回答
1

这就是我正在使用的：

#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;
}
于 2016-12-06T17:27:00.453 回答