实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box,.box1{
width: 400px;
height: 400px;
border:2px solid red;
margin: 20px auto;
}
.show{
width: 400px;
height: 40px;
border:2px solid red;
margin: 0 auto;
text-align: center;
line-height: 40px;
}
.show1{
width: 100px;
height: 40px;
border:1px solid #eee;
border-radius: 5px;
position: fixed;
top:10px;
left: 10px;
text-align: center;
line-height: 40px;
display: none;
background: white;
}
button{
border: none;
background: none;
font-size: 14px;
outline: none;
}
.show1 button:hover{
color: red;
}
input{
width: 100%;
height: 45px;
position: fixed;
top:0;
left: 0;
background: red;
display:none;
}
select{
margin: 30px 100px;
}
</style>
</head>
<body>
<div class="box" onmousemove="ShowCoordinate(event)" ></div>
<p class="show">当前坐标<span>(a,b)</span></p>
<div class="box1" onmouseup="ShowBox(event)">
昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否？应是绿肥红瘦。
无言独上西楼，月如钩。寂寞梧桐深院锁清秋。
剪不断，理还乱，是离愁。别是一般滋味在心头。(一般 一作：一番)
昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否？应是绿肥红瘦。
无言独上西楼，月如钩。寂寞梧桐深院锁清秋。
剪不断，理还乱，是离愁。别是一般滋味在心头。(一般 一作：一番)
昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否？应是绿肥红瘦。
无言独上西楼，月如钩。寂寞梧桐深院锁清秋。
剪不断，理还乱，是离愁。别是一般滋味在心头。(一般 一作：一番)
昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否？应是绿肥红瘦。
无言独上西楼，月如钩。寂寞梧桐深院锁清秋。
剪不断，理还乱，是离愁。别是一般滋味在心头。(一般 一作：一番)
</div>
<p class="show1">
<button onclick="copy()">复制</button>
<span>|</span>
<button onclick="search()">搜索</button>
</p>
<div style="width: 60px;height: 1000px;background: yellow;"></div>
<input type="text"/>
<select id="province">
<option>请选择省</option>
<option>安徽省</option>
<option>四川省</option>
<option>江苏省</option>
</select>
<select id="city">
<option>请选择市</option>
</select>
<select id="area">
<option>请选择区</option>
</select>
<div style="width: 60px;height: 1000px;background: yellow;"></div>
<script>
/*
1.实时获取鼠标在div中的【坐标】
2.仿百度文库中的文字搜索效果
3.滚动条下移一定距离显示【固定的导航】
4.三级联动
*/
/*window.onload=function(){
var box=document.getElementsByClassName('box')[0];
var show=document.getElementsByClassName('show')[0];
var show_span=show.getElementsByTagName('span')[0];
box.onmousemove=function(e){
var e=e||window.event;
//获取鼠标xy坐标
var ox=e.clientX;
var oy=e.clientY;
//获取box在页面的坐标
var box_x=box.offsetLeft;
var box_y=box.offsetTop;
//鼠标坐标减去box在页面的坐标，就等于鼠标在box内的坐标
var x=ox - box_x;
var y=oy - box_y;
//把坐标添加到span
show_span.innerHTML='('+x+','+y+')';
}
}*/
function ShowCoordinate(event){
var e=event || window.event;
var box=document.getElementsByClassName('box')[0];
var show=document.getElementsByClassName('show')[0];
var show_span=show.getElementsByTagName('span')[0];
//获取鼠标xy坐标
var ox=e.clientX;
var oy=e.clientY;
//获取box在页面的坐标
var box_x=box.offsetLeft;
var box_y=box.offsetTop;
//鼠标坐标减去box在页面的坐标，就等于鼠标在box内的坐标
var x=ox - box_x;
var y=oy - box_y;
//把坐标添加到span
show_span.innerHTML='('+x+','+y+')';
}
/*2.仿百度文库中的文字搜索效果*/
/*选中*/
function getSelect() {
return window.getSelection().toString();//getSelection()方法可以返回一个Selection对象，用于表示用户选择的文本范围
}
function ShowBox(event){
var e=event || window.event;
console.log(e);
var box=document.getElementsByClassName('box1')[0];
var show=document.getElementsByClassName('show1')[0];
//var show_span=show.getElementsByTagName('span')[0];
var str=getSelect(); //获取选中的字体
//获取鼠标xy坐标
var ox=e.clientX;
var oy=e.clientY;
//把show1d定位到选中的字体
if(str){
show.style.left=ox+'px';
show.style.top=oy+'px';
show.style.display='block';
}
console.log(str);
}
function copy(){
document.execCommand("Copy");//获取选中的字体
var show=document.getElementsByClassName('show1')[0];
show.style.display='none';
}
function search(){
var str=getSelect(); //获取选中的字体
window.location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_4_dg&wd="+str
}
/*3.滚动条下移一定距离显示【固定的导航】*/
document.onscroll=function(event){
var e = event || window.event;
//获取滚动条滚动的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);
//获取input
var inp=document.getElementsByTagName('input')[0];
if(scrollTop>=885){
inp.style.top=0;
inp.style.left=0;
inp.style.display='block';
}
}
/* 4.三级联动*/
var arr=[ //省0 2 4 6 //市1 3 5 7 //区
'请选择省',[
'请选择市',['请选择区']
],
'安徽省',[
'合肥市',[
'瑶海区','庐阳区','蜀山区','包河区'
],
'芜湖市',[
'鸠江区','镜湖区','弋江区','三山区'
],
'六安市',[
'金安区'
],
'淮南市',[
'大通区','田家庵区'
],
'安庆市',[
'迎江区','大观区'
]
],
'四川省',[
'成都市',[
'锦江区','青羊区','金牛区'
],
'自贡市',[
'自流井区','贡井区'
]
],
'江苏省',[
'常州市',[
'天宁区','钟楼区','新北区'
],
'徐州市',[
'鼓楼区','云龙区'
],
'南京市',[
'玄武区','秦淮区','建邺区'
],
'淮安市',[
'清河区','淮安区'
]
]
];
function $(id){
return document.getElementById(id);
}
$('province').onchange=function(e){
//清空市
$('city').innerHTML='';
var opt = document.createElement('option');
opt.innerHTML='请选择市';
//填充市
$('city').appendChild(opt);
var index = $('province').selectedIndex; //选中的option索引
console.log($('province').options[index].value);
//请选择省0---》0 安徽省1====》2 四川省2===》4 江苏省3 ===》6
//省（index）*2+1==》市
// 0 ===>0 1===2 2===4 3===6
//市 index*2
for(var i=0;i<arr[index*2+1].length;i++){
if(i%2==0){
var opt = document.createElement('option');
opt.innerHTML=arr[index*2+1][i];
//填充市
$('city').appendChild(opt);
}
}
/*区*/
$('city').onchange=function(){
//清空区
$('area').innerHTML='';
var opt1 = document.createElement('option');
opt1.innerHTML='请选择区';
//填充区
$('area').appendChild(opt1);
var city_index = $('city').selectedIndex; //选中的option索引
console.log(city_index);
console.log(index);
console.log(arr[index*2+1]);
if(city_index!=0){
console.log(arr[index*2+1]);
console.log(arr[index*2+1][city_index*2-1]);
for(var j=0;j<arr[index*2+1][city_index*2-1].length;j++){
var opt1 = document.createElement('option');
opt1.innerHTML=arr[index*2+1][city_index*2-1][j];
//填充区
$('area').appendChild(opt1);
}
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例