jQuery结合CSS3实现的超酷3D多层图片鼠标跟随视觉差互动特效源码是一段实现了可以跟随鼠标的移动轨迹做出相应变动的3D视觉差效果代码,效果非常不错,小编觉得超酷的,本段代码适应于所有网页使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
如果大家非常好奇该段代码所带来的动画效果的话,可以点击【演示地址】进行预览哦,小编建议使用【火狐】浏览器预览,如图所示:
核心代码:
var moveForce = 30;
var rotateForce = 20;
$(document).mousemove(function(e) {
var docX = $(document).width();
var docY = $(document).height();
var moveX = (e.pageX - docX/2) / (docX/2) * -moveForce;
var moveY = (e.pageY - docY/2) / (docY/2) * -moveForce;
var rotateY = (e.pageX / docX * rotateForce*2) - rotateForce;
var rotateX = -((e.pageY / docY * rotateForce*2) - rotateForce);
$('.popup')
.css('left', moveX+'px')
.css('top', moveY+'px')
.css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');
$('.popup-2')
.css('right', moveX+'px')
.css('bottom', moveY+'px')
.css('transform', 'rotateX('-rotateX-'deg) rotateY('-rotateY-'deg)');
});


本文系作者在时代Java发表,未经许可,不得转载。
如有侵权,请联系nowjava@qq.com删除。