使用JQuery制作浮动窗口

最新推荐文章于 2022-12-03 09:19:38 发布

匿翾

最新推荐文章于 2022-12-03 09:19:38 发布

阅读量1.7k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/lr_lr_lr/article/details/48805215

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= " />
<script src="./jquery.js"></script>
<style type="text/css">
body ,div,img{
   margin:0px;
   padding:0px;
}
#div2{
     background-color:#D8D8D8;
}
</style>
<script>
$(document).ready(function(){

$("#windowMove").click(function(){
startMove();
});

});
/**************图片在指定的div中移动*****************/
var leftOffset=0;//左边的的坐标
var topOffset=0;//上坐标
var up=1;//向上移动
var left=1;//向左移动
var position=new Object();//位置坐标的对象
var xpeed=2;//移动的速度
var ypeed=3;//移动的速度
var interval=0;//
var delay=20;//延迟的秒数
function mover(){
   position=$("#div3").offset();//??在一个函数的范围内
    leftOffset=position.left;//获取当前坐标 y
   upOffset=position.top;//获取当前坐标 x
   if(up){//向下移动
       topOffset+=ypeed;
   }else{//向上移动
       topOffset-=ypeed;
   }
   $("#div3").offset({top:topOffset});
   if(left){ //向右移动
       leftOffset+=xpeed;
   }else{ //向左移动
        leftOffset-=xpeed;
   }
   $("#div3").offset({left:leftOffset});
   if(leftOffset>450){//设置左右移动开关量
       left=0;
       leftOffset=450;//450=500-50-div2.left
   }
   if(leftOffset<0){
       left=1;
       leftOffset=0;
   }
   if(topOffset>450){//设置上下移动开关量
       up=0;
       topOffset=450;//450=500-50-div2.top
   }
   if(topOffset<0){
       up=1;
       topOffset=0;
   }
}
function startMove(){

    interval=setInterval('mover()',delay);
}
</script>
</head>
<body>
<div id="div2"style="height:500px;width:500px;;">
    <div id="div3" style="height:50px;width:50px;position:absolute;">
        <a href="http://www.baidu.com">
           <img id ="#img2" src="./2.png"style="height:50px;width:50px;" οnmοuseοver="clearInterval(interval);" >小狸猫</img>
        </a>
   <div id="text"></div>
   </div>
</div>
<div>
<button id="windowMove" >加速/开始</button>
</div>
</body>

</html>

浮动窗的主要是确定位置,相对位置,必须把 div3 的positionz设置为relative 或者 absolute ;

同样首先我们也必须掌握 css的3种定位:

relative ,相对定位::

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于” 它的起点进行移动。注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

absolute,绝对定位::

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

fixed:固定定位 ::

简单理解就是位置固定

关于css定位的知识大家可以查一查开发文档;

匿翾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery制作浮动窗口

body ,div,img{ margin:0px; padding:0px;}#div2{ background-color:#D8D8D8;}$(document).ready(function(){ $("#windowMove").click(function(){ startMove(); });});/
复制链接

扫一扫