js css 动态悬浮窗 怎么做

html-css027

js css 动态悬浮窗 怎么做,第1张

你说的动态悬浮窗不知道说的是哪一种,姑且认为是浏览器网页打开之后跑来跑去的那种,只讲大概思路,代码你自己去敲哈,这样才能充分吸收

回归正题,动态悬浮窗,可以拆开理解,一个是动、一个悬浮。

一、先讲悬浮这个概念,首先这个东西能够在浏览器窗口显示,能够飘来飘去还不影响网页里面其他内容的正常显示,那么怎么才能实现呢?没错,就是定位!那么又有个问题是用绝对定位还是固定定位?这个就看是想让这个小东西是在整个文档中飘还是浏览器的可视窗口飘了(正常情况下都是在浏览器可视窗口飘,即固定定位),至于为什么不是相对定位,请看w3c手册;

二、现在悬浮的问题解决了,就剩一个问题了那就是动动动动动动动起来,那么怎么才能让他动起来呢?这里就需要用到setInterval

、clientWidth和clientHeight;首先获取当前浏览器窗口的宽、高

即document.documentElement.clientWidth和document.documentElement.clientHeight,然后获取这个浮动小窗的初始位置,那么高潮部分来了,怎么才能动呢?不要急慢慢来。

初始盒子位置在左上角,然后判断如果盒子距离浏览器窗口右边距离大于0,那么向右移动y一步,同样距离浏览器窗口下边距离大于0那么向下移动一步,当盒子距离浏览器窗口右边距离等于0时像左移动一步,同样距离浏览器窗口下边距离等于0时向上移动一步,然后设置定时器,多久循环一次

以上就是动态悬浮窗的大概思路(卧槽,终于打完了手好累!!!)

问题分析:

HTML中的浮动窗口,可以使用CSS的定位方式完成,同时使用这种方式来完成这个功能也是一种较为简单的方式,只需要有HTML以及CSS的知识就可以完成了。

举例如下:

在以下示例中,将演示页面左右两侧分别放置一个高度为500像素,宽度为200像素的浮动窗口。示例中使用的定位方式为:固定定位(fixed),所有它们将永远的跟随页面进行滚动。

HTML代码:

<div id="left">

    <p>我是左侧浮动窗口的内容</p>

</div>

<div id="right">

    <p>我是右侧浮动窗口的内容</p>

</div>

CSS代码:

body{

    /*

     * 为body标签设置背景仅仅是为了演示效果。

     * 与浮动窗口本身无关。

     */

    background-color: #ccc

}

#left, #right{

    position: fixed

    top: 100px

    width: 200px

    height: 500px

    line-height: 500px

    text-align: center

    border: 1px solid #000

    background-color: #FFF

}

#left{

    left: 50px

}

#right{

    right: 50px

}

页面初始化效果: