如何使用jquery旋转鼠标滚轮上的元素
How to rotate element on mousewheel using jquery?
我想当我鼠标向上时,盒子无限旋转,鼠标向下也是但是当我做的时候它只是从20
旋转到-20
。我该怎么做呢?
$(window).bind('mousewheel', function(e) {
if (e.originalEvent.wheelDelta > 0) {
$(".box").animate({ rotate: 20 }, {
step: function(now, fx) {
$(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
$(this).css('-moz-transform', 'rotate(' + now + 'deg)');
$(this).css('transform', 'rotate(' + now + 'deg)');
}
});
} else {
$(".box").animate({ rotate: -20 }, {
step: function(now, fx){
$(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
$(this).css('-moz-transform', 'rotate(' + now + 'deg)');
$(this).css('transform', 'rotate(' + now + 'deg)');
}
});
}
});
您需要声明一个变量并在其中存储旋转值。在mousewheel
事件中改变它并将元素动画到目标值
var rotate = 0;
$(window).bind('mousewheel', function(e){
// Increase/decrease value of rotate
rotate += e.originalEvent.wheelDelta > 0 ? 20 : -20;
// Animate rotate of element
$(".box").stop().animate({rotate:rotate},{
step:function(now){
$(this).css({
'-webkit-transform':'rotate('+ now +'deg)',
'-moz-transform':'rotate('+ now +'deg)',
'transform':'rotate('+ now +'deg)'
});
}
});
});
var rotate = 0;
$(window).bind('mousewheel', function(e){
rotate += e.originalEvent.wheelDelta > 0 ? 20 : -20;
$(".box").stop().animate({rotate:rotate},{
step:function(now){
$(this).css({
'-webkit-transform':'rotate('+now+'deg)',
'-moz-transform':'rotate('+now+'deg)',
'transform':'rotate('+now+'deg)'
});
}
});
});
body {
padding: 10px 100px 10px 100px
}
.box {
width:100px;
height:100px;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
你可以在demo
相关文章:
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 将鼠标悬停在同级元素上的 jquery 上轻拂
- 将鼠标悬停在Angular JS中的一个元素上,并将Class添加到另一个元素中
- 如何在元素中处理鼠标事件,但不能在其子元素上处理
- 只要用户将鼠标悬停在jQuery中的某个元素上,就可以执行多次单击
- 单击其他元素或鼠标向上时隐藏输入框,但保留一次焦点
- 如果鼠标在元素上快速移动和关闭,则防止.hoop事件被垃圾邮件发送
- 为什么不是't html<对象>元素响应鼠标事件
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- 如果鼠标离开父对象,则隐藏元素
- 当鼠标悬停在iframe上时,如何在iframe之外的元素上触发类
- 如何在鼠标悬停时显示带有拉斐尔元素(圆、线)的上下文菜单
- 当鼠标也在触摸另一个元素时,d3.js鼠标悬停事件未被触发
- 从鼠标点(及更多)查询位置元素
- 如何添加效果,以便将鼠标悬停在 SVG 元素上使其变大
- 可缩放容器鼠标上的可拖动元素在创建时从辅助对象上浮动
- 绘制DOM元素:鼠标事件会被背景元素混淆
- Fetch元素鼠标当前指向的Chrome开发工具已启用
- 如何使元素鼠标不可点击,但可以通过javascript单击
- 获取元素鼠标在iframe中的HTML