`
ren2881971
  • 浏览: 109995 次
社区版块
存档分类
最新评论

鼠标滑动动态显示图片和通过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>
分享到：
| JDBC笔记
评论
发表评论

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

相关推荐

    js 动态获取图片矩形热区，并在热区上添加蒙版，鼠标经过，以半透明形式显示该区域

    JavaScript（简称JS）是一种广泛用于Web开发的轻量级脚本语言，它可以在客户端运行，为网页添加交互性。在本场景中，我们讨论的是如何使用JavaScript动态地在图片上生成矩形热区，并在热区上添加蒙版效果。热区...

    css滑动门加数据读取

    它通过CSS样式和JavaScript（或jQuery）来实现，使得当鼠标悬停在某个元素上时，该元素的内容会像门一样滑动打开，显示隐藏的信息，而不需要用户点击跳转到新页面。这种效果在电商网站中尤为常见，用于商品分类或...

    jquery新闻图片九宫格布局鼠标悬停图片上下滑动显示文字信息

    通过使用jQuery，开发者可以更加便捷地实现网页动态效果和用户交互。 二、九宫格布局 九宫格布局是一种将屏幕划分为九个等大的正方形区域的布局方式，通常用于展示多张图片或信息卡片。这种布局使得页面看起来整齐...

    鼠标点击滑动门代码

    这种技术通过CSS样式和JavaScript脚本实现，使得用户可以通过鼠标点击来切换显示的内容区域，从而提供更加交互式和动态的用户体验。 在提供的代码中，滑动门效果主要体现在`.nTab`类的元素上，它包含了一个标题区(`...

    js鼠标滑过标签选项卡切换代码.zip

    【标题】"js鼠标滑过标签选项卡切换...总的来说，这个"js鼠标滑过标签选项卡切换代码"是JavaScript与网页设计结合的一个实用示例，它体现了动态网页的交互性和可扩展性，是现代网页开发中常见的一种用户体验增强手段。

    两个js鼠标提示的例子

    在JavaScript（js）编程中，鼠标提示（Tooltip）是一种常见的用户界面元素，它可以在鼠标悬停在特定元素上时显示额外的信息。本话题主要探讨两个JavaScript实现鼠标提示的例子，通过`mouseTip.htm`和`mouseEvent....

    12款超酷JS图片展示

    本文将深入探讨标题所提及的"12款超酷JS图片展示"，这些展示通常指的是利用JavaScript实现的动态、交互式的图片展示方案，它们能够为网站增添视觉吸引力和用户体验。 首先，我们要理解JS图片展示的核心原理。...

    【JavaScript源代码】JS实现圆形进度条拖拽滑动.docx

    为了实现进度条的动态显示，项目利用了Canvas API中的`getContext("2d")`方法获取了2D渲染上下文，并通过该上下文进行各种绘图操作。 ```javascript var canvas = document.getElementById("canvasId"); var ctx = ...

    手机站JS幻灯片滑动效果

    这种效果允许用户通过左右滑动来浏览一系列图片或内容，为手机站提供了动态、互动的用户体验。本文将深入探讨如何利用JavaScript实现手机站的JS幻灯片滑动效果。 首先，理解基本原理：JS幻灯片的核心在于改变内容...

    jQuery鼠标悬停向上滑出遮罩效果.zip

    4. **内容填充**：遮罩层中的标题和图片文字介绍通常是从数据源动态加载的。这可以通过jQuery的`.html()`或`.text()`方法实现，根据每个图片对应的标题和描述来填充内容。 以下是一个简化的实现步骤： 1. 引入...

    javascript酷炫图片展示

    这可以通过监听滚动事件、计算视口位置和图片尺寸来实现。 具体到这个项目，JavaScript代码可能包括以下几个关键部分： 1. 图片容器初始化：创建一个空数组存储图片元素，然后根据HTML中的图片源动态创建`&lt;img&gt;`...

    jQuery Tooltip跟随鼠标提示条

    2. **动态计算位置**：通过JavaScript获取鼠标位置，并结合元素大小和屏幕尺寸，计算出最佳的提示条显示位置。这可能需要用到`event.clientX`和`event.clientY`来获取鼠标的X和Y坐标。 3. **CSS样式控制**：定义...

    10款动感图片展示js代码

    在网页设计和开发中，动态图片展示是一种吸引用户注意力、提升用户体验的重要手段。"10款动感图片展示js代码"的资源集合提供了多种JavaScript实现的动态图片展示效果，这些代码适用于创建引人入胜的网站产品图库或者...

    jQuery 鼠标滑过链接文字弹出层提示的效果

    **jQuery 鼠标滑过链接...通过学习并实践这个案例，开发者不仅可以掌握基础的jQuery和CSS技能，还能理解如何结合它们来创建动态、响应式的网页元素。在实际项目中，可以根据具体需求进行定制，打造个性化的交互体验。

    JS+CSS实现大气清新的滑动菜单效果代码.docx

    本文将详细介绍如何使用JavaScript（JS）和层叠样式表（CSS）来实现一款大气清新的滑动菜单效果。这种菜单在鼠标悬停时会平滑地展开二级菜单，为用户提供直观且美观的导航体验。 首先，CSS在构建这个滑动菜单中的...

    基于owl-carousel左右滑动卡片代码.zip

    总结来说，"基于owl-carousel左右滑动卡片代码"是一种利用JavaScript和CSS实现的动态文章展示方式，它结合了owl.carousel插件的功能，提供了一种吸引用户的交互体验。通过理解并应用这些知识点，开发者可以创建出...

    JavaScript网页特效：fd182d80039de011b

    JavaScript是一种广泛应用于网页和网络应用的脚本语言，尤其在前端开发中占据着核心地位。这个资源包"JavaScript...通过深入理解和实践这些代码，你可以更好地掌握JavaScript在网页动态效果和用户交互方面的强大能力。

    jquery滑动星星评分效果代码

    标题中的“jquery滑动星星评分效果代码”是指在网页中实现一种交互式的用户评价系统，用户可以通过滑动鼠标选择星级来给出对某个产品或服务的评分。这种效果常见于电影评分、电商商品评价等场景，增加了用户体验的...

    鼠标悬停图片高亮,从左边滑动出标题信息显示效果

    在网页设计中，提升用户体验是至关重要的，而“鼠标悬停图片高亮，从左边滑动出标题信息显示效果”是一种常见的交互设计手法，能够帮助用户更好地理解和操作页面元素。这种效果常见于产品展示、文章预览或者图像库等...

    javascript网页特效编程百例源代码

    7. **鼠标**：这一部分可能包含鼠标悬停效果、轨迹动画等，通过监听鼠标事件，如mouseover、mouseout和mousemove，来实现与用户的互动。 8. **图片**：图片特效可能涉及轮播图、懒加载、图片裁剪等。JavaScript可以...

Magicbox
Global site tag (gtag.js) - Google Analytics