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

最新推荐文章于 2022-02-26 22:01:25 发布
最新推荐文章于 2022-02-26 22:01:25 发布
阅读量244 收藏
点赞数
分类专栏： j2ee js 文章标签： javascript ux ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ren2881971/article/details/84357242
版权
j2ee 同时被 2 个专栏收录
17 篇文章 0 订阅
订阅专栏
js
7 篇文章 0 订阅
订阅专栏 

<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 = " <img src='../images/ico_jt_0.jpg'> ";
				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>
                  <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>
ren2881971
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS DOM实现鼠标滑动图片效果
10-22
主要为大家详细介绍了JS DOM实现鼠标滑动图片效果，只要将鼠标放上该商品的区域，原本折叠起来的商品便会自动展开，感兴趣的小伙伴们可以参考一下
java和javascript配合，实现从项目中动态读取图片（文件夹有多少图片都能读取），通过自动读取图片名，实现按钮点击播放相应的图片
qq_42978535的博客
07-22 3126
动态读取项目或者计算机文件，实现动态播放图片
JS鼠标移动显示图片
qq_45387575的博客
02-26 3244
1、鼠标不断移动，使用鼠标移动事件：mousemove 如果用的是mouseover的话，会造成鼠标移动过快，而无法显示的问题 2、在页面中移动，给document注册事件 3、图片要移动距离，而且不占位置，因此使用绝对定位 4、核心：每次鼠标移动，都会得到最新的鼠标坐标，把这个X和Y坐标作为图片的top和left值就可以实现移动图片 img.style.left = 'e.clientX ' img.style.top = 'e.clientY ' 无法...
html鼠标悬停效果加边框,js实现鼠标悬浮给图片加边框的方法
weixin_32520565的博客
06-03 1266
本文实例讲述了js实现鼠标悬浮给图片加边框的方法。分享给大家供大家参考。具体实现方法如下：html代码： js代码：$(document).ready(function () {//border$(".T-s-l a.a1").borderEffect();$(".a1").borderEffect();$(".T-s-l a.a2").borderEffect({ borderC...
用js给div添加鼠标悬停事件
热门推荐
yxs19910622的专栏
02-20 2万+
新任务:给表格上的某列添加鼠标悬浮事件 但是表格是由omGrid生成的,无法修改 所以只能先获取,再添加事件 先用firebug看清表格结构: 是div class="innerCo1 " class还是有空格的,为此还纠结了下.. js代码: var obj = document.getElementsByTagName("div");//先得到所有的div标记 for(var
用 JS 的 DOM + CSS 实现图片的鼠标跟随效果 (达到虽然有下拉空间，但图片仍然跟随的效果)
狮子座的男孩
06-19 593
Ⅰ、问题描述： 1、用JavaScript + css实现，图片的鼠标跟随效果； 2、分析： A、首先要将图片设置成绝对定位，并通过DOM操作来获得图片信息； B、通过DOM操作来绑定鼠标移动所要触发的事件(即：mousemove)； C、获取鼠标以 page 为参考的坐标系，并通过绝对定位将鼠标放在图片的正中心； Ⅱ、实现过程如下： 1、运行软件VScode，亲测可实现； 2、运行代码： <!DOCTYPE html> <html lang="en"> <head>
滑动显示和隐藏图片效果.rar_滑动显示和隐藏图片效果
09-24
jquery滑动显示和隐藏图片效果更多相关jquery显示jquery滑动滑动特效jquery隐藏
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
12-11
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果：进入qq空间，向下拉动空间，...
javascript实现百度地图鼠标滑动事件显示、隐藏
10-24
主要介绍了javascript实现百度地图鼠标滑动事件显示、隐藏的思路和方法，十分的实用，这里推荐给小伙伴们，有需要的朋友可以参考下。
九宫格图片鼠标悬停上下滑动图片切换显示代码.zip
07-11
九宫格图片鼠标悬停上下滑动图片切换显示代码
js产品滑动列表 鼠标经过文字列表滑动出现对应图片
07-31
js产品滑动列表，鼠标经过文字列表滑动出现对应图片
HTML5鼠标拖动游标滑块条显示百分比代码
06-12
一款横条上可以有指定多个游标，每个游标都能拖动，调整显示占用的百分比效果的HTML5鼠标拖动游标滑块条显示百分比代码。
HTML：鼠标滑动效果
01-29
HTML：鼠标滑动效果 显示为手型，指针等
JS获取鼠标点击时图片的相对坐标位置并添加自定义内容
ztnhnr的专栏
11-30 4426
因功能需要在图片上点击时，添加自定义的内容。本来想用图片的热区useMap实现，但发现useMap只支持href跳转属性，不能添加自定义的内容。最后通过网上搜索方案，找到如下解决方法。 在点击图片时，通过鼠标点击位置计算点击的坐标，然后在点击的位置添加自定义内容。 示例代码如下： <!DOCTYPEhtml> <htmllang="en"> <head> <basetarget="_self"> <m...
java 物块跟着鼠标移动_JavaScript实现鼠标移动粒子跟随效果
weixin_34274954的博客
02-16 470
本文实例为大家分享了JavaScript实现鼠标移动粒子跟随效果的具体代码，供大家参考，具体内容如下※ 如上图是最终显示效果，跟随鼠标的移动，生成的粒子跟随。需要用到的js库：Underscore。Underscore是一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。它是这个问题的答案：“如果我在一个空白的HTML页面前坐下，并希望立...
鼠标滚动加载图片及图片动画
huang100qi的专栏
01-16 1555
$(function(){ setContainerH(".item_list"); screenLazyLoad({ defObj:".item_list" }); }); function screenLazyLoad(option) { var settings = { defObj: null, defHei
滚动时动态加载页面内容
11-11 3087
有些网站的网页内容不是一次性加载完毕的，而是在鼠标向下滚动时动态加载的，这是怎么做到的呢？看下面代码：var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading == fa
Lazy Load
qq_39246030的博客
09-25 630
是一款基于 jQuery 的图片延迟加载插件，它可以让浏览器可视区域外的图片不加载，当滚动到它们的位置时才加载。延迟加载可以使页面加载更快，减少服务器的负担，甚至是节约带宽。 1*引入的文件 2*在html中对于img做对应的处理 .为图片加入样式类名lazy 图片路径引用方法用data-original 3.在js中lazyload配置 ​$(“img.lazy”).lazyload({effect: “fadeIn”}); lazyload()参数设置: 参数 含义 placehold
html动态加载图片,javascript实现瀑布流动态加载图片原理
weixin_39721953的博客
06-04 574
本文实例为大家分享了js瀑布流加载效果，动态加载图片，供大家参考，具体内容如下鼠标滚动事件，当鼠标滚动到下边，动态加载图片。1. HTML代码js实现瀑布流效果-动态加载图片 2. CSS代码*{margin: 0px;padding: 0p...
h5页面鼠标滑动不显示鼠标
最新发布
05-11
通常情况下，鼠标在网页上滑动时会有一个指针显示，如果您的h5页面在鼠标滑动时没有显示鼠标指针，可能是因为CSS中设置了鼠标指针的样式。您可以尝试在CSS中添加以下代码来解决这个问题： ``` html,body { cursor:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值