大佬教程收集整理的这篇文章主要介绍了使用jQuery根据光标位置旋转元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
比例如下：
和y轴相同.
如果光标位于屏幕的中心,则不旋转.如果它在其他地方,它必须从0°旋转到2°(或负值,取决于相对笛卡尔平面中屏幕的位置).所以这是一个动态轮换,立即反馈.
就像你在这里看到的：http://css3playground.com/flashlight.php(从菜单“斜面”中选择),但使用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 }); });@H_618_19@但结果并不是我的预期. div旋转(以错误的方式旋转,但旋转),但不是动态的.
我@R_674_10753@？
这是我用来实现这种行为的jQuery
$(document).ready(function () { var $one = $('#div1'),$two = $('#div2'),browserPrefix = "",usrAg = navigator.userAgent; if(usrAg.indexOf("Chrome") > -1 || usrAg.indexOf("Safari") > -1) { browserPrefix = "-webkit-"; } else if (usrAg.indexOf("Opera") > -1) { browserPrefix = "-o"; } else if (usrAg.indexOf("Firefox") > -1) { browserPrefix = "-moz-"; } else if (usrAg.indexOf("MSIE") > -1) { browserPrefix = "-ms-"; } $(document).mousemove(function (event) { var cx = Math.ceil(window.innerWidth / 2.0),cy = Math.ceil(window.innerHeight / 2.0),dx = event.pageX - cx,dy = event.pageY - cy,tiltx = (dy / cy),tilty = - (dx / cX),radius = Math.sqrt(Math.pow(tiltx,2) + Math.pow(tilty,degree = (radius * 15); shadx = degree*tiltx; /*horizontal shadow*/ shady = degree*tilty; /*vertical shadow*/ $one.css(browserPrefix + 'transform','rotate3d(' + tiltx + ',' + tilty + ',' + degree + 'deg)'); $two.css(browserPrefix + 'transform',' + degree + 'deg)'); if(dx>cX) /*without that horizontal values are reversed*/ $('#div1,#div2').css('Box-shadow',+ (-shady) + 'px ' + (-shadX) +'px 5px #3D352A'); else $('#div1,+ shady + 'px ' + (-shadX) +'px 5px #3D352A'); }); });@H_618_19@
以上是大佬教程为你收集整理的使用jQuery根据光标位置旋转元素全部内容，希望文章能够帮你解决使用jQuery根据光标位置旋转元素所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。