锤子官网html格式,锤子科技首页banner图3d效果.html

var x1 = document.getElementsByClassName("lunbo")[0].offsetLeft;

var y1 = document.getElementsByClassName("lunbo")[0].offsetTop;

var x2;

var index = 0;

window.onload = function() {

timer = setInterval(auto, 3000);

}

function auto() {

index++;

var q=index%2

if(q==0){

$(".lunbo1").fadeIn();

$(".lunbo2").fadeOut();

}else{

$(".lunbo2").fadeIn();

$(".lunbo1").fadeOut();

}

}

$(".yuanchange2").click(function(){

$(".lunbo1").fadeIn();

$(".lunbo2").fadeOut();

});

$(".yuanchange1").click(function(){

$(".lunbo2").fadeIn();

$(".lunbo1").fadeOut();

})

function show() {

$(".tu1").attr("src", imgarr[index][0])

$(".tu2").attr("src", imgarr[index][1])

$(".tu3").attr("src", imgarr[index][2])

}

$(".lunbo").mousemove(function(e) {

check(e);

})

function check(e) {

var a = e ? e : window.event;

x2 = e.offsetLeft - x1;

y2 = e.clientY - y1;

var LorR = x2 - 610;

var RorL = y2 - 250;

var x3 = x1 + 610 - e.clientX;

var y3 = y1 + 250 - e.clientY;

if(LorR >= 0) {

if(RorL >= 0) {

$(".erji").css("left", -(-x3 / 1220 * 10) + "px");

$(".beijing").css("transform", "perspective(3000px)rotateX(" + y2 / 500 * 8 + "deg)rotateY(" + -(-x2 / 1220 * 8) + "deg)");

$(".phone").css("transform", "perspective(3000px)rotateX(" + y2 / 500 * 8 + "deg)rotateY(" + -(-x2 / 1220 * 9) + "deg)");

$(".erji").css("transform", "perspective(3000px)rotateX(" + y2 / 500 * 8 + "deg)rotateY(" + -(-x2 / 1220 * 8) + "deg)");

}

} else {

$(".erji").css("left", -(x3 / 1220 * 10) + "px");

$(".beijing").css("transform", "perspective(3000px)rotateX(" + (y3 / 500 * 8) + "deg)rotateY(" + -x3 / 1220 * 8 + "deg)")

$(".phone").css("transform", "perspective(3000px)rotateX(" + (y3 / 500 * 8) + "deg)rotateY(" + -x3 / 1220 * 9 + "deg)")

$(".erji").css("transform", "perspective(3000px)rotateX(" + (y3 / 500 * 8) + "deg)rotateY(" + -x3 / 1220 * 8 + "deg)");

}

}

//手机端效果

//var phoneX,phoneY;

//

//$(".lunbo").ontouchstart(function(){

//phoneX=event.pageX;

//phoneY=event.pageY;

//})

//$(document).ontouchmove(DocumentTouch(){

//var x= event.pageX-phoneX;

//var y= event.pageY-phoneY;

//$(".erji").css("left", -(x / 1220 * 10) + "px");

//$(".beijing").css("transform", "perspective(3000px)rotateX(" + (y / 500 * 8) + "deg)rotateY(" + -x / 1220 * 8 + "deg)")

//$(".phone").css("transform", "perspective(3000px)rotateX(" + (y / 500 * 8) + "deg)rotateY(" + -x / 1220 * 9 + "deg)")

//$(".erji").css("transform", "perspective(3000px)rotateX(" + (y / 500 * 8) + "deg)rotateY(" + -x / 1220 * 8 + "deg)");

//})

一键复制

编辑

Web IDE

原始数据

按行查看

历史