腳本之家服務器常用軟件

快捷導航

jQuery結(jié)合CSS3實現(xiàn)的超酷3D多層圖片鼠標跟隨視覺差互動特效源碼

投訴報錯

腳本大?。?span>330KB
腳本語言：簡體中文
腳本類型：國產(chǎn)軟件
腳本授權(quán)：免費軟件
腳本類別：jQuery
應用平臺：jquery
更新時間：2016-06-17
網(wǎng)友評分：

360通過騰訊通過金山通過

330KB

詳情介紹

jQuery結(jié)合CSS3實現(xiàn)的超酷3D多層圖片鼠標跟隨視覺差互動特效源碼是一段實現(xiàn)了可以跟隨鼠標的移動軌跡做出相應變動的3D視覺差效果代碼，效果非常不錯，小編覺得超酷的，本段代碼適應于所有網(wǎng)頁使用，有需要的朋友們可以前來下載使用。本段代碼兼容目前最新的各類主流瀏覽器，是一款非常優(yōu)秀的特效源碼。

如果大家非常好奇該段代碼所帶來的動畫效果的話，可以點擊【演示地址】進行預覽哦，小編建議使用【火狐】瀏覽器預覽，如圖所示：

核心代碼：
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)');
});

jquery CSS3 視覺差鼠標跟隨

下載地址

下載錯誤？【投訴報錯】