基于javascript的div浮动效果代码

最新推荐文章于 2024-05-05 07:41:03 发布

未来战舰

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： js function html

本文链接：https://blog.csdn.net/neulqz/article/details/45204153

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天接到一个添加网页图片浮动的任务，花了一中午的时间进行了学习和编码，实现了两种方式的图片浮动，这里把遇到的问题和解决的方法做一个总结。

两种实现分别为：1）Z字形浮动 2）反弹浮动；

具体来说，需要对如下的div进行浮动：【代码1】

Z字形的实现方式如下：【代码2】

//宽长比
var ratio = B/R;
obj.style.left = x+"px"
obj.style.top = y+"px"

//左侧到头了保持高度往右平移
if (x < L)
{
if(yin==2){
xin = 1;
x = L;
y = T;
yin = 0;
}else{
xin = 1;
x = L;
y = B;
yin = 0;
}

}
//右侧到头了保持高度往左平移
else if (x > R){
if(y==T){
xin = 2;
yin = 1;
x = R;
y = T;
}else{
xin = 2;
yin = 2;
x = R;
y = B;
}
}else{
//左下
if(xin==2 && yin==1){
x = x -1
y = y + ratio
//左上
}else if(xin==2 && yin==2){
x = x -1
y = y -ratio
//上右或者下右
}else if(yin==0){
x = x + 1
}

}
}
var itl= setInterval("floatAD()", delay)
obj.οnmοuseοver=function(){clearInterval(itl)}
obj.οnmοuseοut=function(){itl=setInterval("floatAD()", delay)}
</script>

反弹浮动的实现方式如下：【代码3】

</script>

其中，代码2和代码3应该在代码1后面。代码2是参照网上的思路自己编码的（按照这个思路，我们可以编写任意我们想要的浮动），代码3是网上的思路；

注意事项：

当网页文件的是如下标准的话

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

那么以上代码有可能无法正常执行，其原因是标准不一致，具体表现在js代码中的obj.style.left = x +"px"部分，这也是为什么这里强制加上“px”这个单位的原因。

本文只是简短的对div浮动效果进行了细小的说明，算是一个中午的工作总结吧，希望日后能在用得上的时候方便查阅。另外，这是本人第一次写作，构思和表达上难得有不完整和不准确之处，敬请谅解！