小编luc*_*nti的帖子

我想要做的是一个jQuery脚本,它旋转div中的元素,具体取决于浏览器窗口中的光标位置.

比例如下:

maximum_pixels_x-axys:2°= center_pixels_x-axys:0°

和y轴相同.

如果光标位于屏幕的中心,则不旋转.如果它在其他地方,它必须从0°旋转到2°(或负值,取决于相对笛卡尔平面中屏幕的位置).所以这是一个动态轮换,立即反馈.

就像你在这里看到的:http://css3playground.com/flashlight.php(从菜单"Bevel"中选择)但是使用transform:rotate而不是text-shadow.

现在我尝试使用transit.js,使用sin e cos而不是degree(将导致从0到1的"度").我知道,这不是正确的方法,但它是我想象的最接近度数的方法.

var max_x = $(window).width();
var max_y = $(window).height();
var center_x = (max_x/2);
var center_y = (max_y/2);

$(document).mousemove(function(e) {
    var mouse_x = e.pageX,
    mouse_y = e.pageY,
    hypotenuse = Math.sqrt(Math.pow((mouse_x-center_x),2)+Math.pow((mouse_y-center_y), 2)),
    cos = (mouse_x-center_x)/hypotenuse,
    sin = (mouse_y-center_y)/hypotenuse;
    $('#div1, #div2').transition({ perspective: '400px', rotateX: sin, rotateY: cos });
});

但结果并不是我的预期.div旋转(以错误的方式旋转,但旋转),但不是动态的.

我该怎么办？

小提琴:http://jsfiddle.net/lucgenti/LtWtW/11/

问题是：我需要进行http调用并存储生成动态路由所需的对象。因此，我正在利用APP_INITIALIZER。

// app.module.ts
import { ApplicationService } from './application.service';


providers: [
  ApplicationService,
  { 
  provide: APP_INITIALIZER, useFactory: appServiceFactory, deps: 
  [Injector, ApplicationService], multi: true 
  },
],

function appServiceFactory(injector: Injector, appService: ApplicationService): Function {
  return () => {
    return appService.loadApplication().then((app: Application) => {
      /custom logic
      });
    });
  };
}


// application.service.ts
@Injectable({
  providedIn: 'root'
})

// navigation.component.ts
import { ApplicationService } from './application.service';

export class NavigationComponent implements OnInit {

    constructor(private _applicationService: ApplicationService) {
  }

}

但是在navigation.component内部，再次初始化applicationservice。我敢肯定，因为如果我记录或放置调试器语句，则该服务的Construct（）方法将被调用两次。

为什么即使将Service声明为Singleton并providedIn: root重新实例化？