原生JS、CSS实现的转盘效果（目前仅支持webkit）
这是一个原生JS、CSS实现的转盘效果（题目在这：http://www.cnblogs.com/arfeizhang/p/turntable.html），花了半个小时左右，准备睡觉，所以先贴一段代码，预计会抽空优化，让它在手机上也能运行；另外，如果看代码的时候有什么问题，请留言。。。
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转盘</title>
<style>
.holder {
width: 550px;
display: block;
margin: 10px auto;
padding: 20px;
border: 3px solid black;
border-radius: 10px;
position: relative;
}
.rotate-pointer {
display: block;
position: absolute;
width: 521px;
line-height: 10px;
top: 270.5px;
left: 37px;
-webkit-transition:all 4s ease-in-out;
}
#rules {
width: 260.5px;
height: 10px;
display: inline-block;
background-color: black;
}
</style>
</head> <body>
<div class="holder">
<img src="https://images0.cnblogs.com/i/636015/201406/151737329993303.jpg" alt="">
<div id="pointer" class="rotate-pointer">
<div id="rules"></div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
var table = document.getElementsByClassName('holder')[0],
tablePointer = document.getElementById('pointer'),
getRandom = function(min, max) {
max = max || 1000;
min = min || 0;
return Math.floor(Math.random() * (max - min) + min);
},
degree = 0,
min_circle_times = 2,
max_circle_times = 6,
translate = function() {
degree += getRandom(min_circle_times * 360, max_circle_times * 360); requestAnimationFrame(function() {
tablePointer.style.webkitTransform = 'rotate(' + degree + 'deg)';
});
};
table.onclick = translate; };
</script>
</body> </html>
昨天放出上述内容后，收到题目博主的评论，发现好像有些地方不符合需求，恩，又再试了一个版本，这个版本目前是支持手机的，不过还是只能在webkit内核下使用哦，源码如下：
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转盘</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body {
margin:0px;
}
.holder {
text-align: center;
overflow: hidden;
display: block;
margin: 10px auto;
border: 3px solid black;
border-radius: 10px;
position: relative;
}
#table {
cursor: pointer;
display: inline-block;
max-width: 521px;
width: 100%;
-webkit-transition:all 4s ease-in-out;
}
</style>
</head> <body>
<div class="holder">
<img id="table" src="https://images0.cnblogs.com/i/631009/201406/181334125825974.png" alt="">
</div>
<script type="text/javascript">
window.onload = function() {
var degreeCount = 0,
table = document.getElementById('table'),
table_rect = table.getBoundingClientRect(),
circle_center = {
x: table_rect.width / 2 + table_rect.left,
y: table_rect.height / 2 + table_rect.top
},
min_circle_times = 2,
max_circle_times = 6,
getRandom = function(min, max) {
max = max || 1000;
min = min || 0;
return Math.floor(Math.random() * (max - min) + min);
}, // 根据两点求角度
getDegreeByPoint = function(start, enb) {
var tan1 = (start.y - circle_center.y) / (start.x - circle_center.x),
degree1 = Math.round(360 * Math.atan(tan1) / Math.PI),
tan2 = (enb.y - circle_center.y) / (enb.x - circle_center.x),
degree2 = Math.round(360 * Math.atan(tan2) / Math.PI);
return -(degree1 - degree2);
},
rotate_rings = 0,
rotate = function(degree) {
degree = degree - 0;
if (Number.isNaN(degree)) {
degree = degreeCount += getRandom(min_circle_times * 360, max_circle_times * 360);
} else {
degree += degreeCount;
}
requestAnimationFrame(function() {
table.style.webkitTransform = 'rotate(' + degree + 'deg)';
});
}; // 事件监听器
var InputListener = function(tableId) {
this.tableId = tableId;
this.events = {}; if (window.navigator.msPointerEnabled) {
//Internet Explorer 10 style
this.eventTouchstart = "MSPointerDown";
this.eventTouchmove = "MSPointerMove";
this.eventTouchend = "MSPointerUp";
} else {
this.eventTouchstart = "touchstart";
this.eventTouchmove = "touchmove";
this.eventTouchend = "touchend";
} this._beginListen();
};
InputListener.prototype = {
on: function(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
},
emit: function(event, data) {
var callbacks = this.events[event];
if (callbacks) {
callbacks.forEach(function(callback) {
callback(data);
});
}
},
_start: function(event) {
this.emit("start", event);
},
_rotate: function(event) {
this.emit("rotate", event);
},
_stop: function(event) {
this.emit("stop", event);
},
_celebrate: function(event) {
this.emit("celebrate", event);
},
_click: function(event) {
this.emit("click", event);
},
_getPointByEvent: function(event, toucherName) {
toucherName = toucherName || 'touches';
var point = null;
if (window.navigator.msPointerEnabled) {
point = {
x: event.pageX,
y: event.pageY,
time: Date.now()
};
} else {
point = {
x: event[toucherName][0].clientX,
y: event[toucherName][0].clientY,
time: Date.now()
};
}
return point;
},
_beginListen: function() {
var self = this,
table = document.getElementById(this.tableId),
startPoint = null,
movePath = []; // Respond to direction keys
table.addEventListener('click', function(event) {
self._click();
}); table.addEventListener(this.eventTouchstart, function(event) {
if ((!window.navigator.msPointerEnabled && event.touches.length > 1) ||
event.targetTouches > 1) {
return; // Ignore if touching with more than 1 finger
}
startPoint = self._getPointByEvent(event); movePath = [startPoint];
self._start({
start: startPoint
}); event.preventDefault();
}); table.addEventListener(this.eventTouchmove, function(event) {
var endpoint = self._getPointByEvent(event);
if ( !! endpoint) {
movePath.push(endpoint);
self._rotate({
degree: getDegreeByPoint(startPoint, endpoint),
start: startPoint,
end: endpoint
});
}
event.preventDefault();
}); table.addEventListener(this.eventTouchend, function(event) {
if ((!window.navigator.msPointerEnabled && event.touches.length > 0) ||
event.targetTouches > 0) {
return; // Ignore if still touching with one or more fingers
}
var endpoint = self._getPointByEvent(event, 'changedTouches'),
countToCal = 3,
len = movePath.length; self._stop({
degree: getDegreeByPoint(startPoint, endpoint),
start: startPoint,
end: endpoint
});
movePath.push(endpoint);
if (len <= 3) {
self._click({
start: startPoint
});
} else {
var p1 = movePath[len - 1],
p2 = movePath[len - 1 - 3],
// 转动的弧度
degree = getDegreeByPoint(p2, p1),
time = p1.time - p2.time,
speed = degree / time * 1000,
// 速度转换为期望的周数，4指的是CSS动画时间
expectDegree = (speed * 4) + min_circle_times;
self._celebrate({
start: p2,
end: p1,
degree: expectDegree
});
}
event.preventDefault();
});
}
}; var listener = new InputListener('table');
listener.on('start', function(e) {
table.style.webkitTransition = 'all 0s';
}); listener.on('rotate', function(e) {
console.log(e.degree);
rotate(e.degree);
}); listener.on('stop', function(e) {
degreeCount += e.degree;
//degreeCount = degreeCount % 360;
table.style.webkitTransition = 'all 4s ease-in-out';
}); listener.on('celebrate', function(e) {
rotate(e.degree);
}); listener.on('click', rotate);
};
</script>
</body> </html>
一个可以在线运行的地址：http://www.w3cfuns.com/home.php?mod=space&uid=5446932&do=blog&quickforward=1&id=5398670
原生JS、CSS实现的转盘效果（目前仅支持webkit）的更多相关文章
- 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- 使用原生js 实现点击消失效果
JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- 利用tween，使用原生js实现模块回弹动画效果
最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...
- 原生js+css实现重力模拟弹跳系统的登录页面
今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...
- 原生JS实现幻灯片轮播效果
在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
随机推荐
- SSIS WITH VERTICA的注意事项总结
项目中使用到SSIS访问vertica,以下是我使用中总结的一些注意事项: 1.vertica对约束的处理方式与之前的DBMS是不同的. 以上的截图说明,在使用ado.net provider连接ve ...
- A + B Problem II
之前总是在查阅别人的文档,看着其他人的博客,自己心里总有一份冲动,想记录一下自己学习的经历.学习算法有一段时间了,于是想从算法开始自己的博客生涯O(∩_∩)O~~ 今天在网上看了一道大数相加(高精度) ...
- Linux 系统常用命令汇总（七） 安全设置
安全设置 分类 命令 选项 注解 安全策略 selinux setenforce number(0,1) 设置selinux状态,0关闭,1开启 getenforce 显示当前selinux状态,e ...
- 【读书笔记《Android游戏编程之从零开始》】6.Android 游戏开发常用的系统控件（TabHost、ListView）
3.9 TabSpec与TabHost TabHost类官方文档地址:http://developer.android.com/reference/android/widget/TabHost.htm ...
- T-SQL 语句创建Database的SQL mirroring关系
1 证书部分:principle 和 secondary 端执行同样操作,更改相应name即可 USE master; --1.1 Create the database Master Key, if ...
- LoadRunner支持的IE版本
LoadRunner支持的IE版本: 8.0 最高ie68.1 最高ie69.0 最高ie79.5 最高ie811.0 最高ie9( win7 32位+LR11+IE10可用,但win7 64位+LR ...
- esc安装数据库 sqlserver mssql
在服务器里面设置虚拟内存为:2G以上就可以安装了
- 解说mysql之binlog日志以及利用binlog日志恢复数据
众所周知,binlog日志对于mysql数据库来说是十分重要的.在数据丢失的紧急情况下,我们往往会想到用binlog日志功能进行数据恢复(定时全备份+binlog日志恢复增量数据部分),化险为夷! 废 ...
- 纯CSS3制作皮卡丘动画壁纸
前言 明天就放假了,趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以 ...
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...