网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 表格图层 >> 正文
最新文章
· JS代码实现单元格移动效果
· JavaScript让表格的边框闪烁起来
· 网页Div层拖拽--Clone特效代码
· 可拖动的DIV层
· 简单拖曵的原理与实例
· 上传图片之前先预览图片
· 漂亮的Js拖动层,窗口拖拽(改变大小
· 隔行换色,鼠标划过改变颜色
· Js点击文字弹出层,点击层以外区域关
· CSS自动竖向排列的布局方法
热门文章
 js实现div区域块伸缩效果(toggle)
 js弹出层组件artDialog2.1正式版
 一个简单实用的jquery拖动插件jque
 JS仿EXCEL表格功能
 点击页面任何地方,将div隐藏,除了
 动态插入、添加删除表格行的JS代码
 带遮罩效果并可以拖动的DIV弹出层
 Js点击文字弹出层,点击层以外区域
 利用js向表格动态追加行
 JQuery EasyValidator表单验证插件
相关文章
Js点击文字弹出层,点击层以外区域关闭层
Js弹出层,可自定义大小,双击关闭层
可拖拽、可关闭并带遮罩效果的Js弹出层
Hongru-Box 自定义的Js弹出层插件
超漂亮的仿腾讯弹出层效果
带渐变背景和遮罩效果的弹出层
带遮罩效果并可以拖动的DIV弹出层
简单的带遮罩效果的弹出层
js模仿腾讯世界杯人物介绍弹出提示层
jquery实现文本框弹出热门标签的提示效果
js弹出层组件artDialog2.1正式版
使用简单精美的封装好的弹出层
鼠标跟随提示效果
让父页面变暗并不可操作的弹出层提示效果
超漂亮提取自ZCMS弹出框效果v2.1
固定在浏览器显示区域内的弹出提示层
漂亮的title提示信息
可拖动的弹出层提示效果
来源:懒人图库 更新时间:2010/8/11 0:15:13 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<script language=javascript>
var cao_x,cao_y;

function cao888() 
{
this.display=display; 
}

function display() 
{
  document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>点击弹出</button></td></tr></table>");
  document.write("<div  id='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'>");
  document.write("<div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'>");
  document.write("<table width=200 height=20 bgcolor=green onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='caoMove(this.parentNode)' style='cursor:move;'>");
  document.write("<tr align=center>");
  document.write("<td align=left>可拖动的弹出提示效果</td>");
  document.write("</tr>");
  document.write("</table>");
  document.write("<br><br>懒人图库<br>http://www.lanrentuku.com/<br><br><span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';>关闭</span>");
  document.write("  </div>");
  document.write("</div>");
}
function caoMove(obj)  //实现层的拖移
{
  if(event.button==1)
  {
    var caoX=obj.clientLeft;
    var caoY=obj.clientTop;
    obj.style.pixelLeft=caoX+(event.x-cao_x);
    obj.style.pixelTop=caoY+(event.y-cao_y);
  }
}
</script>
<script language=javascript>
var mycao=new cao888();
mycao.display();
</script>

△运行 ☉预览 #复制 +收藏
特效说明:
可拖动的弹出层提示效果
  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号