问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501

JS控制窗口移动

发布网友 发布时间:2022-04-29 07:56

我来回答

2个回答

热心网友 时间:2022-05-16 19:50

我的效果帅得很啊

<html>
<head>
<title>_xWin</title>
<style type='text/css'>
<!--
a:visited{text-decoration:none;color:slategray;}
a:hover{text-decoration:underline;color:slategray;}
a:link{text-decoration:none;color:slategray;}
-->
</style>
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='orange',normal='slategray';//color;
var index=10000;//z-index;
//开始拖动;
function startDrag(obj)
{
if(event.button==1)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
var win = obj.parentNode;
var sha = win.nextSibling;
//记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style.left);
y1 = parseInt(win.style.top);
//记录颜色;
normal = obj.style.backgroundColor;
//改变风格;
obj.style.backgroundColor = hover;
win.style.borderColor = hover;
obj.nextSibling.style.color = hover;
sha.style.left = x1 + offx;
sha.style.top = y1 + offy;
moveable = true;
}
}
//拖动;
function drag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
sha.style.left = parseInt(win.style.left) + offx;
sha.style.top = parseInt(win.style.top) + offy;
}
}
//停止拖动;
function stopDrag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
var msg = obj.nextSibling;
win.style.borderColor = normal;
obj.style.backgroundColor = normal;
msg.style.color = normal;
sha.style.left = obj.parentNode.style.left;
sha.style.top = obj.parentNode.style.top;
obj.releaseCapture();
moveable = false;
}
}
//获得焦点;
function getFocus(obj)
{
if(obj.style.zIndex!=index)
{
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
}
//最小化;
function min(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
var tit = obj.parentNode;
var msg = tit.nextSibling;
var flg = msg.style.display=="none";
if(flg)
{
win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
msg.style.display = "block";
obj.innerHTML = "0";
}
else
{
win.style.height = parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
obj.innerHTML = "2";
msg.style.display = "none";
}
}
//关闭;
function cls(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
win.style.visibility = "hidden";
sha.style.visibility = "hidden";
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
index = index+2;
this.id = id;
this.width = w;
this.height = h;
this.left = l;
this.top = t;
this.zIndex = index;
this.title = tit;
this.message = msg;
this.obj = null;
this.bulid = bulid;
this.bulid();
}
//初始化;
function bulid()
{
var str = ""
+ "<div id=xMsg" + this.id + " "
+ "style='"
+ "z-index:" + this.zIndex + ";"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "left:" + this.left + ";"
+ "top:" + this.top + ";"
+ "background-color:" + normal + ";"
+ "color:" + normal + ";"
+ "font-size:10px;"
+ "font-family:Verdana;"
+ "position:absolute;"
+ "cursor:default;"
+ "border:2px solid " + normal + ";"
+ "' "
+ "onmousedown='getFocus(this)'>"
+ "<div "
+ "style='"
+ "background-color:" + normal + ";"
+ "width:" + (this.width-2*2) + ";"
+ "height:20;"
+ "color:white;"
+ "' "
+ "onmousedown='startDrag(this)' "
+ "onmouseup='stopDrag(this)' "
+ "onmousemove='drag(this)' "
+ "ondblclick='min(this.childNodes[1])'"
+ ">"
+ "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"
+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"
+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span>"
+ "</div>"
+ "<div style='"
+ "width:100%;"
+ "height:" + (this.height-20-4) + ";"
+ "background-color:white;"
+ "line-height:14px;"
+ "word-break:break-all;"
+ "padding:3px;"
+ "'>" + this.message + "</div>"
+ "</div>"
+ "<div style='"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "top:" + this.top + ";"
+ "left:" + this.left + ";"
+ "z-index:" + (this.zIndex-1) + ";"
+ "position:absolute;"
+ "background-color:black;"
+ "filter:alpha(opacity=40);"
+ "'>by wildwind</div>";
document.body.insertAdjacentHTML("beforeEnd",str);
}
//-->
</script>
<script language='JScript'>
<!--
function initialize()
{
var a = new xWin("1",160,200,200,200,"Message","xWin <br> A Cool Pop Div Window<br>Version:1.0<br>2005-7-12");
var b = new xWin("2",240,200,100,100,"Wildwind's Msgbox","Welcome to visited my personal website:<br><a href=http://www.webjx.com/ target=_blank>http://www.webjx.com</a><br>and u can also sign my guestbook at:<br><a href=http://www.webjx.com/ target=_blank>http://www.webjx.com</a><br><br>thx!!! =)...");
var c = new xWin("3",200,160,250,50,"Copyright","Copyright by <a href='mailto:web@webjx.com'>Wildwind</a>!");
}
window.onload = initialize;
//-->
</script>
</head>
<body onselectstart='return false' oncontextmenu='return false' scroll='no'>
</body>
</html>
微软风格的按钮
<html>
<head>
<style>
.button2
{
border-right:1px solid buttonhighlight;
border-left:1px solid buttonshadow;
border-bottom:1px solid buttonhighlight;
border-top:1px solid buttonshadow
}
TD
{
cursor: hand; font-size: 9pt; font-family: 宋体; text-align: center; text-valign: middle
}
.handin
{
height:18px;
width:2px;
border-left:1px solid buttonshadow;
border-right:1px solid buttonhighlight
}
.handout
{
height:18px;
width:2px;
border-left:1px solid buttonhighlight;
border-right:1px solid buttonshadow;
}
.into
{
width:100%;
border-right:1px solid buttonhighlight;
border-left:1px solid buttonshadow;
border-bottom:1px solid buttonhighlight;
border-top:1px solid buttonshadow
}
.outto,.button1
{
background-color: buttonface;
background-repeat: repeat;
background-attachment: scroll;
border-left: 1px solid buttonhighlight;
border-right: 1px solid buttonshadow;
border-top: 1px solid buttonhighlight;
border-bottom: 1px solid buttonshadow;
background-position: 0%"
}
.button0
{
}
</style>
</head>
<body topmargin="0" leftmargin="0" bgcolor="#E0E0E0">
<script>
function change_button(num)
{
if(event.srcElement.tagName=="TD"&&event.srcElement.value=="button")
event.srcElement.className = "button"+num;
}
</script>
<div class="into" style="width: 100%; height: 25">
<table class="outto" border="0" width="100%" height="25" cellspacing="1" onmouseover="change_button(1)" onmouseup="change_button(0)" onmousedown="change_button(2)" onmouseout="change_button(0)">
<tr>
<td width="1%" height="19"><span class="handout"></span></td>
<td width="9%" height="19" value="button">按钮TD</td>
<td width="1%" height="19"><span class="handin"></span></td>
<td width="9%" height="19" value="button">按钮TD</td>
<td width="1%" height="19"><span class="handin"></span></td>
<td width="9%" height="19" value="button">按钮TD</td>
<td width="1%" height="19"><span class="handin"></span></td>
<td width="69%" height="19"></td>
</tr>
</table>
</div>
</body>
</html>

热心网友 时间:2022-05-16 21:08

<html>
<head>
<title> 网页名称 </title>
</head>

<body>
<img src="c.jpg" width="240" height="320" id="moim" />
<script type="text/javascript">
var moing = false;
var Cx, Cy;
moim.onmousedown = function ()
{
if(moing) return;
Cx = event.screenX;
Cy = event.screenY;
moing = true;
}

document.onmouseup = function ()
{
if(moing) moing = false;
}

document.onmousemove = function()
{
if(!moing) return;
window.moveBy(event.screenX-Cx,event.screenY-Cy);
Cx = event.screenX;
Cy = event.screenY;
}
</script>
</body>
</html>
js有没有浏览器窗口移动事件

这个里面在Main.js中使用了一个定时器,通过定时器去判断浏览器是否位置改变。function play() {setInterval( loop, 1000 / 40 );}function getBrowserDimensions() { var changed = false;if (stage[0] != window.screenX) { delta[0] = (window.screenX - stage[0]) * 50;stage[0] =...

js 怎么控制屏幕随着手指的触摸上下移动

function touchMoveFunc(evt) { var touch = evt.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 //判断滑动方向 上下 if (y - startY &gt; 0) { swipeDown(); //往下移动 } else if(y - startY ...

js控制一个div移动,当鼠标移动到该div上停止移动,我只做出了移动,求大...

var timer;function move(){,,,}function stop() {//这就是要实现停止的方法clearInterval(timer);}timer要定义在外边,这样stop中才可以用

js实现div自动在窗口左右移动

var windowWidth = win.clientWidth; var windowHeight = win.clientHeight; if (windowWidth - width &lt; (left + i)) { i = -i; } else if ((left + i) &lt; 0) { i = -i; } if (windowHeight - height &lt; (top + j)) { ...

JS如何将窗口移动到屏幕外面

如果你想实现拖动效果,并把层拖动到当前窗口外隐藏掉的话,可以用我上面写的JS代码。如果你只是想某个窗口隐藏掉,只用CSS就可以了,方法很多,可以设置它的visibility:hidden;或者用绝对定位方法,将它的left或者top设置成负的,值它的宽度或者高度,然后给它的父元素添加CSS样式:position:relative;...

如何使用js保持div随滚动条移动跟着移动 比如一直在窗口的上端?

创建一个id为menu_zdd的盒子 document.getElementById("menu_zdd").style.position="absolute";document.getElementById("menu_zdd").style.top=(parseInt(document.documentElement.clientHeight,10)/2)+parseInt(document.documentElement.scrollTop,10)-50+"px";document.getElementById("menu_zdd")....

js如何控制整个页面滚动条的位置

有两种方法。1、通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。示例: //d1是外层div,带滚动条 2222 document.getElementById('d1').scrollTop=100;//通过scrollTop设置滚动到100位置 document.getElementById('d1').scrollLeft=200;//通过scrollTop设置...

网页中会有一个小窗口在网页四周来回弹,鼠标一放上去就停止弹动了,点击...

悬浮移动广告,用js和html写的 比较简单,只要判断是否到边界,如果到了边界然后改变方向,当mouseenter便停止,mouseleave便移动

如何通过js控制div中文本的上下移动

用document.getElementById(div1)获取到该div,然后操作它就行了,如果是文本上下移动你完全可以使用marquee标签啊

如何解决js:window.open()设置新打开的页面的大小不可改变的问题?_百 ...

window.resizeTo(800,600);//调整大小 window.moveTo(200,200);//移动位置} 但是这种方式好像只有在IE下有效,Firefox和Chrome无效,你自己试试。暂时不知道有什么其他兼容性好的办法。JS如何设置并限制浏览器窗口的大小?方法一: window.moveTo(0, 0);//移动窗口 window.resizeTo(800, 600);...

JS控制页面元素在一定距离内移动 js控制div上下移动 js控制元素移动 移动宽带上网时间控制 控制一个球移动的游戏 移动宽带怎么用手机控制 移动宽带用哪个app可以控制 用意念控制物体移动 手机控制移动机顶盒
声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com
斯特拉斯克莱德大学研究生 小米移动是什么类型的卡 印地方程式赛赛车车队 我想电话订购9月30号的到广州的车票,可是电话订票到明天上午10.00才能开... ...卧铺非常紧张。。。我要怎样才订得到?哪天几点钟... 网络订票和电话订票都是几点开始?北京到大连的火车票预订 电话订票到底几点开始啊?8点卖12天后的票,我8点打,就告诉我卖完了?有知... 电话订票可以提前几天.几点开始订 暑假工是否可以随时辞职 求教:Photoshop CS激活与免激活有何不同? js拖拽问题 比如一个页面有一个frame框架,分左右两边,然后左边有一些东 ... 苹果产品直销店怎么开,需要什么手续,有什么要求 用html,js设置背景图片 为门帘 不管滚动条怎么拖动 都还是固定不变的... 如何获取mac彩妆专柜的经营权? html,css,js这些代码有没有那种软件,自行拖拽模块组成想要得样式,想 ... 请高手解析 用js代码写出一个页面加载后能不断变换背景的效果? 第四个字是世成语有哪些 JS、JQ 实现拖动事件,拖到最右位置时,改变背景色!!! 【合集】在线国产播放不卡视频,【在线观看】免费百度云资源 年大计是一个四个字的成语求它的前一个字 如何用js自定义页面背景 【合集】国产视频高清不卡,【免费高清】在线观看百度网盘资源 盘点国产视频高清在线不卡,【在线观看】免费百度云资源 年年尚什么四个字的成语? 这四个字是成语,如“年年有余”? 最后一个字是年的成语 什么之年,四个字,成语 我想找粘年年有余四个字的成语里面还有什么年 带年的成语四字成语有哪些 第四个字是年的成语有哪些 开一个苹果专卖店都要什么条件吗 一个对页面节点的拖踹用原生js该如何实现 想开个苹果专卖店 达到什么条件 和要求? 如何成为苹果电脑授权专卖店? JS高手请进,如何实现网页弹出框后背景灰掉不能滑动的效果?不胜感激... 怎么开苹果专卖店? MAC彩妆可以代理或加盟吗?想在商场开个专柜需要什么条件? 如何编写一个js,适用于所有浏览器可用鼠标在页面移动的DIV层? 开一个苹果专卖店需要投入多少钱?加盟费什么的都算进去50万够了么?有开过或者懂的说下! 如何开苹果专卖店 请问,怎么开个魅可的专柜? 高分!想开个apple苹果专卖店,江苏县级市的,请问有啥路子? 怎样开苹果专卖店呢 开个苹果专卖店要怎么获得苹果公司的授权? 如果想开个苹果专卖店,进货渠道谁能给点建议吗? 我想开家苹果apple 专卖店,怎么找货源,怎么才能成为一家代理经销商! 想开一个苹果专卖店,需要多少资金?货源一般从哪里进。 我想代理MAC化妆品,但看了好多人说MAC在*只是自己设专柜。谁能提供下中国总代理的总部地址? 网课教学与线下教学的不同点有哪些? 《你走你的路》歌词