html5 jquery魔方,基于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 = $('
'
+'
'+_defaults.front+''
+'
'+_defaults.back+''
+'
'+_defaults.left+''
+'
'+_defaults.right+''
+'
'+_defaults.top+''
+'
'+_defaults.bottom+''
+''
+''
+''
+''
+''
+''
+''
);
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);
html5 jquery魔方,基于jquery的魔方插件相关推荐
- 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
- jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
- html5 苹果 dock,基于JQuery模仿苹果桌面的Dock效果(初级版)
新的一天新的开始,今天要分享的是用JQuery模仿苹果操作系统桌面的Dock效果,之所以称之为初级版,是因为其中还有一些bug,显示效果并不稳定.由于时间的关系,这些bug还没有修复,希望高手们不吝赐 ...
- jQuery:收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
- jQuery使用总结 - jQuery组成和主要功能 1/4
Core jQuery 核心关注的两件事情:选择页面中元素(Selector).对元素执行操作(Events Effects CSS) jQuery UI 基于JQuery核心构建的界面库,主要归为如 ...
- html实现平面地图效果,基于Jquery和html5的7款个性化地图插件
1.HTML5世界地图 划分世界区域并显示国家名 这是一款基于HTML5的世界地图应用,它的特点是可以将地图中的各个国家区域进行划分,鼠标滑过时即可显示该区域对应的国家名称,你也可以对弹出的标签进行自 ...
- html日期选择器日历并记录事件,8个基于jQuery和HTML5的日历时钟插件
jQuery是一个当前依然非常流行的Web前端JavaScript框架,这次我们要分享的就是基于jQuery的日历时钟插件,部分日历插件还是基于HTML5技术实现的,因此动画效果都还不错.有兴趣的朋友 ...
- php html5日期插件,基于jQuery和HTML5的日历时钟插件 的图文详解
jQuery是一个当前依然非常流行的Web前端JavaScript框架,这次我们要分享的就是基于jQuery的日历时钟插件,部分日历插件还是基于HTML5技术实现的,因此动画效果都还不错.有兴趣的朋友 ...
- html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件.通过该插件可以为Bootstrap的原生Panel面板增加编辑标题,最大化,最小化,面板拖动关闭面板等功 ...
最新文章
- Linux 创建、删除、修改 文件夹 文件命令(笔记)
- 基于Springboot实现仿百度网盘开发
- SQLYog快捷键大全
- (1) redis windows安装
- 【Python】pyinstaller安装失败的解决办法
- 用浏览器管理 Docker
- 【编程珠玑】第六章 程序性能分析
- mysql rpm 日志_mysql5.1.48-1的src.rpm包安装日志(一)
- echarts 关系图 力引导布局
- vivos9e防抖功能设置教程
- 苹果手机在升级系统时一直显示无服务器,苹果手机一直显示检测更新,怎么办?...
- 阿里安全人机行为识别比赛 前五名队伍分享
- Java基础知识(五) 字符串与数组
- iOS_44_导入第3方APP内的文件_UTI
- 树莓派3+安装centos
- Polaris Office for Mac(经典办公套件)
- jump-game-ii
- java_Annotation
- Webpack 安装css-loader和style-loader报错
- codevs——T1219 骑士游历
热门文章
- C++打开文件夹中的多个文件并计算文件中数据的平均值
- python 图片锐化_Python图像处理介绍--图像模糊与锐化
- springboot整合thymeleaf启动错误
- Python——matplotlib中的乱七八糟(一)【注释,图例,tick能见度,移动坐标轴】
- 超详细!图论最短路算法与极简c++代码(配题目)
- C/C++软件工程师常见面试题(updating)
- idea 解决java文件导入java 文件灰色右下角橙色java图标显示
- ArcGIS教程:创建面积图
- 无法使用此产品的安装源,请确认安装源存在,并且您可以访问它
- SWPU新生赛2021 Crypto部分WriteUp