使用jQuery雷达扫描效果 [英] Radar scanner effect using jquery

问题描述

我试图找出如何创建一个使用jQuery和CSS雷达扫描的效果可能的解决方案。本质上，一个半透明的三角形将周围的div的中点旋转。这可能与jQuery或者我应该采取一些其他的方式？我preFER不使用GIF动画。

I'm trying to figure out a possible solution on how to create a radar scanner effect using jquery and css. Essentially, a semi-transparent triangle would rotate around the middle point of a div. Is this possible with jquery or should I resort to some other means? I prefer to not use animated gifs.

推荐答案

现场演示

LIVE DEMO

（是 DOTS 演示： http://jsbin.com/AMag/2/edit）

<div id="radar">
    <div id="rad"></div>
</div>

CSS：

#radar{
  position:relative;
  width:321px;
  height:321px;
  background:#222 url(http://i.stack.imgur.com/vY6Tl.png);
  border-radius:320px;
}
#rad{
  position:absolute;
  width:321px;
  height:321px; background:url(http://i.stack.imgur.com/fbgUD.png);
}

jQuery的：

jQuery:

$(function() {

    var $rad = $('#rad'),
        d = 0;

    (function rotate() {    
        $rad.css({ transform: 'rotate('+ d +'deg)'}); // apply CSS3
        setTimeout(function() {
            ++d;         // next degree
            rotate();    // recall function
        }, 25);          // every 25ms
    })();                // 1st start

});

这篇关于使用jQuery雷达扫描效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！