如何使DIV振动或嗡嗡作响?(类似于iOS的移动/删除应用程序功能）

How do I make a DIV vibrate or buzz? (similar to the iOS move/delete app feature)

本文关键字：移动 iOS 删除 功能 应用程序 类似于 DIV 何使      更新时间：2023-09-26

我正在开发一个用户可以自定义的网站，我想让"vibrate/buzz"成为DOM的一个元素(在我的特定情况下，它是DIV(。我想获得类似于iOS上长按任何应用程序图标时发生的效果(所有图标都会抖动(。

在网上搜索我刚刚发现了这个jQuery库：http://www.dev4web.eu/projects/jquery.vibrate/

但我不确定我是否能够使用它获得良好的效果

关于如何实现这一点，有什么想法吗？

谢谢！

您也可以实现自己的动画，如下所示：

function shake(){
    $('#div').animate({
        'margin-left': '-=5px',
        'margin-right': '+=5px'
    }, 200, function() {
        $('#div').animate({
            'margin-left': '+=5px',
            'margin-right': '-=5px'
        }, 200, function() {
            //and so on...
        });
    });
}

这里有一些Javascript可以完成您想要的任务。

var times = 10;
var duration = 200;
for (var i = 0; i < times; i++)
    $('div#shake-it').animate({
        left: (i % 2 === 0 ? "-" : "+") + "=50"
    }, duration);

与许多其他解决方案一样，它需要jQuery库。然而，它不需要任何其他插件。

我最近在jQuery sortable之上构建了一些旨在模仿iOS摆动效果的东西。你可以在tastemakerx.com上看到它的直播，我用它来增强收藏排序功能。

这是我开始用的小提琴：http://jsfiddle.net/jozecuervo/fv8vR/

这是CSS：

@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {-webkit-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-webkit-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-webkit-transform: translateY(-1px); }
}
@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {-moz-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-moz-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-moz-transform: translateY(-1px); }  
}
@-o-keyframes shake {
     0%, 100% {-o-transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {-o-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-o-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-o-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-o-transform: translateY(-1px); }  
}
@keyframes shake {
    0%, 100% {transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {transform: translateY(1px);}    
    20%, 40%, 60%, 80% {transform: translateY(-1px); }  
}
.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;    
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transition-timing-function:linear;    
}

使用jquery的插件：

$('#loginL').effect('shake');

"jQuery ClassyWiggle允许您模拟iPhone上按住图标时的摆动效果。">

查看Marius Stanciu的Classy Wiggle JQuery插件。

您可以使用jQuery Rumble这样的插件：http://jackrugile.com/jrumble/

您可以使用animate创建自己的。举个例子(演示如何摇动div(：

<div id="div">
</div>
<input type="button" id="buzz" />
$("#buzz").click(function() {
   $("#div").animate({
    left: "20px",
   }, 50);
   $("#div").animate({
    left: "-20px",
   }, 50);
   $("#div").animate({
    left: "20px",
   },50);
});

http://jsfiddle.net/VRzc9/1/

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$('#shakediv').effect('shake');

抖动效果是在jqueryui中构建的，导入并使用

遵循以下示例

<div class="buzz">
    <!-- Your Div Content Here -->
</div>

<script>
$(docuement).ready(function(){
   buzzMe();
   //or
   buzzMeFor(0)
})
function buzzMe()
{
   $('buzz').css('margin-left','-2');
   delay(500);
   $('buzz').css('margin-left','2');
   delay(500);
   buzzMe()
}
//Or use this function for Specific times
//Call & Pass Arguments 0
function buzzMeFor(count)
{
  count++;
  $('buzz').css('margin-left','-2');
  delay(500);
  $('buzz').css('margin-left','2');
  delay(500);
  if(count!=20)    
    buzzMe(count)    
}
</script>

只使用jQuery的animate函数，以下操作就完成了：

function recursiveShake(jQelement, pixel, counter) {
  if (counter > 0) {
    jQelement.animate({
      'margin-left': '+='.concat(pixel, 'px')}, 
      30, 
      recursiveShake(jQelement, -pixel, counter - 1)
    );
  }
}
// (counter must be even to avoid any shift)

相关文章：