CSS+Jquery を使用してフローティング form_html/css_WEB-ITnose を実装する

一、项目需求：

实现一个用于网站主页面 从窗体左上角开始飘到右下角 之后又飘到右上角 十秒之后消失的效果。

二、需求分析：

首先 应当想要漂浮的内容放在一个容器内，也就是一个DIV，设计它的样式，不管是背景图片还是文字，甚至是一段多媒体视频等。

其次 要想实现漂浮 这个DIV就不能处于文档流中 否则因为它一定会收到其他HTML内元素的影响 而不能自由移动。漂浮的本质就是

窗体中位置的改变，并且这种改变不能在瞬间完成 而是可以预定时间完成转移。

再次 在DIV移动位置过程中 当鼠标经过时应停止移动 鼠标移开移动继续

最后 移动到结束位置后div消失 漂浮结束

三、代码实现：

html页面引入CSS和JS文件 如下：

注：jquery-1.8.2.min.js为Jquery的库文件 需要读者去官网下载

html页面主要代码 如下：

＃d1 {height：200px：200px;ドキュメントフローからのid = "d1"のid
jsコードファイルdemo.jsは次のとおりです。 #d1").slideUp();});
$("#d1").mouseover (function(){

注: マウスアウトとマウスオーバーは、それぞれマウスを削除するための Jquery の 2 つのイベントであり、呼び出される関数です ( ) メソッド。ここで、animate() はアニメーション イベントです

4. 概要:


Jquery は、Flash アニメーションを作成せずにアニメーション効果を備えた Web ページを実装できる豊富なコンテンツを提供します。このブログ投稿は、シンプルなフローティングの作成についてです。効果

まだ多くの欠点がありますが、あらゆる分野の専門家がコメントや修正を残していただけることを歓迎します。