Heim >Web-Frontend >H5-Tutorial >jQuery超酷3D包装盒封面旋转特效

jQuery超酷3D包装盒封面旋转特效

PHP中文网
PHP中文网Original
2016-05-17 09:07:291920Durchsuche

jQuery超酷3D包装盒封面旋转特效

简要教程

3DCoverjQuery是一款效果非常炫酷的3D包装盒封面旋转jQuery特效插件。通过这个插件,你可以很轻易的将图片制作为DVD,XBOX,游戏和书本的封面,并且可以旋转封面来查看它的正面和反面。

使用方法

在页面中引入jQuery和bootstrap.min.css以及Cover3D.css和Cover3D.js文件。

<!-- Bootstrap and JQuery -->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-2.1.4.min.js"> </script>
     
<!-- Plugin -->
<link rel="stylesheet" href="Cover3D.css">
<script src="Cover3D.js"></script>

1006.jpg

 HTML结构

该封面特效的HTML结构使用一个dc6dce4a544fdca2df29d5ac0ea9906b来包裹一张图片。

<div id="cover3">
  <img src="img/avengers-dvd-cover-1.jpg"/>
</div>

初始化插件

在页面DOM元素加载完毕之后,可以通过CoverTresD()方法来初始化该封面特效插件。

$(&#39;#cover3&#39;).CoverTresD();

 配置参数

该封面特效只有一个可配置的参数color。它是封面的边框颜色。

{ color:"#FF0" /*Border Color */}

以上就是jQuery超酷3D包装盒封面旋转特效的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:HTML5 CANVAS:绘制图片Nächster Artikel:SVG基础|SVG TSPAN 元素