JS控制窗口移动

2023-04-16 17:11:02JavaScript032

JS控制窗口移动,第1张

我的效果帅得很啊

<html>

<head>

<!--

a:visited{text-decoration:nonecolor:slategray}

a:hover{text-decoration:underlinecolor:slategray}

a:link{text-decoration:nonecolor:slategray}

-->

</style>

<!--

//可以打包为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:12border-width:0pxcolor:whitefont-family:webdings' onclick='min(this)'>0</span>"

+ "<span style='width:12border-width:0pxcolor:whitefont-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>

<!--

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>

</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

}

{

cursor: handfont-size: 9ptfont-family: 宋体text-align: centertext-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>

function change_button(num)

{

if(event.srcElement.tagName=="TD"&&event.srcElement.value=="button")

event.srcElement.className = "button"+num

}

</script>

<tr>

</tr>

</table>

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>无标题文档</title>

*{margin:0pxpadding:0px}

html,body{overflow:hidden}

#cont1 {height: 200pxwidth: 200pxposition: absolutetop: 16pxleft: 19px<br>background-color: #090cursor:movez-index:1}

</style>

window.onload=function(){

function getObj(d){return document.getElementById(d)}

function drag(obj){

var o=document.getElementById(obj)

var move=false

o.onselectStart=function(){return false}

o.onmousedown=function(e){

e=e||event

this.innerHTML="你按下了鼠标！"

move=true

cx=e.clientX-this.offsetLeft

cy=e.clientY-this.offsetTop}//down

o.onmousemove=function(e){

e=e||event

if(move==true){

this.style.left=e.clientX-cx+"px"

this.style.top=e.clientY-cy+"px"}}//move

o.onmouseup=function(){

move=false

this.innerHTML=" "}}//fn

d=document.getElementsByTagName("div").length

drag("cont1") }//onload

</script></head>

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

有两种方法。

1、通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。

示例：

<body>

//d1是外层div，带滚动条

</div>

</body>

document.getElementById('d1').scrollTop=100//通过scrollTop设置滚动到100位置

document.getElementById('d1').scrollLeft=200//通过scrollTop设置滚动到200位置

</script>

2、用html锚点

如下：

<a href="#test">aaaaa</a>

<div id="test">lalallalalalala</div>

扩展资料：

1、JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

（1）、是一种解释性脚本语言（代码不进行预编译）。

（2）、主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

（3）、可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

（4）、跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

2、JavaScript脚本语言具有以下特点:

(1)、脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)、基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)、简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)、动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)、跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

参考资料：百度百科：JavaScript

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”