一、效果图。
二、html示例。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>基于jquery的3D方块插件</title>
<link rel="icon" href="../../img/favicon.ico" type="image/ico">
<script src="../../jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.cube.1.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
//魔方设置
var options = {
size:100, //魔方大小
fontSize:20, //字体大小
fontColor:"#fff", //字体颜色
outBackgroundColor:"#333", //外壳背景色
inBackgroundColor:"#FF0000", //内壳背景色
front:"前", //前外壳内文字
back:"后", //后外壳内文字
left:"左", //左外壳内文字
right:"右", //右外壳内文字
top:"上", //上外壳内文字
bottom:"下" //下外壳内文字
};
$('#wrap').cube(options,function(flag){
var fun = {
front:function(){
alert("前面被点击了");
},
back:function(){
alert("后面被点击了");
},
left:function(){
alert("左面被点击了");
},
right:function(){
alert("右面被点击了");
},
top:function(){
alert("上面被点击了");
},
bottom:function(){
alert("下面被点击了");
}
};
fun[flag]();
});
});
</script>
<style type="text/css">
body{
background-color: #000000;
overflow: hidden;
}
</style>
<body>
<div style="width: 100%;position: absolute;top:30%;z-index: 9999;">
<div id="wrap" style="width:100px;height:100px;margin: 0 auto;"></div>
</div>
</body>
</html>
三、jquery源码。
/**
* @Author: zql
* @Version:1.0
* @Date:2019-05-29
* Licensed under the MIT license
*/
"use strict";//严格模式
;(function($){
$.fn.cube = function(options,callback){
//默认设置
var _defaults = {
size:200, //魔方大小
fontSize:30, //字体大小
fontColor:"#fff", //字体颜色
outBackgroundColor:"#333", //外壳背景色
inBackgroundColor:"#999", //内壳背景色
front:"前面", //前外壳内文字
back:"后面", //后外壳内文字
left:"左面", //左外壳内文字
right:"右面", //右外壳内文字
top:"上面", //上外壳内文字
bottom:"下面" //下外壳内文字
};
if(options){
for(var key in _defaults){
if(options[key]){
_defaults[key]=options[key];
}
}
}
var _isRun = true;//魔方是否旋转
var _cube = $('<div class="zql-cube">'
+'<div class="zql-out-front">'+_defaults.front+'</div>'
+'<div class="zql-out-back">'+_defaults.back+'</div>'
+'<div class="zql-out-left">'+_defaults.left+'</div>'
+'<div class="zql-out-right">'+_defaults.right+'</div>'
+'<div class="zql-out-top">'+_defaults.top+'</div>'
+'<div class="zql-out-bottom">'+_defaults.bottom+'</div>'
+'<span class="zql-in-front"></span>'
+'<span class="zql-in-back"></span>'
+'<span class="zql-in-left"></span>'
+'<span class="zql-in-right"></span>'
+'<span class="zql-in-top"></span>'
+'<span class="zql-in-bottom"></span>'
+'</div>'
);
this.html(_cube);
var _cubeStyle = {
"width":""+_defaults.size+"px",
"height":""+_defaults.size+"px",
"position":"relative",
"color":_defaults.fontColor,
"font-size":""+_defaults.fontSize+"px",
"font-weight":"bold",
"text-align":"center",
"line-height":""+_defaults.size+"px",
"transform-style":"preserve-3d", //默认flat 2D，要设置成3D
};
_cube.css(_cubeStyle);
_cube.find('div').each(function(){
var divStyle = {
"width":"100%",
"height":"100%",
"border":"1px solid #fff",
"position":"absolute",
"cursor":"pointer",
"background-color":_defaults.outBackgroundColor,
"opacity":".6",
"transition":"transform 0.4s ease-in" //缓慢位移
};
$(this).css(divStyle);
//外壳的点击事件
$(this).click(function(){
var classStr = $(this).attr("class");
var flag = classStr.replace("zql-out-","");
callback(flag);
});
});
_cube.find('span').each(function(){
var spanStyle = {
"display":"block",
"width":""+_defaults.size/2+"px",
"height":""+_defaults.size/2+"px",
"border":"1px solid black",
"background-color":_defaults.inBackgroundColor,
"position":"absolute",
"top":""+_defaults.size/4+"px",
"left":""+_defaults.size/4+"px"
};
$(this).css(spanStyle);
});
_cube.find('.zql-out-front').css({transform:'translateZ('+_defaults.size/2+'px)'});
_cube.find('.zql-out-back').css({transform:'translateZ(-'+_defaults.size/2+'px) rotateY(180deg)'});
_cube.find('.zql-out-left').css({transform:'translateX(-'+_defaults.size/2+'px) rotateY(-90deg)'});
_cube.find('.zql-out-right').css({transform:'translateX('+_defaults.size/2+'px) rotateY(90deg)'});
_cube.find('.zql-out-top').css({transform:'translateY(-'+_defaults.size/2+'px) rotateX(90deg)'});
_cube.find('.zql-out-bottom').css({transform:'translateY('+_defaults.size/2+'px) rotateX(-90deg)'});
_cube.find('.zql-in-front').css({transform:'translateZ('+_defaults.size/4+'px)'});
_cube.find('.zql-in-back').css({transform:'translateZ(-'+_defaults.size/4+'px) rotateY(180deg)'});
_cube.find('.zql-in-left').css({transform:'translateX(-'+_defaults.size/4+'px) rotateY(-90deg)'});
_cube.find('.zql-in-right').css({transform:'translateX('+_defaults.size/4+'px) rotateY(90deg)'});
_cube.find('.zql-in-top').css({transform:'translateY(-'+_defaults.size/4+'px) rotateX(90deg)'});
_cube.find('.zql-in-bottom').css({transform:'translateY('+_defaults.size/4+'px) rotateX(-90deg)'});
//鼠标经过时
this.mouseover(stop);
//鼠标离开时
this.mouseout(restart);
//鼠标点击时
this.click(restart);
//重启动画事件
function restart(){
//如果在旋转中就不执行重启动画事件
if(_isRun){
return;
}
_cube.find('.zql-out-front').css({transform:'translateZ('+_defaults.size/2+'px)'});
_cube.find('.zql-out-back').css({transform:'translateZ(-'+_defaults.size/2+'px) rotateY(180deg)'});
_cube.find('.zql-out-left').css({transform:'translateX(-'+_defaults.size/2+'px) rotateY(-90deg)'});
_cube.find('.zql-out-right').css({transform:'translateX('+_defaults.size/2+'px) rotateY(90deg)'});
_cube.find('.zql-out-top').css({transform:'translateY(-'+_defaults.size/2+'px) rotateX(90deg)'});
_cube.find('.zql-out-bottom').css({transform:'translateY('+_defaults.size/2+'px) rotateX(-90deg)'});
_cycle = setInterval(rotating,100);
_isRun = true;//设置状态为开启状态
}
//暂停动画事件
function stop(){
//如果不在旋转中就不执行暂停
if(!_isRun){
return;
}
_cube.find('.zql-out-front').css({transform:'translateZ('+_defaults.size+'px)'});
_cube.find('.zql-out-back').css({transform:'translateZ(-'+_defaults.size+'px) rotateY(180deg)'});
_cube.find('.zql-out-left').css({transform:'translateX(-'+_defaults.size+'px) rotateY(-90deg)'});
_cube.find('.zql-out-right').css({transform:'translateX('+_defaults.size+'px) rotateY(90deg)'});
_cube.find('.zql-out-top').css({transform:'translateY(-'+_defaults.size+'px) rotateX(90deg)'});
_cube.find('.zql-out-bottom').css({transform:'translateY('+_defaults.size+'px) rotateX(-90deg)'});
clearInterval(_cycle);
_isRun = false;//设置为不在旋转状态
}
var _deg = 0;
//旋转动画方法
function rotating(){
_cube.css({"transform":"rotateX("+_deg+"deg) rotateY("+_deg+"deg)"});
_deg += 2;//旋转度数
if(_deg==360){
_deg = 0;
}
}
var _cycle = setInterval(rotating,100);
};
})(jQuery);
扫一扫
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
