代码结构如下
请点击输入图片描述
请点击输入图片描述
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，
