如何用JQuery实现指针动态旋转

qq_38383586 2017-04-19 04:55:42

写了一个指针，表盘是图片，指针一开始指向数值500，指向0时，旋转-220度，请问怎么能让指针随数值的改变而改变

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.charta{
width: 216px;
height: 218px;
margin-top: 62px;
background: url(img/999_06.png) no-repeat;
background-size: 100% 100%;
margin-left: 5px;
}
.needlea {
position: absolute;
top: 172px;
left: 114px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}
.screw {
position: absolute;
top: -13px;
left: -13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 26px;
height: 26px;
background: #ebe7e8;
border-radius: 13px;
box-shadow: inset -1px 1px 1px white, inset 1px -1px 1px rgba(0, 0, 0, 0.25), -2px 2px 6px rgba(0, 0, 0, 0.25), 15px 5px 10px rgba(8, 42, 119, 0.25);
-webkit-transform: translate3d(0, 0, 2);
-moz-transform: translate3d(0, 0, 2);
-ms-transform: translate3d(0, 0, 2);
-o-transform: translate3d(0, 0, 2);
transform: translate3d(0, 0, 2);
z-index: 2;
}

.after {
content: '\20';
position: absolute;
top: -70px;
left: -6px;
width: 2px;
border-style: solid;
border-width: 0 6px 70px 6px;
border-color: transparent transparent #fff transparent;
box-shadow: 12px 4px 10px rgba(8, 42, 119, 0.2);
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
}
</style>
</head>
<body style="background:#000;">
<div class="charta">
<div class="needlea">
<div class="screw screwa"></div>
<div class="after"></div>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>

</body>
</html>

...全文

234 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

weixin_43591420 2018-11-03

打赏
举报

完全看不懂啊

Go 旅城通票 2017-04-19

打赏
举报

jQuery.Rotate插件，配置animateTo就行了 http://bbs.csdn.net/topics/392157080

天际的海浪 2017-04-19

打赏
举报

function rotate(n) { var t = 45-220*(500-n)/500; document.querySelector(".needlea").style.webkitTransform = "rotate("+t+"deg)"; document.querySelector(".needlea").style.mozTransform = "rotate("+t+"deg)"; document.querySelector(".needlea").style.msTransform = "rotate("+t+"deg)"; document.querySelector(".needlea").style.oTransform = "rotate("+t+"deg)"; document.querySelector(".needlea").style.transform = "rotate("+t+"deg)"; } rotate(400);

functionsub 2017-04-19

打赏
举报

.needlea {
  position: absolute;
  top: 172px;
  left: 114px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 1;
  transition:all 0.2s; // 加个这个，意思是变换时间持续0.2S，兼容代码自己写一下
}

然后JS更改样式：


setInterval(function(){
    var x = -Math.random()*180;$('.needlea').css('transform','rotate('+x+'deg)');
},100)

我这里是100毫秒重新设置一个值，具体要怎么设置，你自己写一下吧。

functionsub 2017-04-19

打赏
举报

- -看了下代码，你好像只是想加上动态效果，那就给 needlea加上样式 transition: all 0.2s;就好了呀。每次重新设置rotate的时候就有动画效果了。

functionsub 2017-04-19

打赏
举报

css3 transform roate 属性，自己了解一下吧。剩下的就是角度的计算，半盘400，那整盘800，自己算一下就行啦。默认指针指向0，roate也为0，然后变500，指向500/800*360，重新设置指针样式transform:roate(225deg); 不晓得这样说你理解没。。

jQuery圆形旋转导航是一款带箭头指针的jquery旋转导航特效。 jQuery圆形旋转导航演示图：

jQuery html5旋转制作带指针转动的圆形时钟代码

课程目标什么是jQuery 是一个JavaScript的函数库 jQuery是一个轻量级的JavaScript库浏览器兼容比较好 jQuery可以简化JavaScript代码适用人群Java初级开发人员，JavaScript初学者，web前端开发人员课程简介课程目标：学习jQuery 可以实现Web系统的后台前端界面开发以及企业级项目前端界面开发。适合对象：适合希望能够快速开发Web系统后台前端界面或企业级开发前端界面学习收益：jQuery 技术概念jQuery选择器的使用jQuery链式语法使用jQuery 代码优化设计jQuery动画

jQuery制作一个指针会根据速度进行旋转的汽车车速仪表盘效果

摘要:脚本资源,jQuery,artZoom,图片缩放,图片旋转　artZoom -更快的微博贴图旋转、图片缩放代码，就像新浪微博、腾讯微博内的贴图一样，默认状态下显示缩略图，点击后显示出大图，并在图片左上角显示旋转控制按钮，...

JavaScript

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章