js移动？javascript让图片移动的函数
亲爱的读者们，你是否对js移动和javascript让图片移动的函数的相关问题感到困惑？别担心，今天我将为你解答这些问题，让你对此有更清晰的认识。
javascript让图片移动的函数
/**
*简单自定义动画函数
*@param{objec} obj一个元素对象
*@param{string} pos表示移动到的目标地点
*@param{number} speed速度大小，表示每秒移动的像素数，默认为1px/100ms
*@param{function} callback动画执行完后调用的函数
*@return{[object]}元素自身，方便链式写法
*/
function ani(obj, pos, speed, callback){
/*清除无用的定时器*/
if(obj.move){
clearTimeout(obj.move);
}
obj.style.position="absolute";
var speed= speed|| 10,
x= parseInt(obj.style.left)|| 0,
y= parseInt(obj.style.top)|| 0;
/*初始化元素的相关属性值*/
if(!obj.x){
obj.x= x;
obj.y= y;
obj.fx= x+ pos[0];
obj.fy= y+ pos[1];
}
/*如果元素到达指定位置，则跳出并执行回调函数*/
if(x===(pos[0]+ obj.x)&& y===(pos[1]+ obj.y)){
if(typeof callback==="function"){
callback();
}
obj.x= null;
obj.y= null;
obj.fx= null;
obj.fy= null;
return obj;
}
/*判断在水平方向上是应该往哪个方向移动*/
if(obj.x< obj.fx){
if(x< obj.fx){
obj.style.left=(x+ speed)+"px";
}
} else{
if(x> obj.fx){
obj.style.left=(x- speed)+"px";
}
}
/*判断在垂直方向上是应该往哪个方向移动*/
if(obj.y< obj.fy){
if(y< obj.fy){
obj.style.top=(y+ speed)+"px";
}
} else{
if(y> obj.fy){
obj.style.top=(y- speed)+"px";
}
}
obj.move= setTimeout(function(){
ani(obj, pos, speed, callback);
}, 100);
}
window.onclick= function(){
ani($("#testAni")[0], [100, 0], 5, function(){
ani($("#testAni")[0], [-100, 0],null,function(){
alert("success")
});
})
}
可供参考
matter.js 如何移动刚体
Matter.js中基础的概念
大多数的物理引擎对于物理模拟的要素都有着相近的概念，不同的引擎差别在于使用的方式，功能的全面性，模拟的精细度等层面，下面就先从物理世界的基础概念讲起。
Engine（引擎）和 World（世界）
Matter.Engine模块包含了创建和处理引擎的方法，引擎是负责管理和更新模拟世界的控制器，引擎可以控制时间的缩放，可以检测所有的碰撞事件，并且拿到所有碰撞的物体对（pairs）。
在 Matter.js中任何的物体都需要一个容身处，而存放这些物体的地方，我们称之为世界，物体必须添加到世界里，然后由引擎运行这个世界。而创建世界需要使用到Matter.World模块，该模块包含了用于创建和操作世界的方法，一个Matter.World相当于一个复合物体，物体、约束、复合物体的聚合体，其次世界还有额外的一些属性，比如重力、边界。
Render（渲染）
JavaScript
1
2
3
4
5
6
7
8
9
10
// Matter.Render用法
var engine= Engine.create();
//...将物体加入到世界中
var render= Render.create({
element: document.body,
engine: engine,
options: options
});
Engine.run(engine);
Render.run(render);
element是一个容器元素，使用时指定要渲染的节点
engine指定为Matter.Engine实例
options指定一些渲染的参数
Matter.Render是将实例渲染到 Canvas中的渲染器，控制视图层的样式，它的主要作用是用于开发和调试，默认情况下Matter.Render将只显示物体的线框（轮廓），这对于开发和调试很有帮助，但如果需要使用到全局实体渲染则需要将线框模式关闭render.options.wireframes= false，另外它同样也适合制作一些简单的游戏，因为它包括了一些绘图选项、线框、向量、Sprite精灵和视窗功能。
DEMO戳这里
Body（刚体）
物体或者叫刚体，在物理引擎里特指坚硬的物体，具有固定的形状，不能形变。刚体可以用于表示一个箱子、一个球或是一块木头，每个物体都有自己的物理属性，质量、速度、摩擦力、角度等，还可以设置刚体的标记。Matter.Bodies模块中内置了几种刚体，矩形Matter.rectangle、多边形Matter.polygon、圆形Matter.circle、梯形Matter.trapezoid等等。
JavaScript
1
2
3
4
5
6
7
//创建刚体
var rect= Bodies.rectangle(200, 100, 50, 50),//矩形
circle= Bodies.circle(300, 100, 25),//圆
polygon= Bodies.polygon(450, 100, 5, 25),//多边形
trapezoid= Bodies.trapezoid(590, 100, 50, 50, 3);//梯形
//将刚体添加到世界中
World.add(engine.world, [rect, circle, polygon, trapezoid]);
DEMO戳这里
Composite（复合体）
由刚体和复合材料通过约束组合在一起的就叫做复合体。复合体对外当作一个刚体，复合体的物理属性是通过所包含的刚体的属性综合计算出来的。Matter.Composite模块包含用于创建和处理复合体的方法，另外还有一个Matter.Composites模块，提供了几种特别的复合材料，例如链Composites.chain、牛顿摆球Composites.newtonsCradle、软体Composites.softBody、汽车Composites.car、堆叠Composites.stack等等。
桥梁
JavaScript
1
2
3
4
5
6
7
8
9
10
11
//使用堆叠创建桥梁
var group= Body.nextGroup(true);
var bridge= Composites.stack(150, 300, 9, 1, 10, 10, function(x, y){
return Bodies.rectangle(x, y, 50, 20,{
collisionFilter:{//过滤碰撞
group: group
}
});
});
//创建链约束
Composites.chain(bridge, 0.5, 0,-0.5, 0,{ stiffness: 0.9});
DEMO戳这里
布
JavaScript
1
2
3
4
5
6
7
8
9
10
//软体
var cloth= Composites.softBody(200, 200, 20, 12, 5, 5, false, 8,{
friction: 0.00001,//摩擦力
collisionFilter:{
group: Body.nextGroup(true)
},
render:{
visible: false
}
});
DEMO戳这里
牛顿摆球
JavaScript
1
2
//创建牛顿摆球
var newtonsCradle= Composites.newtonsCradle(300, 320, 5, 25, 150);
DEMO戳这里
Constraint（约束）
约束可理解为通过一条线，将刚体 A和刚体 B两个刚体连接起来，被约束的两个刚体由于被连接在了一起，移动就相互受到了限制。Matter.Constraint模块包含了用于创建和处理约束的方法，这个约束可以很宽松，也可以很紧绷，还可以定义约束的距离，约束具有弹性，可以用来当作橡皮筋。
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//创建一个矩形和圆形
var rect= Bodies.rectangle(400, 100, 50, 50,{
isStatic: true
}),
ball= Bodies.circle(400, 400, 50);
World.add(engine.world, [
rect,
ball,
Constraint.create({
bodyA: rect,//约束刚体 A
pointA:{//约束点 A
x: 0,
y: 0
},
bodyB: ball,//约束刚体 B
pointB:{//约束点 B
x: 0,
y:-50
},
stiffness: 0.6
})
]);
DEMO戳这里
MouseConstraint（鼠标约束）
如果你想让刚体与用户之间有交互，那就要在鼠标和刚体之间建立连接，也就是鼠标和刚体间的约束，Matter.MouseConstraint模块包含用于创建鼠标约束的方法，提供通过鼠标或触摸（移动端时）移动刚体的能力，可以设置什么标记的物体才能被鼠标操纵，创建鼠标约束后，可以捕获到鼠标的各类事件。
JavaScript
1
2
3
4
5
//全局鼠标约束
var mouseConstraint= MouseConstraint.create({
element: render.canvas
});
World.add(engine.world, mouseConstraint);
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//设置某个标记的物体才能被鼠标操纵
var categoryBall= 0x0001;//分类
var ball= Matter.Bodies.circle(300, 350, 32,{
density: 0.68,//密度
restitution: 1,//弹性
collisionFilter:{
category: categoryBall
}
});
var mouseConstraint= MouseConstraint.create({
element: render.canvas,
collisionFilter:{
mask: categoryBall
}
});
World.add(engine.world, mouseConstraint);
DEMO戳这里
Vector（向量）
Matter.Vector模块包含用于创建和操纵向量的方法，向量是引擎有关几何操作行为的基础，修改物体的运动状态基本都是使用向量来控制，例如赋予物体一个力，或者设置物体的速度、旋转角度，并且内置了多个向量的求解函数：向量积、标量积、格式化、垂直向量等等。
Events（事件）
Matter.Events模块包含了绑定、移除和触发对象的方法。
绑定事件Matter.Events.on(object, eventNames, callback)
移除事件Matter.Events.off(object, eventNames, callback)
触发事件Matter.Events.trigger(object, eventNames, event)
Matter.js中的一些属性
施加力
Matter.Body.applyForce(body, position, force)方法可以给刚体施加一个力，传入 X和 Y轴需要的力度值，通过这个方法你可以去模拟踢一个足球、投一个篮球的效果。
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var ball= Bodies.circle(300, 100, 25,{
density: 0.68,//密度
restitution: 0.8//弹性
});
World.add(engine.world, ball);
function addForce(){
var forceMagnitude= 0.02* ball.mass;
Body.applyForce(ball, ball.position,{
x:(forceMagnitude+ Common.random()* forceMagnitude)* Common.choose([1,-1]),
y:-forceMagnitude+ Common.random()*-forceMagnitude
});
}
addForce();
DEMO戳这里
重力
可以设置 X、Y轴的重力值，默认都为 1，参数在 0、1、-1中选择使用。
JavaScript
1
2
3
4
//实现反重力效果
engine.world.gravity.y=-1;
//无重力效果
engine.world.gravity.y= 0;
DEMO戳这里
睡眠状态
通过enableSleeping: true开启睡眠模式后，当刚体处于不受作用状态时，会进入睡眠状态，这样可以有效的提高引擎的性能，当物体被其他物体碰撞或者对刚体施加力时，刚体会被叫醒，引擎会继续对其进行计算模拟。
JavaScript
1
2
3
4
5
6
7
8
//开启睡眠状态
var engine= Engine.create({
enableSleeping: true
});
//还可以针对进入睡眠状态的刚体进行监听，比如将刚体移出世界
Event.on(ball,"sleepStart", function(){
World.remove(engine.world, ball);
});
DEMO戳这里
摩擦力
摩擦力在 Matter.js中分别提供了三种：摩擦力friction、空气摩擦力frictionAir以及静止摩擦力frictionStatic。friction默认值是 0.1，取值范围在 0– 1，当值为 0意味着刚体可以摩擦力的无限滑动，1意味着对刚体施加力后会立刻停止，frictionAir默认值是 0.01，取值范围 0– 1，当值为 0意味着刚体在空间中移动时速度永远不会减慢，值越高时刚体在空间的移动速度越慢，frictionStatic默认值 0.5，当值为 0时意味着刚体几乎是静止的，值越高时意味着需要移动刚体所需的力就越大。
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
//摩擦力
Bodies.rectangle(300, 70, 40, 40,{
friction: 0.01
})
//空气摩擦力
Bodies.rectangle(300, 70, 40, 40,{
frictionAir: 0.05
})
//静止摩擦力
Bodies.rectangle(300, 70, 40, 40,{
frictionStatic: 1
})
时间缩放
可以控制全局的时间，当值为 0时为冻结模拟，值为 0.1给出慢动作效果，值为 1.2时给出加速效果。
JavaScript
1
engine.timing.timeScale= 0.1;
这里就简单提及到几个属性，当然还有更多的属性比如：视图（View）、弹性（Restitution）等等，更详细的 API可到官网查看。
Matter.js调试
除了前面讲Matter.Render模块的时候提到的线框模式wireframes便于调试外，Matter.Render模块其实还为我们提供了以下几种方法，便于我们自定义调试选项：
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var render= Render.create({
element: document.body,
engine: engine,
options:{
width: 800,
height: 600,
pixelRatio: 1,//设置像素比
background:'#fafafa',//全局渲染模式时背景色
wireframeBackground:'#222',//线框模式时背景色
hasBounds: false,
enabled: true,
wireframes: true,//线框模式
showSleeping: true,//刚体睡眠状态
showDebug: false,// Debug信息
showBroadphase: false,//粗测阶段
showBounds: false,//刚体的界限
showVelocity: false,//移动刚体时速度
showCollisions: false,//刚体碰撞点
showSeparations: false,//刚体分离
showAxes: false,//刚体轴线
showPositions: false,//刚体位置
showAngleIndicator: false,//刚体转角指示
showIds: false,//显示每个刚体的 ID
showVertexNumbers: false,//刚体顶点数
showConvexHulls: false,//刚体凸包点
showInternalEdges: false,//刚体内部边界
showMousePosition: false//鼠标约束线
}
});
另外官方提供了三个调试工具，可单独使用或一起使用，如下：
工具：
MatterTools.Demo用于运行和测试 DEMO
MatterTools.Gui改变引擎的属性
MatterTools.Inspector检查世界
js怎么听移动端键盘展开事件
方法一实现代码:
var winHeight=$(window).height();
$(window).resize(function(){
var thisHeight=$(this).height();
if(winHeight- thisHeight>50){
//窗口发生改变(大),故此时键盘弹出
//当软键盘弹出，在这里面操作
}else{
//窗口发生改变(小),故此时键盘收起
//当软键盘收起，在此处操作
}
});
方法二:监控键盘。
监控的方式其实筛选下来也不过两种：
①时钟setInterval不停监控
②系统级别的监控，比如键盘出现时候通知window一个事件，但是很遗憾现在还没有这个事件，但是这个事件等于
input类元素获取焦点==弹出虚拟键盘
input类元素失去焦点==收起虚拟键盘
基于系统监控这点，我们还可以监控resize事件或者scroll事件，但是经过我的测试。
setInterval表现比较好.于是，我们简单写一段代码，可靠是否满足需求：
window.alert= function(msg){
$('body').append('<div>'+ msg+'</div>')
};
function fixedWatch(el){
if(document.activeElement.nodeName=='INPUT'){
el.css('position','static');
} else{
el.css('position','fixed');
}
}
setInterval(function(){
fixedWatch($('#headerview header'));
}, 500);
好了，文章到这里就结束啦，如果本次分享的js移动和javascript让图片移动的函数问题对您有所帮助，还望关注下本站哦！