首页新闻找找看学习计划

一道js面试题目

0
[已解决问题] 解决于 2014-01-13 09:41

麻烦大家帮我看一下这两道题目,不知道怎么写,希望大家可以帮我把逻辑思路给我屡一下嘿嘿

xiaoleilei的主页 xiaoleilei | 初学一级 | 园豆:80
提问于:2014-01-10 10:32
< >
分享
最佳答案
0

第一个我会,我这里有源代码

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>拖动层效果</title>
<script language="javascript">
 var obj=0;
 var x=0;
 var y=0;
 function find(evt,objDiv){
    obj = objDiv  
    x = evt.offsetX; //获取鼠标按下时候相对于事件源的坐标
    y = evt.offsetY;    

 }
 function dragit(evt){
  if(obj == 0){   //判断鼠标是否是被弹起如果弹起则返回false
   return false
  }
  else{
   obj.style.left = evt.clientX - x + "px";
   obj.style.top = evt.clientY - y + "px";
  }

 }
</script>
<style  type="text/css">
#container{
    border:1px solid yellow;
    width:200px;
    height:200px;
    position:absolute;
    }
#title{
    background:url(images/2008.png) no-repeat -434px -63px;
    width:200px;
    height:20px;
    position:absolute;
    cursor:move;
    font-size:14px;
    padding-top:10px;
    padding-left:5px;
    }
#content{
    margin-top:22px;
    }
#content ul{
    margin:5px;
    padding:5px;
    list-style-type:none;
    }
#content ul li{                 /*要拖动一个东西,先判断当鼠标按下的时候的事件,再判断鼠标移动时候的时间,最后判断鼠标弹起时候事件*/
    list-style-type:none;
    margin-top:5px;
    }
</style>
</head>
                         <!--当鼠标被移动的时候调用--><!--鼠标按键被松开的时候调用-->
<body style="margin:0" onmousemove="dragit(event)" onmouseup="obj = 0">
<div id="container">
                    <!--当鼠标被按下的时候调用find方法传入事件源-->
<div id="title"  onmousedown="find(event,document.getElementById('container'))">
今日公告
</div>
<div id="content">
<ul>
    <li>中国拐点向好迹象加速</li>
    <li>2012年火车票不再难买</li>
    <li>英警察每2天记忆归零</li>
    <li>第四季度经济强劲复苏 </li>
    <li>宠物狗守车买菜月薪30</li>
</ul>
</div>
</div>
</body>
</html>

第二题就是控制提示框的display属性问题,但我也不太会做

奖励园豆:5
我是一个小程序员 | 菜鸟二级 |园豆:207 | 2014-01-10 13:03
其他回答(6)
0

你可以参考下 移动层 弹出层 相关的东西

wolfy | 园豆:2636 (老鸟四级) | 2014-01-10 11:01
0

click事件,把移动div 坐标。 第二个一样控制div的display属性而已。

randy_code | 园豆:202 (菜鸟二级) | 2014-01-10 11:53
0

关键代码:

1:
(function($){
    var $w = $("外框"),
        dx,dy; 
    var isMove =false; 
    $("标题栏").mousedown(function(e){
         isMove = true;
         dx=e.pageX - parseInt($w.css("left"));
         dy=e.pageY - parseInt($w.css("top"));
     });
     $(document).mousemove(function(e){
         if(isMove)
         {
             $w.css({"left":e.pageX - dx,"top":e.pageY - dy});
         }
     })

})(jQuery);    
2.
$("#anniu").click(function(e){
$("#tishi").show();
e.stopPropagation()//防止冒泡
});
$("#tishi").click(function(e){
$(this).show();
e.stopPropagation()//防止冒泡
});
$(document).click(function(e){
$("#tishi").hide();
})
|WinKi| | 园豆:669 (小虾三级) | 2014-01-10 13:31
0
<html>
<head>
    <title>hello</title>
    <style type="text/css">
        #box1 {
            margin: 10px;
            padding: 5px;
            width: 150px;
            height: 250px;
            border: 1px solid #6BAC46;
            text-align: center;
        }
        .boxTitle {
            margin: 0px;
            padding: 0px;
            line-height: 24px;
            background-color: #4CCB00;
            cursor: pointer;
        }
        .boxContent {
            margin-top: 5px;
            height: 220px;
            background-color: #E9E9E9;
        }
    </style>
    <script type="text/javascript">
        var key = 0;
        var gapX = 0;
        var gapY = 0;
        function mouseDown(event) {
            var box = document.getElementById("box1");
            var left = box.style.left;
            var tops = box.style.top;
            gapX = event.clientX - getNum(left);
            gapY = event.clientY - getNum(tops);
            key = 1;
        }
        function mouseUp() {
            key = 0;
        }
        function mouseMove(event) {
            if(key == 1) {
                var box = document.getElementById("box1");
                box.style.left = event.clientX - gapX;
                box.style.top = event.clientY - gapY;
            }
        }
        function getNum(pixel) {
            return pixel.substring(0, pixel.length - 2);
        }
    </script>
