- 浏览: 321492 次
- 性别:
- 来自: 上海
文章分类
最新评论
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>move</title>
<style type="text/css">
body{
font-size:12px;
color:#849BCA;
}
#btn{
float:left;
}
#move{
width:500px;
height:200px;
background:#EDF1F8;
border: 2px solid #849BCA;
float:left;
overflow:hidden;
position:absolute;
left:80px;
top:50px;
cursor:move;
}
.content{
padding:10px;
}
</style>
</head>
<body>
<div id="btn">
<input type="button" value="打开" onclick="sw(this,'move');"/>
</div>
<div id="move" style="display:none;filter:alpha(opacity=100);opacity:1;">
<div class="content">移动层</div>
</div>
<script type="text/javascript">
var prox;
var proy;
var proxc;
var proyc;
function sw(o,id){
if (o.value=="打开"){
o.value="关闭";
show(id)
}
else{
o.value="打开"
close(id)
}
}
function show(id){/*--打开--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
o.style.display = "block";
o.style.width = "1px";
o.style.height = "1px";
prox = setInterval(function(){openx(o,500)},10);
}
function openx(o,x){/*--打开x--*/
var cx = parseInt(o.style.width);
if(cx < x){
o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
}
else{
clearInterval(prox);
proy = setInterval(function(){openy(o,200)},10);
}
}
function openy(o,y){/*--打开y--*/
var cy = parseInt(o.style.height);
if(cy < y){
o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
}
else{
clearInterval(proy);
}
}
function close(id){/*--关闭--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
if(o.style.display == "block"){
proyc = setInterval(function(){closey(o)},10);
}
}
function closey(o){/*--打开y--*/
var cy = parseInt(o.style.height);
if(cy > 0){
o.style.height = (cy - Math.ceil(cy/5)) +"px";
}
else{
clearInterval(proyc);
proxc = setInterval(function(){closex(o)},10);
}
}
function closex(o){/*--打开x--*/
var cx = parseInt(o.style.width);
if(cx > 0){
o.style.width = (cx - Math.ceil(cx/5)) +"px";
}
else{
clearInterval(proxc);
o.style.display = "none";
}
}
/*-------------------------鼠标拖动---------------------*/
var od = document.getElementById("move");
var dx,dy,mx,my,mouseD;
var odrag;
var isIE = document.all ? true : false;
document.onmousedown = function(e){
var e = e ? e : event;
mouseD = true;
}
document.onmouseup = function(){
mouseD = false;
odrag = "";
if(isIE)
{
od.filters.alpha.opacity = 100;
}
else
{
od.style.opacity = 1;
}
}
od.onmousedown = function(e){
odrag = this;
var e = e ? e : event;
mx = e.clientX;
my = e.clientY;
od.style.left = od.offsetLeft + "px";
od.style.top = od.offsetTop + "px";
if(isIE){
od.filters.alpha.opacity = 50;
}
else{
od.style.opacity = 0.5;
}
}
document.onmousemove = function(e){
var e = e ? e : event;
if(odrag){
var mrx = e.clientX - mx;
var mry = e.clientY - my;
od.style.left = parseInt(od.style.left) +mrx + "px";
od.style.top = parseInt(od.style.top) + mry + "px";
mx = e.clientX;
my = e.clientY;
}
}
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>move</title>
<style type="text/css">
body{
font-size:12px;
color:#849BCA;
}
#btn{
float:left;
}
#move{
width:500px;
height:200px;
background:#EDF1F8;
border: 2px solid #849BCA;
float:left;
overflow:hidden;
position:absolute;
left:80px;
top:50px;
cursor:move;
}
.content{
padding:10px;
}
</style>
</head>
<body>
<div id="btn">
<input type="button" value="打开" onclick="sw(this,'move');"/>
</div>
<div id="move" style="display:none;filter:alpha(opacity=100);opacity:1;">
<div class="content">移动层</div>
</div>
<script type="text/javascript">
var prox;
var proy;
var proxc;
var proyc;
function sw(o,id){
if (o.value=="打开"){
o.value="关闭";
show(id)
}
else{
o.value="打开"
close(id)
}
}
function show(id){/*--打开--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
o.style.display = "block";
o.style.width = "1px";
o.style.height = "1px";
prox = setInterval(function(){openx(o,500)},10);
}
function openx(o,x){/*--打开x--*/
var cx = parseInt(o.style.width);
if(cx < x){
o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
}
else{
clearInterval(prox);
proy = setInterval(function(){openy(o,200)},10);
}
}
function openy(o,y){/*--打开y--*/
var cy = parseInt(o.style.height);
if(cy < y){
o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
}
else{
clearInterval(proy);
}
}
function close(id){/*--关闭--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
if(o.style.display == "block"){
proyc = setInterval(function(){closey(o)},10);
}
}
function closey(o){/*--打开y--*/
var cy = parseInt(o.style.height);
if(cy > 0){
o.style.height = (cy - Math.ceil(cy/5)) +"px";
}
else{
clearInterval(proyc);
proxc = setInterval(function(){closex(o)},10);
}
}
function closex(o){/*--打开x--*/
var cx = parseInt(o.style.width);
if(cx > 0){
o.style.width = (cx - Math.ceil(cx/5)) +"px";
}
else{
clearInterval(proxc);
o.style.display = "none";
}
}
/*-------------------------鼠标拖动---------------------*/
var od = document.getElementById("move");
var dx,dy,mx,my,mouseD;
var odrag;
var isIE = document.all ? true : false;
document.onmousedown = function(e){
var e = e ? e : event;
mouseD = true;
}
document.onmouseup = function(){
mouseD = false;
odrag = "";
if(isIE)
{
od.filters.alpha.opacity = 100;
}
else
{
od.style.opacity = 1;
}
}
od.onmousedown = function(e){
odrag = this;
var e = e ? e : event;
mx = e.clientX;
my = e.clientY;
od.style.left = od.offsetLeft + "px";
od.style.top = od.offsetTop + "px";
if(isIE){
od.filters.alpha.opacity = 50;
}
else{
od.style.opacity = 0.5;
}
}
document.onmousemove = function(e){
var e = e ? e : event;
if(odrag){
var mrx = e.clientX - mx;
var mry = e.clientY - my;
od.style.left = parseInt(od.style.left) +mrx + "px";
od.style.top = parseInt(od.style.top) + mry + "px";
mx = e.clientX;
my = e.clientY;
}
}
</script>
</body>
</html>
- open_and_close.rar (1.3 KB)
- 下载次数: 69
发表评论
-
如何去掉链接虚线框
2011-10-08 13:58 1645链接的虚线框影响整体风格,我们在工作经常会将它去掉,而采用 ... -
Javascript获得当前地址栏url
2011-02-24 10:36 1350URL即:统一资源定位符 (U ... -
文字滚动
2009-10-24 09:51 1310三种文字滚动效果: 向上滚动 类似marque ... -
会动的眼睛
2009-07-09 23:31 1614<style type="text/css ... -
页面输出时一些常用的小技巧(二)
2009-05-16 22:42 1230页面输出时一些常用的 ... -
keycode值和chr码值
2009-01-09 14:44 2390keycode 8 = BackSpace BackSp ... -
展示图片的例子1
2008-12-01 17:08 1376很炫的展示图片的效果,用纯javascript写的,逻 ... -
二级菜单事件
2008-11-19 23:34 1066<!DOCTYPE html PUBLIC " ... -
删除空白子节点
2008-11-19 20:57 1750<!DOCTYPE html PUBLIC " ... -
javaScript DOM特性/方法
2008-04-27 12:28 3000❑ DOM的核心: Node 由于 ... -
分页效果
2008-04-17 18:40 1435还不错的分页效果,暂时用不上,收藏一下,见附件 -
很炫的图片循环效果
2008-04-16 10:49 3801<!DOCTYPE HTML PUBLIC " ... -
实用的js动画
2008-04-03 17:06 3760<!DOCTYPE html PUBLIC " ... -
用js给input传值
2008-03-27 18:06 5405<style> #name{ float:left ... -
常用js语句——大全
2008-03-16 17:02 28781.document.write(""); ... -
用javascript来充实文档的内容
2008-03-06 18:35 1584<!DOCTYPE html PUBLIC " ... -
javascript美术馆改进版
2008-03-04 14:31 2002<!DOCTYPE html PUBLIC " ... -
javascript美术馆
2008-02-29 15:56 1258<!DOCTYPE html PUBLIC " ... -
js日历
2008-02-26 22:32 1576<html> <head> <t ... -
javascript的IE和Firefox兼容性问题
2008-02-25 22:12 1269以 IE 代替 Internet Explorer,以 MF ...
相关推荐
动画效果 打开层/关闭层
打开动力学窗口–⌥+在要设置动画的图层上单击(选项键+鼠标单击) 放大动力学窗口–⌥+(选项键+加号键) 在动力学窗口上缩小–⌥-(选项键+减号键) 移动–单击并拖动 关闭-单击X按钮 特性 如上所示,通过在...
打开关闭图层 3、按( )键或( )键,可以删除选中的锚点。 A. Delete、Backspace B. 空格、回车 C. F5、F6 4、photoshop cs是一款用来进行 的软件( ) A、文字编辑 B、制作动画 C、制作课件 D、图像处理 5、...
2.5 图像的建立、打开、保存和关闭 2.5.1 图像的建立、打开和关闭 2.5.2 图像的保存 习题二 第3章 图形图像处理操作基础 3.1 范围的选取 3.1.1 使用选择工具选取 3.1.2 用裁切工具选取 3.1.3 用套索工具选取 3.1.4 ...
在 Chrome 开发工具中,打开渲染选项卡并在设置中,选中显示绘制矩形、显示合成图层边框和显示 FPS 表以调试卡顿在时间轴中,查看帧并打开每个进程以找出导致速度变慢的原因。 特别注意“绘画”。
● 简单(从预设中一键设置并保存自制预设、颜色更改和纹理导出,带有色调校正功能) ● 美观(防止过度曝光、防止水中透明、抗锯齿阴影) ● 轻量级(编辑器自动选择着色器)(重写以打开和关闭功能)●可在各种...
13. 如果要让Flash 同时对若干个对象产生渐变动画,则必须将这些对象放置在不同的层中。 □ A. 正确 □ B. 错误 14. 矢量图形用来描述图像的是: □ A. 直线 □ B. 曲线 □ C. 色块 □ D. A 和B 都正确 15. 下列那几...
第12章 播放数字声音效果 12.1 理解数字声音 12.2 了解Windows波形声音 12.3 了解声音工具 12.3.1 Sony Sound Forge 12.3.2 Adobe Audition 12.3.3 廉价的声音编辑器 12.4 创建和编辑声音 12.5 查找声音...
可视化被阻止的网络地址 通过用选定的颜色绘制指定的段来生成完整的IPv4映射 使用填充 网络版 子网列表可以编辑,通过ctrl+enter 例子 灰色-我们 ... 将缓存的图层添加到网络版本中,并可以打开/关闭它们
SessionStorage 存储的数据只在会话期间有效,关闭浏览器则自动删除 Sqlite 一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中 W3C 万维网联盟,创建于1994年,是Web技术领域最具权威...
----------------------------------- Android 编程基础 1 封面----------------------------------- Android 编程基础 2 开放手机联盟 --Open --Open --Open --Open Handset Handset Handset Handset Alliance ...