中软Day08——JavaScript基础（盒子塌陷、特效、拖拽案例）

最新推荐文章于 2022-08-08 16:54:26 发布
最新推荐文章于 2022-08-08 16:54:26 发布
阅读量197 收藏
点赞数
文章标签： 中软学习笔记 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43542290/article/details/102472230
版权

中软Day08

  1. 盒子塌陷的问题

    问题父盒子和子盒子有时外边合并，此时用 overflow:hidden

  2. 特效

    • 偏移量

    在这里插入图片描述

    • 客户区大小

      在这里插入图片描述

    • 滚动偏移

    在这里插入图片描述

  3. 案例

  • 鼠标跟随点击

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<img src="img/img.jpg" id="image">
	</body>
	<script type="text/javascript">
		var image = document.getElementById("image");
		document.onclick=function(event){
			var event = event || window.event;
			targetX = event.clientX-image.offsetWidth/2;
			targetY = event.clientY-image.offsetHeight/2;
		}
		//缓动
		var leaderX = 0,leaderY = 0,targetX = 0,targetY = 0;
		setInterval(function(){
			leaderX=leaderX+(targetX-leaderX)/10;
			leaderY=leaderY+(targetY-leaderY)/10;
			image.style.left=leaderX+"px";
			image.style.top=leaderY+"px";
			
		},10)
		
		
	</script>
</html>

  • 跟随鼠标导航栏

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			body{background-color: #333;}
			ul{
				list-style: none;
			}
			.nav{
				width: 1200px;
				height: 42px;
				margin: 100px auto;
				border-radius: 5px;
				background: url(img/rss.png) no-repeat right center #fff;
				position: relative;
			}
			.cloud{
				width: 83px;
				height: 42px;
				background: url(img/cloud.gif) no-repeat;
				position: absolute;
				left: 0;
				top: 0;
			}
			.nav li{
				width: 83px;
				height: 42px;
				float: left;
				line-height: 42px;
				text-align: center;
				color: black;
				cursor: pointer;
			}
			.nav ul{
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="nav" id="nav">
			<span class="cloud" id="cloud">
				
			</span>
			<ul>
				<li>师资培训</li>
				<li>首页新闻</li>
				<li>活动策划</li>
				<li>企业文化</li>
				<li>招聘信息</li>
				<li>公司简介</li>
				<li>联系我们</li>
				<li>关于我们</li>
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	var cloud = document.getElementById("cloud");
	var nav = document.getElementById("nav");
	var lis = nav.children[1].children;
	var current = 0;
	for(var i = 0;i<lis.length;i++){
		lis[i].onmouseover=function(){
			// alert(this.offsetLeft)
			target=this.offsetLeft;
		}
		lis[i].onmouseout=function(){
			target=current;
		}
		lis[i].onclick=function(){
			current=this.offsetLeft
		}
	}
	var leader = 0,target = 0;
	setInterval(function(){
		leader = leader+(target-leader)/10;
		cloud.style.left=leader+"px";
	},10)
</script>

  • 客户区

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      /*position: relative;*/
      width: 300px;
      height: 300px;
      background-color: red;
      overflow: hidden;
      margin: 50px;
    }
    #child {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 50px;
      border: 10px solid yellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="child">
    
    </div>
  </div>

  <script type="text/javascript">
    var box = document.getElementById('box');
    var child = document.getElementById('child');
/*    console.log(box.offsetParent);
    //offsetParent,有定位的父元素
    console.log(box.offsetLeft);
    //左外边距
    console.log(box.offsetLeft);
    //上外边距
    console.log(box.offsetWidth);
    //内容宽度
    console.log(box.offsetHeight);
    //offset属性，回去盒子大小和盒子距离父级元素*/

    console.log(child.offsetParent);
    //offsetParent,有定位的父元素
    console.log(child.offsetHeight);
  </script>
</body>
</html>

  • 拖拽案例

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 30px;
            background: #036663;
            border-bottom: 1px solid #369;
            line-height: 30px;
            padding-left: 30px;
        }

        .nav a {
            color: #fff;
            text-align: center;
            font-size: 14px;
            text-decoration: none;

        }

        .d-box {
            width: 400px;
            height: 300px;
            border: 5px solid #eee;
            box-shadow: 2px 2px 2px 2px #666;
            position: absolute;
            top: 40%;
            left: 40%;
            background-color: white;

         }

        .hd {
            width: 100%;
            height: 25px;
            background-color: #7c9299;
            border-bottom: 1px solid #369;
            line-height: 25px;
            color: white;
            cursor: move;
        }

        #box_close {
            float: right;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="javascript:void(0)" id="register">注册信息</a>
