jQuery+css3鼠标移动图片倾斜视差动画效果,也有3D感觉,支持输入网络图片地址实时更换背景图片。
js代码
<script>
$(window).mousemove(function(e){
var lft = e.pageX / 35 + 85;
var tp = e.pageY / 35;
$('.img').css({"background-position": '-'+lft+'px -'+tp+'px'});
var pagewidth = $(window).width();
var pwcalc = pagewidth/2;
var calcX = e.pageX - pwcalc;
var fclcX = calcX / 45;
var pageheight = $(window).height();
var phcalc = pageheight/2;
var calcY = e.pageY - phcalc;
var fclcY = calcY / 60;
var rtX = fclcY *= -1;
var lft2 = e.pageX / 45;
var tp2 = e.pageY / 35;
var lft21 = lft2 *= -1;
var tp21 = tp2 *= -1;
$('.img').css({"transform":"translate(calc("+lft21+"px + 20px),"+tp21+"px) rotateY("+fclcX+"deg) rotateX("+fclcY+"deg)"});
});
$(window).mousemove(function(e){
var pgwdt = $(window).width();
var pgwclc = pgwdt/2;
var clcX = e.pageX - pgwclc;
var fclcfX = clcX / 50;
var fclcfXrev = fclcfX *= -1;
var pght = $(window).height();
var pghclc = pght/2;
var clcY = e.pageY - pghclc;
var fclcfY = clcY / 50 - 12;
var fclcfYrev = fclcfY *= -1;
$('.img').css({"box-shadow":+fclcfXrev+"px "+fclcfYrev+"px 40px rgba(0,0,0,0.5)"});
});
$("#csmimg").keyup(function() {
$(".img").css("background-image", "url('" + $("#csmimg").val() + "')");
});
$("#csmimg").on('keyup', function(e) {
if ($(this).val() == "") {
$('.img').css('background-image', 'url(img/pic.jpg)');
}
})
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791