鼠标滑动动态显示图片和通过js来动态填充页面数据 -

ren2881971

浏览: 108224 次

最近访客更多访客>>

shadabing

wpd

fxmabo

luojianbing

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

鼠标滑动动态显示图片和通过js来动态填充页面数据

博客分类：

j2ee
js

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../ext-2.1/resources/css/ext-all.css">
<link href="../images/style.css" rel="stylesheet" type="text/css" />
<link href="../images/iframeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../ext-2.1/adapter/ext/ext-base.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="../scripts/sendUploading.js"></SCRIPT><!--提示js-->
<script type="text/javascript" src="../ext-2.1/ext-all.js"></script>
<script type="text/javascript" src="../ext-2.1/build/locale/ext-lang-zh_CN.js"  charset="utf-8"></script>
<link rel="stylesheet"  href="../ext-2.1/UploadDialog/css/Ext.ux.UploadDialog.css" />
<script type="text/javascript" src="../ext-2.1/UploadDialog/Ext.ux.UploadDialog.packed.js"></script>
<script type="text/javascript" src="../ext-2.1/UploadDialog/locale/zh_CN.utf-8.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="../scripts/pageBreak.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="../scripts/dynamicPageTable.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="../scripts/request.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
  function createXMLHttpRequest() {
    var xmlHttp;
    if (window.ActiveXObject) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    }
    return xmlHttp;
  }

  function createElementEvent() {
    var func;
    switch (arguments[0]) {
        case 0 :
            var msg = arguments[1];
            func = function(){proSortModify(msg);};
            break;
        case 1 :
            var a1 = arguments[1];
            func = function(){proSortDelete(a1);};
            break;
        case 2 :
            var a1 = arguments[1];
            var a2 = arguments[2];
            var a3 = arguments[3];
            func = function(){mouseovers(a1, a2, a3);};
            break;
        case 3 :
            var a1 = arguments[1];
            var a2 = arguments[2];
            var a3 = arguments[3];
            var a4 = arguments[4];
            func = function(){mouseouts(a1, a2, a3, a4);};
            break;
    }
    return func;
  }
 

  function TestOnclick(keyid){
	window.open("showPic.jsp?keyid="+keyid);
  }
  function proTabAdd() {
    var dialog = new Ext.ux.UploadDialog.Dialog({
      url: 'AddProFlowsAction.action?keyid=' + request.getParameter("keyid"),
      reset_on_hide: false,
      fileupload: true,
      allow_close_on_upload: true,
      upload_autostart: false
    });
    dialog.show('show-button');
    dialog.on( 'uploadcomplete' , function(){createGetDataEvent();});
  }
  function proSortModify(keyid) {
    window.open ("modifyProjectSort.html?keyid=" + keyid);
  }
  function proSortDelete(keyid) {
    var xmlHttp = createXMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
      if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
          var myJson = eval("(" + xmlHttp.responseText + ")");
          myJson = eval("(" + myJson.result + ")");
          //alert(myJson.message);
		  setTimeout("alertMessage('"+myJson.message+"');",1000);//停止响应发送界面。
          if (myJson.success == true) {
            createGetDataEvent();
          }
        }
      }
      else{
        //document.getElementById("load").innerHTML = "操作中，请稍后...";
      }
    };
	if (confirm("确定删除该表格信息么？")) {
	/*↓开始进行加载动画↓*/
	var loadingMessage,loadingTitle,loadingContent;
    loadingMessage='正在提交数据……';
    loadingTitle='请等待发送您的信息数据请求。';
    loadingContent='根据信息数据的大小，这可能需要几秒或几分钟，或更长。';
    startLongProcess(loadingMessage,loadingTitle,loadingContent);
	  xmlHttp.open("post", "DelProFlowsAction.action?keyid=" + keyid);
      xmlHttp.send(null);
	}

  }

  function createGetDataEvent() {
    getProTableList();
  }
  var pageBreak = new com.jit.util.PageBreak(26);

  var DymPageTable = new com.jit.util.DynamicPageTable();

  function getProTableList() {
    var xmlHttp = createXMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
      if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
          var myJson = eval("(" + xmlHttp.responseText + ")");
          myJson = eval("(" + myJson.result + ")");
          var proSortTable = document.getElementById("proSortTable");
          var rowscount = proSortTable.rows.length;
          for(i = rowscount - 1;i > 0; i--){
            proSortTable.deleteRow(i);
          }
          if (myJson.resultLength > 0) {
            pageBreak.setTotalRows(myJson.resultLength);
            var tdStyle = {
							fontSize : "12px",
							color : "#666666",
							backgroundColor : "#F0F9FD",
							textAlign : "center",
							verticalAlign : "middle",
							align : "center",
							height : "24",
							fontWeight : ""
						};
			var tdStyleTitle = {
							fontSize : "12px",
							color : "#666666",
							backgroundColor : "#F0F9FD",
							textAlign : "left",
							verticalAlign : "middle",
							align : "center",
							fontWeight : ""
						};
            for (i = 0; i < myJson.jsonArr.length; i ++) {
                var funcDel = createElementEvent(1, myJson.jsonArr[i][0]);

                row = DymPageTable.createRowElement();

                cell_index = DymPageTable.createStyleCellElement(tdStyle);
                cell_name = DymPageTable.createStyleCellElement(tdStyleTitle);
                cell_oper = DymPageTable.createStyleCellElement(tdStyle);
				
                cell_index.innerText = i + 1;
            	href = DymPageTable.createHrefElement("link" + i, "link" + i, "GetProFlowsAction.action?keyid=" + myJson.jsonArr[i][0], "", myJson.jsonArr[i][1]);
				var filesuffix = myJson.jsonArr[i][1];
				filesuffix = filesuffix.substring(filesuffix.indexOf('.')+1,filesuffix.length);
			
				if(!/(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG|JPEG|BMP)$/.test(filesuffix)){//判断 是否 是图片
                	href = DymPageTable.createHrefElement("link" + i, "link" + i, "GetProFlowsAction.action?keyid=" + myJson.jsonArr[i][0], "", myJson.jsonArr[i][1]);
                }else{
                	//href = DymPageTable.createHrefElement("link" + i, "link" + i, "show_photo.jsp?keyid=" + myJson.jsonArr[i][0], "", myJson.jsonArr[i][1]);
                	href = DymPageTable.createHrefElement("link" + i, "link" + i, "ProjectFlowsShowPic.jsp?keyid=" + myJson.jsonArr[i][0], "", myJson.jsonArr[i][1]);
                	href.target="_blank";
                	href.onmouseover = createElementEvent(2, myJson.jsonArr[i][0], 1, 2);
                    href.onmouseout = createElementEvent(3, myJson.jsonArr[i][0], 1, 2, 3);
                } 
                
                cell_name.innerHTML = "&nbsp;<img src='../images/ico_jt_0.jpg'>&nbsp;";
				cell_name.appendChild(href);
                cell_oper.appendChild(DymPageTable.createButtonElement("delBtn" + i, "删除", funcDel));

                //href.onmouseover = createElementEvent(2, myJson.jsonArr[i][0], 1, 2);
                //href.onmouseout = createElementEvent(3, myJson.jsonArr[i][0], 1, 2, 3);
				//href.onclick=TestOnclick(myJson.jsonArr[i][0]);
                row.appendChild(cell_index);
                row.appendChild(cell_name);
                row.appendChild(cell_oper);
                proSortTable.appendChild(row);
            }
          }
        }
      }
      else{
        //document.getElementById("load").innerHTML = "操作中，请稍后...";
      }
    };
    xmlHttp.open("post", "ListProFlowsAction.action?pageNostr=" + pageBreak.pageNo + "&rowsInOnePagestr=" + pageBreak.rowsInOnePage + "&keyid=" + request.getParameter("keyid"));
    xmlHttp.send(null);
  }
	
 
