JavaScript第五课（案例）：实时获取鼠标在div中的坐标、仿百度文库的文字搜索效果、滚动条下移一定距离显示固定导航---3.29 - JavaScript

Home > List of blog posts > JavaScript第五课（案例）：实时获取鼠标在div中的坐标、仿百度文库的文字搜索效果、滚动条下移一定距离显示固定导航---3.29

Blogger Information

Blog 16

fans 2

comment 2

visits 13178

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>实时获取鼠标在div中的【坐标】</title>
	<style type="text/css">
	#main{
		width: 500px;
		height: 400px;
		margin: 100px auto 20px;
		border: 2px solid red;

	}
	p{
		width: 500px;
		height: 50px;
        margin: 0 auto;
        border: 2px solid blue;
        line-height: 50px;
	}

    </style>
</head>
<body>
	<div id="main"></div>
	<p>坐标为：<b id="show">(0,0)</b></p>
<script type="text/javascript">
	window.onload=function(){
		var divobj=document.getElementById('main');
		var showobj=document.getElementById('show');
		divobj.onmousemove=function(event){
			var e=event || window.event; 
			//获取鼠标坐标
			var m_x=e.clientX; //获取鼠标的横坐标
			var m_y=e.clientY; //获取鼠标的纵坐标
			//获取DIV坐标
			var d_x=this.offsetLeft;//offsetLeft:Html元素相对于文档的x轴位置
			var d_y=this.offsetTop; //offsetTop:Html元素相对于文档的Y轴位置
			//鼠标指针相对于区块的相对位置
			var x=m_x-d_x;
			var y=m_y-d_y;
			showobj.innerHTML="("+x+","+y+")"
		}
	}
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：以上代码演示了实时获取鼠标坐标位置

二、仿百度文库的文字搜索效果

实例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>仿百度文库中的文字搜索效果</title>
  <style type="text/css">
    #content {
    width:500px;
    height:200px;
    margin:50px auto;
    border:1px solid #ccc;
    padding:10px;
    border-radius: 5px;
    overflow: auto;
  }
  #nav_menu {
    width:100px;
    height:30px;
    background: #fff;
    line-height: 30px; 
    padding:5px;
    border-radius: 5px;
    border:1px solid #ccc;
    display: none;
    position: fixed;
    top:0;
    left:0;
  }
  #nav_menu button {
    background: transparent;
    border:0;
    color:green;
    cursor: pointer;
  }
  #nav_menu button:hover {
    color: red;
  }
  </style>
</head>
<body>
    <div id="content" onmouseup="change(event)">
    前劳斯莱斯规划履行官吉尔斯泰勒现已搬到一汽轿车部门红旗，从事豪华车的出产。该***转换为“红旗”，出产一些最贵重的中国轿车。贾尔斯泰勒具有26年轿车规划生计，曾先后服务于雪铁龙、捷豹和劳斯莱斯***，主导规划了雪铁龙C3概念车和捷豹XJ、XK等车型。来源:百家号
   </div>
  <p id="nav_menu"><button onclick="copyText()">复制</button>|<button onclick="getSearch()">搜索</button></p>
  <script>
     function getSelect() {
       return window.getSelection().toString();//getSelection()方法可以返回一个Selection对象，用于表示用户选择的文本范围
     }
     function change(event){
      var str=getSelect()
      var e=event || window.event;
      if(str.length>0){
          var x=e.clientX; //鼠标指针横坐标
          var y=e.clientY;//鼠标指针纵坐标 
          var menu=document.getElementById('nav_menu');
          menu.style.left=x+'px';
          menu.style.top=y+'px';
          menu.style.display="block";
      }else{
          menu.style.display="none";
      }

     }
     //复制
     function copyText(){
      document.execCommand("Copy");
      document.getElementById('nav_menu').style.display="none"
     }
     //搜索
     function getSearch(){
      if(getSelect()){
        window.location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_4_dg&wd="+getSelect()
      }
      document.getElementById('nav_menu').style.display="none"
     }

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：以上代码演示了，选中复制粘搜索的应用。

三、滚动条下移一定距离显示固定导航

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>滚动条下移一定距离显示固定导航</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#main{
		width: 100%;
		height: 70px;
		background: red;
		line-height: 70px;
		text-align: center;
	}
	#box{
		width: 100%;
		height: 70px;
		background: blue;
		line-height: 70px;
		text-align: center;
		position: fixed;top: 0;
		display: none;
	}
	input{
		width: 700px;
		height: 40px;
		border:0;
		border-radius: 30px;
	}
	.main{
		height: 1600px;
		margin: 0 auto;
		background: #ccc;
	}
    </style>
