求一个js让图片飘落效果

JavaScript042

求一个js让图片飘落效果,第1张

代码结构如下

请点击输入图片描述

请点击输入图片描述

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Document</title>

</head>

<body>

<script type="text/javascript" src="./js/EffectItem.js"></script>

<script type="text/javascript" src="./js/Effect.js"></script>

<script type="text/javascript">

new Effect({

effectUrl : './images/timg.jpg',

rotate : false,

direction : "up"

})

</script>

</body>

</html>

效果如下：

请点击输入图片描述

代码太多，放不完，你私信我，我发你

/*

data:2022-11-17

author:lfp

move运动函数

dom--需要运动的对象

json--{width:100,height:100,left:100,top:100}

callback--回调函数 可调用自己 实现异步动画效果

*/

//主函数

function move(dom,json,callback){

//让每一次动画都是新的开始，防止出现动画一直不停的运行

if(dom.timer)clearInterval(dom.timer)

var i=0

var start=0

//在对象中增加timer 便于控制他停止

dom.timer=setInterval(function(){

i++

//循环每一个目标属性添加动画方法

for(var attr in json){

//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替

var cur=getStyle(dom,attr)

if(i==1)start=cur

//拿到该属性的目标值

var target=json[attr]

//设置分成10次增加增量 你可以根据需要修改

var speed=(target-start)/10

console.log(speed+"====="+cur)

//如果没有达到目标值就一直加

if(Math.abs(cur-target)>1){

dom.style[attr]=cur+speed+"px"

}else{

//达到目标值了就停止或者其他情况也停止

clearInterval(dom.timer)

//等停止了动画再回调函数进行另外的操作

if(callback)callback.call(dom)

}

}

},45)

}

//配套函数

function getStyle(dom,attr){

var value=""

if(window.getComputedStyle){

value=window.getComputedStyle(dom,false)[attr]

}else{

value=dom.currentStyle[attr]

}

value=parseInt(value)

return value || 0//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充

}

function $(id){

//return document.getElementById(id)

return document.querySelector("#"+id)

}

<div id="aaa">111111</div>

<script>

var top1 = 100/*初始值*/

var elem = document.getElementById('aaa')/* 浮动元素的 ID */

elem.style.position = 'absolute'

elem.style.top = top1+"px"

window.onscroll = function(){

elem.style.top = top1 + parseInt(document.documentElement.scrollTop)+parseInt(document.body.scrollTop) + "px"

}

</script>

不用JS使用css的position:fixed就可以实现，

但是 position : fixed 不支持IE6，