//-->
</SCRIPT>
<style type="text/css">
<!--
.style3 {color: #3776B9; font-weight: bold; }
-->
#showPic{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}

</style>
</head>
<body>

<!--菜单-->
<iframe src="menuProjectMgr_1.htm" height="44" width="100%" frameborder="0" scrolling="no"></iframe>
<table width="98%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#68B1E6">
  <tr>
    <td bgcolor="#E6EFF8">
	<!--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓外表格以内的表格↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
<table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="#FFFFFF">
        <tbody name="proSortTable" id="proSortTable">
            <tr bgcolor="#0099FF">
                <td background="../images/titleBg.gif" width="10%" height="28" align="center" valign="middle"><span class="style3">序号</span></td>
                <td background="../images/titleBg.gif" align="center" valign="middle" width="55%"><span class="style3">项目表格</span></td>
                <td background="../images/titleBg.gif" align="center" valign="middle" width="15%"><span class="style3">操作</span></td>
          </tr>
        </tbody>
        
        <tr bgcolor="#EBF6FC">
            <td colspan="4" align="center" valign="middle">
             <DIV id="showPic"> 
               	<Script language="javascript">
            		setTimeout("DrawImage2(window.document.all.thisImg)",1000);
            	</Script>
          	 </DIV>
                <label id="showPage"></label>
                <input type="button" id="firstBtn" value="首页" onclick="pageBreak.firstPage();">
                <input type="button" id="preBtn" value="上页" onclick="pageBreak.prePage();">
                <input type="button" id="nextBtn" value="下页" onclick="pageBreak.nextPage();">
                <input type="button" id="endBtn" value="尾页" onclick="pageBreak.endPage();">
                转到第<select name="goPageNo" id="goPageNo" onchange="pageBreak.goPage();"></select>页
                <SCRIPT LANGUAGE="JavaScript">
                <!--
                    pageBreak.startGetData();
                //-->
                </SCRIPT>
                &nbsp;&nbsp;<input type="button" value="添加附件" onclick="proTabAdd()">
          </td>
        </tr>
    </table>
	<!--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑外表格以内的表格↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
	</td>
  </tr>
</table>


</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
<!--
    //document.body.contentEditable='true'; document.designMode='on';
//-->
	function DrawImage2(ImgD){
	  var image=new Image();
	  var iwidth = 550; //定义允许图片宽度，当宽度大于这个值时等比例缩小
	  var iheight = 550; //定义允许图片高度，当宽度大于这个值时等比例缩小
	  try {
		  image.src=ImgD.src;  
		  if(image.width>0 && image.height>0){
		  	flag=true;
			  if(image.width/image.height>= iwidth/iheight){
				  if (image.width>iwidth){
					  ImgD.width=iwidth;
					  ImgD.height=(image.height*iwidth)/image.width;
				  } else {
					  ImgD.width=image.width;
					  ImgD.height=image.height;
				  }
			  } else{
				  if (image.height>iheight) {
					  ImgD.height=iheight;
					  ImgD.width=(image.width*iheight)/image.height;
				  } else {
					  ImgD.width=image.width;
					  ImgD.height=image.height;
				  }
			  }
		  }
	  } catch(e) {}
	}
 
 function mouseovers(keyid, name, a1){
	  var divPic = document.getElementById('showPic');
	  divPic.style.display = 'block';
	  divPic.innerHTML = '<img src="GetProFlowsAction.action?keyid='+keyid+'" onload="DrawImage2(this)">';
	  divPic.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
	  divPic.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
 }
 function mouseouts(keyid, name, a1, a2){
	  var divPic = document.getElementById('showPic');	  
	  divPic.innerHTML = "";
	  divPic.style.display = "none";
 }
</SCRIPT>

分享到：

Dom解析xml，填充对象自己写的小例子 | JDBC笔记

2012-11-16 10:39
浏览 1546
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

鼠标滑动动态显示图片和通过js来动态填充页面数据

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

鼠标滑动动态显示图片和通过js来动态填充页面数据

评论

发表评论

相关推荐

如何在jsp中的flash播放服务器上的视频文件

java定时器例子

鼠标onmouseover,onmouseout事件动态创建DIV 显示图片

视频网站，将上传视频转换为flv。在页面上播放

Filter过滤，未登录的用户页面跳转

JDBC笔记

从数据库中查询图片显示在jsp页面上

上传图片和文件保存到数据库中(SmartUpload)

三级联动通过AJAX 将后台的数据返回在页面上。 主要是下拉框的联动。

HttpServletRequestWrapper两个类学习总结（有关中文乱码的例子）

Cookie与Session。重写URL保持会话跟踪

Servlet&Jsp javax.servlet.http包中的内容

Servlet&Jsp 下载代码备用

servlet&jsp上传文件

开始完整的学习Servlet&Jsp

接口----将数据转换成Json格式，给别人做接口调用

Web应用中的路径解决问题

java验证码

js 的Function对象

js 验证参数是否为数组且元素为数字或者具有数组属性的对象

最近访客更多访客>>

三级联动通过AJAX 将后台的数据返回在页面上。主要是下拉框的联动。