javascript - 使用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>
解决方案
推荐阅读
- c# - Unity 是否将脚本编译为 C++?
- laravel - 迁移后在迁移列表中添加迁移文件
- json - VB.NET JSON POST 请求中的错误 - HTTPWEBREQUEST
- javascript - 如何为每条记录创建嵌套网格的动态列
- tcl - 将一个列表拆分为多个子列表,更改一个特定的子列表,然后重新加入所有子列表以形成一个新列表?
- android - xml 内容不正确
- python - 使用 numpy 结构化数组而不是 dict 来节省空间并保持速度
- spark-structured-streaming - 如何使用 spark 结构化流在 elasticsearch sink 中设置动态文档 ID
- icons - MIT-Scratch 资产(其接口的资产)
- macos - 如何获取带有文件名的文件的完整路径?