</div>
<div class="d-box" id="d_box">
    <div class="hd" id="drop">注册信息 (可以拖拽)
        <span id="box_close">【关闭】</span>
    </div>
    <div class="bd"></div>
</div>
    
    <script type="text/javascript">
        var box = document.getElementById('d_box');
        var drop = document.getElementById('drop');

        drop.onmousedown = function(e) {
            //1.获取鼠标在盒子中的距离
            //1.1 兼容性
            e = e || window.evnet;
            //1.2鼠标在盒子中的位置 = 鼠标在页面上的位置 - 盒子位置
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            //2.当鼠标在页面移动时,求盒子的坐标
            //2.1鼠标在文档中移动
            document.onmousemove = function(e) {
                //盒子的坐标 = 鼠标在页面中的位置 - 鼠标在盒子的位置
                var boxX = e.pageX - x;
                var boxY = e.pageY - y;
                console.log(boxX + '    ' + boxY);
                box.style.left = boxX + 'px';
                box.style.top = boxY + 'px';
            }

        }

        //鼠弹起的时候，移除鼠标移动事件
        document.onmouseup = function() {
            document.onmousemove = null;
        }

        //点击关闭时,隐藏盒子
        var btn = document.getElementById('box_close');
        btn.onclick = function() {
            box.style.display = 'none';
        }

    </script>
</body>
</html>

  • 弹出登录窗口

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
        ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {
            padding: 0px;
            margin: 0px;
        }
        .login {
            width: 512px;
            position: absolute;
            border: #ebebeb solid 1px;
            height: 280px;
            left: 50%;
            right: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            margin-left: -256px;
            margin-top: 140px;
            display: none;
        }
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
        .login-input-content {
            margin-top: 20px;
        }
        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }
        .login-bg {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: #000000;
            opacity: 0.3;
            display: none;
        }
        a {
            text-decoration: none;
            color: #000000;
        }
        .login-button a {
            display: block;
        }
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head> 
<body>
<div class="login-header"><a id="link" href="#">点击，弹出登录框</a></div>
<div id="login" class="login" >
    <div id="title" class="login-title">登录会员
        <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
    </div>
    <div class="login-input-content">
        <div class="login-input">
            <label>用户名：</label>
            <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
        </div>
        <div class="login-input">
            <label>登录密码：</label>
            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
        </div>
    </div>
    <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg" ></div> 
<script>
    //1.显示登录框和遮盖层
    var login = document.getElementById('login');
    var bg = document.getElementById('bg');
    //1.1点击按钮，弹出登录框和遮盖曾
    var link = document.getElementById('link');
    link.onclick = function() {
        login.style.display = 'block';
        bg.style.display = 'block';
        return false;
    }

    //2.点击关闭按钮，隐藏登录框和遮盖层
    var close_btn = document.getElementById('closeBtn');
    close_btn.onclick = function() {
        login.style.display = 'none';
        bg.style.display = 'none';
        return false;
    }

    //3.拖拽
    var title = document.getElementById('title');
    title.onmousedown = function (e) {
        //当鼠标按下的时候，求鼠标在盒子中的位置
        var x = e.pageX - login.offsetLeft;
        var y = e.pageY - login.offsetTop;

        //鼠标移动时，求盒子的坐标
        document.onmousemove = function(e) {
            var loginX = e.pageX - x;
            var loginY = e.pageY - y;
            login.style.left = loginX + 256 + "px";
            login.style.top = loginY -140 + "px";

        }

        document.onmouseup = function() {
            //移除鼠标事件
            document.onmousemove = null;
        }

    }

</script>
</body>
</html>

  • 滚动条

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    #box {
      width: 100px;
      height: 100px;
      margin: 50px;
      border: 30px solid red;
      padding: 10px;
      background-color: green;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div id="box">
    今天：@电影小Q官博 发文宣布该片票房正式破亿。据悉，该片由任达华
  </div>
  
  <script type="text/javascript">
    var box = document.getElementById('box');
    //横向滚动条的距离
    console.log(box.scrollLeft);
    //纵向滚动条的距离
    console.log(box.scrollTop);
    //内容距离减去滚动条距离
    console.log(box.scrollWidth);
    //内容的总高度
    console.log(box.scrollHeight);

    //scroll，获取滚动内容大小和位置
  </script>
