头像

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

来源:http://www.sucaihuo.com/js/3382 素材火管理员 2018-01-10 16:42浏览(886) 收藏

jQuery+css3鼠标移动图片倾斜视差动画效果,也有3D感觉,支持输入网络图片地址实时更换背景图片。
jQuery+css3鼠标移动图片倾斜视差动画效果
分类:图片代码 > 鼠标滑过 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327,在线充值,或联系QQ1556472052直接充值

查看演示 下载资源: 8 下载资源 下载积分: 10 积分

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>
最新交易
评论19
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1556472052

  • 头像 18楼
    01-26 08:01
    笑***生
    挺有意思的,可以玩玩
  • 头像 17楼
    01-17 11:11
    平***生
    研究jquery的可以下载一下,很好的
  • 头像 16楼
    01-15 17:05
    因***单
    这个头像不错,我现在想来回去研究
  • 头像 15楼
    01-15 15:18
    Ra***ny
    来学习研究下这个东西,应该会不错的
  • 头像 14楼
    01-13 00:16
    沐***李
    效果很逼真 找来学习研究
  • 头像 13楼
    01-11 16:27
    Pa***da
    看起来很棒,等会儿试试
  • 头像 12楼
    01-11 13:04
    王***迪
    看起来效果不错哟,可以哦
  • 头像 11楼
    01-11 10:43
    He***ck
    恩!看起来效果不错哟
  • 头像 10楼
    01-11 10:33
    李***祥
    效果很好,先看看!有用
  • 头像 9楼
    01-11 09:43
    大***猴
    效果很不错 对我来说很有用
1 2