jquery如何同时实现旋转,与局部放大

发布网友 发布时间：2022-04-26 02:09

我来回答

共6个回答

懂视网 时间：2022-05-12 11:33

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>

HTML结构

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

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

初始化插件

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

$('#cover3').CoverTresD();

配置参数

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

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

热心网友 时间：2022-05-12 08:41

旋转效果有2d旋转、3D旋转.你可以搜索下css3 Transform ，就可以实现
放大效果：可以通过jquery animate方法改变图片的width，height属性实现。如：$("p").animate({
width:"500px",height:"500px"
}, "normal");

热心网友 时间：2022-05-12 09:59

用css3吧，方便一点

热心网友 时间：2022-05-12 11:34

.a:hover{ transform: rotate(90deg) scale(3.0); transition: all 1s;}

热心网友 时间：2022-05-12 13:25

　　html代码：
<div id="idContainer"> </div>
<input id="idLeft" type="button" value="向左旋转" />
<input id="idRight" type="button" value="向右旋转" />
<input id="idVertical" type="button" value="垂直翻转" />
<input id="idHorizontal" type="button" value="水平翻转" />
<input id="idReset" type="button" value="重置" />
<input id="idSrc" type="text" value="images/2.jpg" />
<input id="idLoad" type="button" value="换图" />
　　jquery代码实现旋转,与局部放大：
var container = $$("idContainer"),src = "images/1.jpg",
options = {
onPreLoad: function(){ container.style.backgroundImage = "url('images/1.jpg')"; },
onLoad: function(){ container.style.backgroundImage = ""; },
onError: function(err){ container.style.backgroundImage = ""; alert(err); }
},
it = new ImageTrans( container, options );
it.load(src);
//垂直翻转
$$("idVertical").onclick = function(){ it.vertical(); }
//水平翻转
$$("idHorizontal").onclick = function(){ it.horizontal(); }
//左旋转
$$("idLeft").onclick = function(){ it.left(); }
//右旋转
$$("idRight").onclick = function(){ it.right(); }
//重置
$$("idReset").onclick = function(){ it.reset(); }
//换图
$$("idLoad").onclick = function(){ it.load( $$("idSrc").value ); }

热心网友 时间：2022-05-12 15:33

css3样式.。。。。。