首页 > 解决方案 > 使用jquery将背景图像移回初始位置

问题描述

我正在尝试让一段代码按照我想要的方式工作,到目前为止,我有一个根据鼠标移动移动背景图像(.item)的脚本。问题是我需要在鼠标离开/鼠标离开时让它回到初始位置......

这是我到目前为止的原始代码:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
(function($){
    $.fn.backgroundMove=function(options){
            var defaults={
            movementStrength:'50'
        },
        options=$.extend(defaults,options);

         var $this = $(this);

           var movementStrength = options.movementStrength;
            var height = movementStrength / $(window).height();
            var width = movementStrength / $(window).width();
            $this.mousemove(function(e){
                      var pageX = e.pageX - ($(window).width() / 2);
                      var pageY = e.pageY - ($(window).height() / 2);
                      var newvalueX = width * pageX * - 10;
                      var newvalueY = height * pageY * - 10;
                      $this.css("background-position", newvalueX+"px" +newvalueY+"px");
            });

        }
})(jQuery);
</script>

<script type="text/javascript">
$(function() {

$('.item').backgroundMove({
  movementStrength:'50'
});

});
 </script>

<script type="text/javascript">
//moving back to initial position ??
</script>

标签: javascriptjquerycssbackgroundbackground-position

解决方案


推荐阅读