用CSS+Jquery实现一个漂浮的窗体

一、项目需求:

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

二、需求分析:

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

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

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

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

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

三、代码实现:

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

<link rel="stylesheet" type="text/css" href="css/demo.css"/>
                        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
                        <script type="text/javascript" src="js/demo.js"></script>

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

html页面主要代码 如下:

<div id="d1"><a href="http://www.baidu.com"><img src="image/1.jpg"></a></div>

注: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动画就可以实现具有动画效果的网页 ,本篇博文就是做了一个简单的漂浮效果

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

时间: 2024-11-03 05:20:29

用CSS+Jquery实现一个漂浮的窗体的相关文章

jquery判断一个div的边界是否超出另外一个div的边界

摘要:本文简单介绍jquery判断一个div的边界是否超出另外一个div的边界,如果超出边界做出相应的处理. 1.实现效果 判断前 判断后 2.实现思路 实现类似的判断,主要是获取两个div在浏览器中的上下左右的四至,在jquery中,可以通过div.offset().left和div.offset().top获取div在浏览器中的绝对位置的left和top值:div在浏览器中的绝对位置的right和bottom为div的left+width和top+height,width和height可以通

JQuery中一个简单的表单验证的实例

html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

jQuery 开发一个简易插件

jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', fontSize:'30px' } var options = $.extend(defaults , options); var change ={ changeColor:function(){ $('#'+options.ele).css('color',options.color); }, c

第一次来博客园先用jquery写一个简单菜单收缩效果

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <script src="jquery-1.7.2.min.js"></script&g

jquery 实现一个页面多个tab页

<!DOCTYPE html ><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery 实现 一个页面 多个tab</title><style type="text/css">ul{    list-style:none;   

用jquery写一个无刷新评论功能

<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script> <script type="text/javascript&quo

JMETER CSS JQUERY EXTRACTOR

我想如果你在这里,你可能已经访问了我们关于变量提取的JMeter系列: XPath Extractor:使用XPath Expressions从XML响应中提取内容, Regexp Extractor:使用正则表达式提取内容, 和Json Path Extractor:使用JsonPath的提取器内容. 还有另一种从服务器响应中提取内容的方法:使用CSS选择器或JQuery选择器. 让我们看看我们如何利用选择器来使用JMeter 提取变量! 了解选择器 由于JMeter的CSS JQuery E

jQuery生成一个DIV容器,ID是&quot;rating&quot;.

我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数.看一下rate.php代码.虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做,我们用jQuery生成一个DIV容器,ID是"rating". $(document).ready(function() {        // generate markup        var ratingMarkup = ["lease rate: "]; 

C#用DesignSurface实现一个简单的窗体设计器

System.ComponentModel.Design.DesignSurface是为设计组件提供一个用户界面,通过它可以实现一个简单的窗体设计器. 在构建之前,我们需要引入System.Design.dll,否则会出现找不到DesignSurface的错误.  1         private void Form1_Load(object sender, EventArgs e) 2         { 3            //引用System.Deisgn.dll 4