实例 鼠标在框内移动显示所在坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>坐标</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
#main{
width: 500px;
height:400px;
margin:20px auto;
border:5px solid #ccc;
}
p{
width: 500px;
height: 50px;
border:5px solid #ccc;
margin:0 auto;
line-height: 50px;
}
</style>
</head>
<body>
<div id="main">
</div>
<p id="site"><span>坐标是</span>
<strong>0 0</strong>
</p>
<script>
window.onload=function(){
var main_obj=document.getElementById('main');
var site_obj = document.getElementById('site').getElementsByTagName('strong')[0];
main_obj.onmousemove=function(event){
var e = event || window.event;
var mouseX = e.clientX;
var mouseY = e.clientY;
var obj_left = this.offsetLeft;
var obj_top = this.offsetTop;
site_obj.innerHTML = (mouseX-obj_left)+" "+(mouseY-obj_top);
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 复制搜索
<!DOCTYPE html>
<html>
<head>
<title>仿百度文库中的文字搜索效果</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<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();
}
function change(event){
var e = event || window.event();
if(getSelect().length>0){
var nav_menu = document.getElementById('nav_menu');
var ex = e.clientX+'px';
var ey = e.clientY+'px';
nav_menu.style.left = ex;
nav_menu.style.top = ey;
nav_menu.style.display='block';
}else{
nav_menu.style.display='none';
}
//document.execCommand('copy');
}
function copyText(){
document.getElementById('nav_menu').style.display='none';
}
function getSearch(){
if(getSelect()){
window.location.href="https://www.baidu.com/s?wd="+getSelect();
}
document.getElementById('nav_menu').style.display='none';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
#nav{
height:50px;
line-height:50px;
background: red;
color:#fff;
font-size:20px;
text-align:center;
width: 100%;
position: fixed;
top:0;
display: none;
}
#kong{
height:1500px;
}
</style>
</head>
<body>
<div id="nav">
这个是一个顶部的导航条
</div>
<div id="kong">
</div>
<script>
window.onload=function(){
window.onscroll=function(){
console.log(document.documentElement.scrollTop);
if(document.documentElement.scrollTop>300){
document.getElementById('nav').style.display='block';
}else{
document.getElementById('nav').style.display='none';
}
console.log('网页可见区域宽：'+ document.body.clientWidth)
console.log('网页可见区域高：'+ document.body.clientHeight)
console.log('网页可见区域宽(包括边线的宽)：'+ document.body.offsetWidth )
console.log('网页可见区域高(包括边线的高)：'+ document.body.offsetHeight )
console.log('网页正文全文宽：'+ document.body.scrollWidth)
console.log('网页正文全文高：'+ document.body.scrollHeight)
console.log('网页被卷去的高：'+ document.body.scrollTop)
console.log('网页被卷去的左：'+ document.body.scrollLeft)
console.log('网页正文部分上：'+ window.screenTop)
console.log('网页正文部分左：'+ window.screenLeft)
console.log('屏幕分辨率的高：'+ window.screen.height)
console.log('屏幕分辨率的宽：'+ window.screen.width)
console.log('屏幕可用工作区高度：'+ window.screen.availHeight)
console.log('屏幕可用工作区宽度：'+ window.screen.availWidth)
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