</head>
<body>
	<div id="main">
		<input type="" name="">
	</div>
	<div id="box">
		<input type="" name="">
	</div>
    <div class="main"></div>
<script type="text/javascript">
	window.onload=function(){
		document.onscroll=function(){
			if (document.documentElement.scrollTop>300) {
				document.getElementById('box').style.display="block"
			}else{
				document.getElementById('box').style.display="none"
			}
		}
	}
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：以上代码演示了，当滚动滚动条一定距离后显示一个固定导航。

四、三级联动

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>三级联动</title>
	<style type="text/css">
    </style>
</head>
<body>
	<form>
		<select name="sel" id="sheng">
			<option>请选择省会</option>
			<option value="江苏省">江苏省</option>
			<option value="广东省">广东省</option>
			<option value="河南省">河南省</option>
		</select>
		<select name="sel" id="shi">
			<option value="">请选择市</option>
		</select>
		<select name="sel" id="qu">
			<option value="">请选择区</option>
		</select>
	</form>
<script type="text/javascript">
	window.onload=function(){
		function getId(id){
			return document.getElementById(id)
		}
		var sheng=getId('sheng');
		var shi=getId('shi');
		var qu=getId('qu');
		var m;
		var n;
		var p;
		var that;
		var arr=[
		          "江苏省",["南京市",["南京一区","南京二区","南京三区"],"苏州市",["苏州一区","苏州二区","苏州三区"]],
		          "广东省",["东菀市",["东莞一区","东莞二区","东莞三区"],"广东市",["广东一区","广东二区","广东三区"]],
		          "河南省",["郑州市",["金水区","开发区","高新区"],"安阳市",["文峰区","北关区","高新区"]]
		]
		console.log(arr) //拿到数组
		console.log(arr[0]) //拿到省
		console.log(arr[1][0])//拿到市
		console.log(arr[1][1][0])//拿到区

		sheng.onchange=function(){
			that=this;//就是将当前的this对象复制一份到that变量中，临时储存。
			for (var i = 0; i<arr.length; i+=2) {
				if(arr[i]==this.value){
					m=i;
					printShi(m)
					printQu(m,1)
				}
			}
			shi.onchange=function(){
				for(var i=0;i<arr.length;i+=2){
					if(arr[i]==that.value){
						n=i;
						for(var j=0,len=arr[n+1].length;j<len;j+=2){
							if(arr[n+1][j]==this.value)
								p=j
							printQu(n,p+1)
						}
					}
				}
			}
		}
      function printShi(x){
      	shi.innerHTML="<option value="+arr[x+1][0]+">"+arr[x+1][0]+"</option>";
      	 for(var j=2,len=arr[x+1].length;j<len;j+=2){
      	 	//将市列表显示出来
      	 	var shioption=document.createElement("option") //createElement() 方法通过指定名称创建一个元素
      	 	shioption.setAttribute("value",arr[x+1][j])//修改value
      	 	shioption.innerHTML=arr[x+1][j];
      	 	//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点
      	 	shi.appendChild(shioption);

      	 }
      }
       function printQu(x,y){
      	  qu.innerHTML="<option value="+arr[x+1][y][0]+">"+arr[x+1][y][0]+"</option>";
      	 for(var j=2,len=arr[x+1][y].length;j<len;j++){
      	 	//将市列表显示出来
      	 	var quoption=document.createElement("option") //createElement() 方法通过指定名称创建一个元素
      	 	quoption.setAttribute("value",arr[x+1][y][j])//修改value
      	 	quoption.innerHTML=arr[x+1][y][j];
      	 	//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点
      	 	qu.appendChild(quoption);

      	 }
      }


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

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：跟着老师敲出来，数组关系，调用都还是不熟悉，后续回来补习。

五、语法小扩展

window.onload

window.onload 是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。

当 js 代码需要获取页面中的元素时，如果 script 标签在元素的前面，需要加 window.onload；如果 script 放在了元素后面，就不需要加 window.onload。

语法示例：window.onload=function()

window.getSelection

getSelection() 方法可以返回一个 Selection 对象，用于表示用户选择的文本范围或插入符的当前位置。

语法示例：selection = window .getSelection（）;

toString()

toString() 方法可把一个逻辑值转换为字符串，并返回结果。

示例：booleanObject.toString()

onscroll

onscroll 事件在元素滚动条在滚动时触发。

scrollTop()

scrollTop() 方法设置或返回被选元素的垂直滚动条位置。

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

web基础第一课：html文档结构及常用标签讲解--2019.3.11

2019-03-13 14:25:55