</body>
</html>

  • 微博发布

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .box{
            margin: 100px auto;
            width: 600px;
            height: auto;
            border: 1px solid #333;
            padding: 30px 0;
        }
        textarea{
            width: 450px;
            resize: none;/*防止用户拖动*/
        }
        .box li{
            width: 450px;
            line-height: 30px;
            border-bottom: 1px dashed #ccc;
            margin-left: 80px;
        }
        .box li a{
            float: right;
        }
    </style>
    <script>
        window.onload=function () {
            //活获取对象、操作对象；
            var btn=document.getElementsByTagName("button")[0];
            var txt=document.getElementsByTagName("textarea")[0];
            var ul = document.createElement("ul");//创建ul；
            btn.parentNode.appendChild(ul);
            btn.onclick=function () {
                if(txt.value=="")
                {
                    alert("输入不能为空");
                    return false;//终止函数执行；
                }
                var newli = document.createElement("li");
                newli.innerHTML=txt.value+"<a href='javascript:;'>删除</a>";//把表单的值给li；
                ul.appendChild(newli);
                txt.value="";//清空表单；
				var lis = ul.children;//获得有多少个li;
                //下面的代码是让我们新的内容靠上显示；
				if(lis.length==0){//第一次创建
				    ul.appendChild(newli);//ul的后面追加
                }
                else {
                    ul.insertBefore(newli,lis[0]);//每次生成的新的li放到第一个的前面；
                }
                var as = document.getElementsByTagName("a");//获取所有的a
                for(var i=0;i<as.length;i++){
                    as[i].onclick=function () {
                        ul.removeChild(this.parentNode);//ul  它的爸爸；
                        //a的爸爸是li；
                    }
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    微博发布：<textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <!--<ul id="ul">-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
    <!--</ul>-->
</div>
</body>
</html>

  • 短信验证

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送短信验证</title>
</head>
<body>
<input type="text">
<button id="btn">点击发送短信</button>
<script>
    var btn = document.getElementById("btn");
    var count = 10;
    var timer = null;// 给定时器起名字
    btn.onclick=function () {
        this.disabled=true;// 取消按钮的点击状态；
        var  that = this;
        timer = setInterval(sendTextMessage,1000);
        function sendTextMessage() {
            count--;
            if (count>=0){
            that.innerHTML="还需要"+count+"秒"
            }
            else {
                that.innerHTML="重新发送";
                that.disabled=false;
                clearInterval(timer);// 关闭定时器
                count=5;
            }
        }
    }
</script>
</body>
</html>
46. 附录
元素的类型

​ 在这里插入图片描述

qq_43542290
关注
盒子高度塌陷及解决方法、visibility 和 display 隐藏
m0_61700036的博客
10-13 638
一、HTML、CSS、JS 区别于联系 二、盒子高度塌陷 1.什么是元素高度塌陷 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 三、visibility 和 display 隐藏的区别 ...
中软Day04——CSS基础（盒子模型、浮动、定位）
qq_43542290的博客
11-20 668
中软Day04 盒子模型（css重点） 盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 css三个大模块：盒子模型，浮动，定位 网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ 牛奶是怎样运输，让消费者...
分享996个实用的JavaScript特效你要的全在这里
热门推荐
zy0412326的专栏
05-29 1万+
链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 分我就不信没有你想要的。996个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这996个Js也是花了很多时日！下面是JS的名字，我放了一些图片，所有图片全都放进去是不行的996个图太多，大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范.
web前端浮动塌陷
qq_43750360的博客
03-04 521
浮动塌陷概念： 1，在文档流中，父元素的高度是默认被子元素撑开的。也就是说子元素多高父元素多高。 2，但是当为子元素设置为浮动是，子元素会完全脱离文档流，此时会导致子元素无法撑开父元素高度，导致父元素高度塌陷。 3，由于父元素高塌陷，则父元素下的所有元素便都会向上移，导致布局混乱。 解决塌陷的方法： 1，为浮动元素的上级（即所说的父元素）添加高度 副作用：父元素无法自适应子元素的高度。 2，BFC...
用js 实现鼠标移动，移入，移出事件
weixin_71439860的博客
08-08 8317
用js 实现鼠标移动，移入，移出事件
中软Day03——CSS基础（样式、选择器、标签类型）
qq_43542290的博客
09-24 932
中软Day03 认识css css的发展历程 随着html的发展，为了满足前端工程的需求，css应运而生 网页美容师——css 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。 如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师 没有不好看的网页，只有不会CSS的前端。 css初识 CSS通常称为CSS样式表或层叠样式表（级联...
中软国际实习记录——————Day6&&Day7
newmeanl的博客
08-04 334
#Day 6 本次实习课上，老师主要讲的是SSM项目的收尾阶段，包括用户的权限管理，通过给用户增加用户权限的属性或者新建用户权限表然后进行相关联，老师主要讲解后者，这样对于我们原有代码的改动不会很多，不会影响到原有的功能。其次，老师讲解了如何实现过滤器，对于过滤器的配置以及过滤器的原理，我同时也明白了有了过滤器，能帮助我们保护网站的安全，其他用户不能直接使用我们的功能，接着，我们修改了之前写的很多函数，来使他们能通过我们的过滤器。 #课后和体会 本次实验后，我开始学习了修改自己写过的代码，由于修改函数以及参
中软国际实习记录————Day9
newmeanl的博客
08-04 247
#Day 9 在本次实验中，老师继续的去完善了登录功能，并且新增了展示分类功能。首先是用户登录的完善，在原来的基础上对密码进行加密，在这里老师自己写了一个类，将密码按照一定的方式进行编码然后传给数据库，依次来保证密码只有用户本人知道，在验证密码时也是将原有密码进行加密后与数据库进行对比，接着是拦截器的功能，这样可以确保用户必须登录才能使用我们的功能，而不是直接输入网址就能去到对应的页面，所以在登录时必须拦截，如果拦截成功则直接返回到登录界面否则就进行下一步的功能。其次是分类功能，其中包含几个小的功能，展示整
中软国际实习记录————Day10
newmeanl的博客
08-04 262
#Day 10 在本次实习课上，老师主要讲解了如何实现标签模块和新闻模块，其实标签模块和之前做过的分类模块十分的相似很多的功能可以通用，只需要复制分类里的方法，然后修改相应的函数名就行，而新闻模块则比较复杂一些，特别是新闻的新增，需要一个比较复杂的界面，获得整个新闻的各项数据，在前端的后台中去修改相对应的方法。其中的难点是搜索新闻时，调用相应的JPA接口时，需要自己去实现相应的方法，使用Specification去重写SQL语句，这样就能根据条件去搜索了。 #课后和体会 其实本次编写的模块有很多相通的地方，
中软杯项目——Linux下基于签名技术的软件保护（国三）.zip
07-21
对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同...
中软Day07——JavaScript基础（事件、DOM、BOM）
qq_43542290的博客
10-09 222
Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log(‘adf’)) ...
中软Day15——网站区别，前后端分离，JSON
qq_43542290的博客
11-19 210
中软Day15 网站 网站有一系列页面组成 （页面有js css html组成） 所有文件统称资源 静态网站 提前写好的html页面 没有后台，它的页面在服务器中以静态网页的形式存在。 随着网站规模的扩大可维护逐渐降低。 没有交互性（ 用户访问的时候直接将页面从服务器返回由浏览器渲染而不需要通过动态修改页面，所以当我们有修改页面的需求的时候只能让浏览器访问其它页面所以实际上是直...
基于Java的都市供求信息网.zip
10-07
基于Java的都市供求信息网.zip
vtk-9.3.0-cp36-cp36m-win_amd64.whl
最新发布
10-07
vtk-9.3.0-cp36-cp36m-win_amd64.whl
基于Canfesitival的Canopen从站程序及主站程序 stm32 canopen从站通信代码，已经过主控测试，异步心跳
10-07
基于Canfesitival的Canopen从站程序及主站程序 stm32 canopen从站通信代码，已经过主控测试，异步心跳模式或节点保护模式，目前经测试数据更新速率可达1000hz，最快1ms周期，实际测试大概800多us（用F4测试） 支持多pdo传输。 配备对应eds文件。 以及实测can传输报文 此版本为裸机定时器代码，也有RTOS版本 已经使用plc测试过.支持T R_PDO传输。
【电力系统】基于Benders分解算法解决混合整数规划问题机组组合问题附Matlab代码.rar
10-07
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
VMware win7系统安装补丁
10-07
无法安装VMware Tools，且虚拟机图标显示为灰色，把cd，软驱改为“自动检查”，把开机启动关闭，如安装后提示“驱动安装失败，需要手动安装”，打里面的补丁。
I2C总线接口技术的应用.zip
10-07
硬件接口+总线+教程资料
Web基础：JavaScript与CSS详解——函数、变量与DOM操作
"本资源主要介绍了Web基础中的JavaScript和CSS内容，由中软培训中心讲师温春水提供。课程涵盖了以下几个关键知识点： 1. JavaScript的背景：JavaScript最初由Netscape公司开发，目的是增强HTML的基础功能，作为一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值