首页 > 代码库 > jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示
jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=‘utf-8‘ />
<script src=http://www.mamicode.com/‘js/jquery.js‘></script>"pic">
<img src="http://www.mamicode.com/image/1.jpg" />
<img src="http://www.mamicode.com/image/2.jpg" />
<img src="http://www.mamicode.com/image/3.jpg" />
<img src="http://www.mamicode.com/image/4.jpg" />
<img src="http://www.mamicode.com/image/5.jpg" />
<img src="http://www.mamicode.com/image/6.jpg" />
<img src="http://www.mamicode.com/image/7.jpg" />
<img src="http://www.mamicode.com/image/8.jpg" />
<img src="http://www.mamicode.com/image/9.jpg" />
<img src="http://www.mamicode.com/image/10.jpg" />
<p></p>
</div>
</div>
<script>
$(function () {
var imgL = $(".pic img").size();
var deg = 360 / imgL;
var roY = 0, roX = -10;
var xN = 0, yN = 0;
var play = null;
$ (".pic img").each(function(i){
$(this).css({
"transform":"rotateY( " + i * deg + "deg) translateZ(200px)" });
$(this).attr(‘ondragstart‘, ‘return false‘);
});
$(document).mousedown(function (ev) {
var x_ = ev.clientX;
var y_ = ev.clientY;
clearInterval(play);
console.log(‘我按下了‘);
$(this).bind(‘mousemove‘, function (ev) {
/*获取当前鼠标的坐标*/
var x = ev.clientX;
var y = ev.clientY;
/*两次坐标之间的距离*/
xN = x - x_;
yN = y - y_;
roY += xN * 0.2;
roX -= yN * 0.1;
console.log(‘移动‘);
$(‘.pic‘).css({
transform: ‘perspective(800px) rotateX(‘ + roX + ‘deg) rotateY(‘ + roY + ‘deg)‘
});
/*之前的鼠标坐标*/
x_ = ev.clientX;
y_ = ev.clientY;
});
}).mouseup(function () {
$(this).unbind(‘mousemove‘);
var play = setInterval(function () {
xN *= 0.95;
yN *= 0.95;
if (Math.abs(xN) < 1 && Math.abs(yN) < 1) {
clearInterval(play);
}
roY += xN * 0.2;
roX -= yN * 0.1;
$(‘.pic‘).css({
transform: ‘perspective(800px) rotateX(‘ + roX + ‘deg) rotateY(‘ + roY + ‘deg)‘
});
}, 30);
});
});
</script>
</body>
</html>
原文出处：http://www.htmleaf.com/jQuery/list_1_5.html
jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。