内容的显示/隐藏&&拖拽

最新推荐文章于 2021-10-24 17:01:19 发布

weixin_30371875

最新推荐文章于 2021-10-24 17:01:19 发布

阅读量174

点赞数

原文链接：http://www.cnblogs.com/www-cqtblogs-com/p/6680992.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>显示/隐藏&&拖拽</title>
</head>
<style>
　　*{
　　　　margin: 0;
　　　　padding: 0;
　　}
　　#box{
　　　　position: relative;
　　}
　　input{
　　　　cursor: pointer;
　　}
　　#inner{
　　　　width: 100%;
　　　　height: 900px;
　　　　background-color: rgba(0,0,0,0.2);
　　　　position: absolute;
　　　　left: 0;
　　　　top: 0;
　　　　z-index: 1;
　　　　display: none;
　　}
　　span{
　　　　width: 200px;
　　　　height: 200px;
　　　　display: block;
　　　　background-color: #fff;
　　　　position: absolute;
　　　　left: 200px;
　　　　top: 200px;
　　　　cursor: move;//将鼠标改为十字架
　　}
　　a{
　　　　display: inline-block;
　　　　position: absolute;
　　　　right: 0;
　　　　top: 0;
　　　　font-size: 15px;
　　　　color: pink;
　　　　text-decoration: none;
　　}
</style>
<body>
　　<div id="box">
　　　　<input type="button" value="显示/隐藏">
　　　　<div id="inner">
　　　　　　<span>
　　　　　　　　<a href="###">X</a>
　　　　　　</span>
　　　　</div>
　　</div>
　　<script>
　　　　var inputs=document.getElementsByTagName("input")[0];
　　　　var inner=document.getElementById("inner");
　　　　var spans=inner.getElementsByTagName("span")[0];
　　　　var as=inner.getElementsByTagName("a")[0];

　　　　// 鼠标点击事件
　　　　inputs.οnclick=function(){
　　　　　　inner.style.display="block";
　　　　}
　　　　as.οnclick=function(){
　　　　　　inner.style.display="none";
　　　　}

　　　　// 鼠标拖拽，内容不离开可视区
　　　　spans.οnmοusedοwn=function(e){
　　　　　　var ev=e||window.event;//兼容浏览器
　　　　　　var l=ev.clientX-spans.offsetLeft;// 鼠标到内容即spans左边的距离(鼠标每点一次以后固定值)
　　　　　　var t=ev.clientY-spans.offsetTop; // 鼠标到内容即spans上边的距离(鼠标每点一次以后固定值)
　　　　　　// console.log(l)
　　　　　　// console.log(spans.offsetLeft)
　　　　　　spans.οnmοusemοve=function(e){
　　　　　　　　　var ev=e||window.event;
　　　　　　　　　var nl=ev.clientX-l;// 内容即spans到浏览器左边的距离（随鼠标的改变距离改变——不定）
　　　　　　　　　var nt=ev.clientY-t;// 内容即spans到浏览器上边的距离（随鼠标的改变距离改变——不定）

　　　　　　　　　// 使内容即spans不离开可视区
　　　　　　　　　// 左右
　　　　　　　　　if(nl<0){
　　　　　　　　　　　　nl=0;
　　　　　　　　　}else if(nl>document.documentElement.clientWidth-spans.offsetWidth){
　　　　　　　　　// document.documentElement.clientWidth——表示浏览器可视区的宽度（不包括边线）
　　　　　　　　　nl=document.documentElement.clientWidth-spans.offsetWidth;
　　　　　　　　　// console.log(document.documentElement.clientWidth)
　　　　　　　　　}

　　　　　　　　// 上下
　　　　　　　　if(nt<0){
　　　　　　　　　　　nt=0;
　　　　　　　　}else if(nt>document.documentElement.clientHeight-spans.offsetHeight){
　　　　　　　　　　// document.documentElement.clientHeight——表示浏览器可视区的高度（不包括边线）
　　　　　　　　　　nt=document.documentElement.clientHeight-spans.offsetHeight;
　　　　　　　　　　// console.log(document.documentElement.clientHeight)
　　　　　　　　}
　　　　　　　　spans.style.left=nl+'px';// 内容即spans到浏览器左边的距离+单位——为内容即span距离浏览器左边的距离
　　　　　　　　spans.style.top=nt+'px';// 内容即spans到浏览器上边的距离+单位——为内容即span距离浏览器上边的距离
　　　　　　　　// console.log(nl)
　　　　　　}
　　　　　　spans.οnmοuseup=function(){
　　　　　　spans.οnmοusemοve=null;
　　　　}
　　}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/www-cqtblogs-com/p/6680992.html

weixin_30371875

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内容的显示/隐藏&&拖拽

<!DOCTYPE html><html lang="en"><head> 　　<meta charset="UTF-8"> 　　<title>显示/隐藏&&拖拽</title></head><style> 　　*{ 　　　　margin: 0; 　　　　padding: 0; 　　...
复制链接

扫一扫