jQuery+css3鼠标移动图片倾斜视差动画效果免费下载

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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录