</head>
<body onmousemove="mouseMove(event);" onmouseup="mouseUp();">
    <div id="box1" style="position:absolute;">
        <div class="boxTitle" onmousedown="mouseDown(event);">标题栏-mm</div>
        <div class="boxContent">内容资料123123</div>
    </div>
</body>
</html>
View Code

刚才做了一个,我也是边学边做

第二题也是给按钮加事件,再给body加一个事件,控制提示信息的显示display

ThreeTree | 园豆:1490 (小虾三级) | 2014-01-10 15:26
0

在上方区域的的点击事件中写移动坐标的方法,在下方的点击时写除此之外的所有属性display为none.

妍珊 | 园豆:1169 (小虾三级) | 2014-01-10 15:29
0

前端

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <script src="JS/jquery-1.8.3.js" type="text/javascript"></script>
 5     <script src="JS/TestJS/test.js" type="text/javascript"></script>
 6 </head>
 7 <body>
 8     <form id="form1" runat="server">
 9     <div id="dd" style="width:200px; height:240px; border :1px solid Green; border-color:Green;CURSOR: move; POSITION: absolute;"
10     onmousemove="DragDiv(this.id)" 
11     onmousedown="MouseDown(this.id)"
12     onmouseup="mouseUp()" ">
13     <div style="width:180px; height:20px;  background-color:Green; margin-left:2px; margin-top:2px;">标题栏</div>
14     </div>
15     <div style=" height:200px; width:800px;"></div>
16     <div id="div1" style="width:180px; height:50px;  background-color:Green; display:none;background:#666;position:absolute;overflow:auto;display:none;padding:50px;" align="center" >主人,你呈现了我</div>
17    
18    <div style="padding-top:250px;"> <input type="button" id="btn" value="提示" style="width:180px; height:20px; " /></div>
19     </form>
20 </body>
21 </html>
View Code

 

JS部分

var num = 0;
/**
* @deprecated 移动div的方法
* @param{id} id 要移动的层ID
*/
var intX;
var intY;
var blnDrag = false; //鼠标是否已经按下
$(document).ready(function () {
    document.onclick = function () {
        $("#div1").css("display", "none");
    };
    Withdiv1();
    AddBtnVoid();
});

//影藏掉一个层
function HiddenDivBoy() {
    if (num % 2 == 0) {
        $("#div1").css("display", "none");
    }
}
//显示该层
function BlockDivBoy(e) {
    var t = e.offsetTop;
    var l = e.offsetLeft;
    var w = e.offsetWidth;
    var h = e.offsetHeight;
    while (e = e.offsetParent) {
        t += e.offsetTop;
        l += e.offsetLeft;
    }
    $("#div1").css("height", "20px");
    $("#div1").css("width", "150px");
    $("#div1").css("top", "330px");
    if (num % 2 != 0) {
        $("#div1").css("display", "block");
    }
}
//给按钮绑定点击事件
function AddBtnVoid() {
    $("#btn").live("click", function () {
        num++;
        if (num % 2 != 0) {
            BlockDivBoy(this);   //呈现层
        }
        else {
            HiddenDivBoy();
        }
    });
}
//增加失去焦点事件
function Withdiv1() {
    $("#btn").live("onfocus", function () {
        HiddenDivBoy();
    });
}

//鼠标按下
function MouseDown(id) {
    //鼠标按下
    blnDrag = true;
    intX = event.clientX - GetDiv(id).style.pixelLeft;
    intY = event.clientY - GetDiv(id).style.pixelTop;
}
//鼠标拖动
function DragDiv(id) {

    //判断鼠标是否已经按下
    if (!blnDrag) {
        return false;
    }
    else {
        GetDiv(id).style.pixelLeft = event.clientX - intX;
        GetDiv(id).style.pixelTop = event.clientY - intY;
    }
}

//鼠标松开时
function mouseUp() {
    //鼠标没有按下
    blnDrag = false;
}

//得到DIV
function GetDiv(id) {
    return document.getElementById(id);
}
View Code

小学生只能帮你到这里了!

 

贫民窟大侠 | 园豆:4270 (老鸟四级) | 2014-01-10 15:36
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册