Home >Web Front-end >HTML Tutorial >用CSS+Jquery实现一个漂浮的窗体_html/css_WEB-ITnose

用CSS+Jquery实现一个漂浮的窗体_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:36:211266browse

一、项目需求:

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

二、需求分析:

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

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

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

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

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

三、代码实现:

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

                   
                       
                       

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

       html页面主要代码 如下:

                    

用CSS+Jquery实现一个漂浮的窗体_html/css_WEB-ITnose


                    注:div中是一个带有链接的图片 点击链接到百度的首页 根据需求可任意修改图片和链接位置

       样式demo.css文件中内容 如下:                

                   #d1{
                             height:200px;
                             width:200px;
                             position:absolute;
                            }

                    注:position:absolute代表绝对定位 目的是使id=”d1”的div脱离文档流

       JS代码文件demo.js中代码如下:               

                       $(function(){

                     /*鼠标离开id="d1"的div执行以下操作*/
                          $("#d1").mouseout(function(){
                                                      $(this).animate({
                                                                  left:'800px',
                                                                  top:'500px'},10000,function(){
                                                                  $("#d1").animate({top:'0px',left:'1150px'},10000,function(){$("#d1").slideUp();});
                                                                                    });
                                               });
                   /*鼠标经过id="d1"的div时执行以下操作*/
                                               $("#d1").mouseover(function(){
                                                                $(this).stop(true);
                                                                                         });

                                       });

                      注:mouseout和mouseover分别是Jquery的两个事件 用于鼠标移开和经过调用的function()方法,其中animate()为动画事件

四、总结: 

      Jquery提供了丰富的内容 使我们可以不用做一个flash动画就可以实现具有动画效果的网页 ,本篇博文就是做了一个简单的漂浮效果

      还有很多不足的地方 欢迎各路大神留言指正。

      

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn