在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）

代码如下:

<%@ page contentType="text/html; charset=GBK" language="java"%>
<%@ page import="com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic" %>
<%
String query = request.getParameter("query");
MMStock2BudgetLogic bean = new MMStock2BudgetLogic();
String xmldata = bean.statStock2Budget();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<title>库存点采购总支出比</title>
<link rel="stylesheet" href="<%=request.getContextPath() %>/plugins/FusionCharts/Style.css" type="text/css" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/framework/sys-resources/css/jsoa.css" type="text/css" />
<script language="JavaScript" src="<%=request.getContextPath() %>/plugins/FusionCharts/FusionCharts.js"></script>
<script language="JavaScript" src="<%=request.getContextPath() %>/plugins/jquery-1.6.4.min.js"></script>
<script language="JavaScript" src="<%=request.getContextPath() %>/framework/sys-resources/js/common_js/common.js"></script>
<script language="javascript">
var pageName = "530005.jsp";
$(function(){
if ($('#data_chartdiv').val() != '') {
showCharts("Line", "chartdiv", 231, 160);
}
});
function showCharts(chartType, divId, width, height) {
$('#'+divId).show();
var data = $('#data_' + divId).val();
var chart = new FusionCharts("<%=request.getContextPath() %>/plugins/FusionCharts/"+chartType+".swf", ""+divId+"", ""+width+"", ""+height+"", "0", "0");
chart.setDataXML('<?xml version="1.0" encoding="gbk"?>' + data);
chart.render(""+divId+"");
}
</script>
<script type="text/javascript">
var oMenu;
function createHtml() {
try{
//oMenu = window.parent.document.getElementById("_div_viewcharts");
//if(null == oMenu || undefined == oMenu) {
var url1 = "<%=request.getContextPath()%>/framework/login_sso.jsp?query=<%=query %>&infokey=checkuser&rand="+Math.random();
var url2 = "<%=request.getContextPath()%>/framework/login_sso.jsp?query=<%=query %>&target=/stat_report_jsps/fusioncharts_jsps/53000501.jsp&rand="+Math.random();
$.post(url1, function(data) {
data = eval('('+data+')');
//alert(data.msg);
if (1 == data.ret) {
var o = document.getElementById("_div_viewcharts");
window.parent.document.body.appendChild(o);
oMenu = window.parent.document.getElementById("_div_viewcharts");
var ifrm = getIFrame();
oMenu.style.left = eval(getAbsoluteLeft(ifrm) + ifrm.offsetWidth) + "px";
oMenu.style.top = getAbsoluteTop(ifrm) + "px";
oMenu.innerHTML = '<iframe src="' + url2 + '" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>';
//
$('#pTip').text('×关闭<<');
oMenu.style.display = "block";
fnLarge();
}
});
//}
} catch (e){ }
}
//
var w = 0;
var h = 0;
var mout;
function emotion(){
try{
if(w <= 50){
oMenu = window.parent.document.getElementById("_div_viewcharts");
if(null == oMenu || undefined == oMenu) {
createHtml();
} else {
$('#pTip').text('×关闭<<');
oMenu.style.display = "block";
fnLarge();
}
//$(oMenu).show("slow");
} else {
$('#pTip').text('＋展开>>');
fnSmall();
//$(oMenu).hide("slow");
}
} catch (e){ }
}
function fnLarge(){
try{
if(w < 780){
w += 50;
h += 30;
oMenu.style.width = w+"px";
oMenu.style.height = h+"px";
window.setTimeout("fnLarge()",3);
}
} catch (e){ }
}
function fnSmall(){
try{
if(w > 0){
w -= 50;
h -= 30;
oMenu.style.width = w+"px";
oMenu.style.height = h+"px";
window.setTimeout("fnSmall()",3);
} else {
oMenu.style.display = "none";
}
} catch (e){ }
}
function mouseOverBody() {
if (null != oMenu && "none" == oMenu.style.display && w > 0) {
emotion();
}
}
function getIFrame() { //IE6.0+
if(parent){
var f = parent.document.getElementsByTagName("IFRAME");
for(var i = 0; i < f.length; i++) {
if(f[i].contentWindow == self) {
return f[i];
}
}
}
}
// get absolute TOP position
function getAbsoluteLeft(ob){
if(!ob){return null;}
var mendingOb = ob;
var mendingLeft = mendingOb.offsetLeft;
while( mendingOb != null && mendingOb.offsetParent != null && mendingOb.offsetParent.tagName != "BODY" ){
mendingLeft += mendingOb.offsetParent.offsetLeft;
mendingOb = mendingOb.offsetParent;
}
return mendingLeft;
}
// get absolute TOP position
function getAbsoluteTop(ob){
if(!ob){return null;}
var mendingOb = ob;
var mendingTop = mendingOb.offsetTop;
while( mendingOb != null && mendingOb.offsetParent != null && mendingOb.offsetParent.tagName != "BODY" ){
mendingTop += mendingOb.offsetParent.offsetTop;
mendingOb = mendingOb.offsetParent;
}
return mendingTop ;
}
</script>
<style type="text/css">
body{margin:0;padding:0;}
p{cursor: pointer; margin: 0; padding: 0; font-size: 12px; display: inline;}
</style>
</head>
<body>
<div class="tit-05">
<div style="float:left; color:gray;">>>库存占采购支出比</div>
<div style="float:right; color:gray;" onclick="emotion();" onmouseover="mouseOverBody()"><p id="pTip">+展开>></p></div>
</div>
<div class="insL04-ins">
<div id="chartdiv" style="float:left; display:none;"></div>
</div>
<input type="hidden" id="data_chartdiv" value="<%=xmldata %>" />
<div id="_div_viewcharts" style="position:absolute; border: 2px solid lightblue; filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8; background: #fff; margin: 1px auto; overflow: hidden; display: none; padding: 0px;">
</div>
</body>
</html>

赞 (0)

相关推荐

  • JS右下角广告窗口代码(可收缩、展开及关闭)

    JS右下角广告窗口代码(可收缩、展开及关闭)

    本文实例讲述了JS右下角广告窗口代码.分享给大家供大家参考.具体如下: 这是一款右下角窗口JS代码,完美的右下角,仿新浪博客的右个角弹出窗口,这款Javascript代码在兼容性和操作舒适度方面做的相当不错.调用了几张外部的图片,使用时自行下载吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-buttom-show-close-able-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "

  • JS仿QQ好友列表展开、收缩功能(第一篇)

    JS仿QQ好友列表展开、收缩功能(第一篇)

    效果图如下所示: html: <ul id="list"> <li class="lis"> <h2>我的好友</h2> <ul> <li>张三</li> <li>李四</li> ... </ul> </li> <li class="lis"> <h2>企业好友</h2> <

  • js实现div层缓慢收缩与展开的方法

    本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收缩与展开的速度是可以控制的,高度.循环时间也可以改. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&qu

  • JS实现固定在右下角可展开收缩DIV层的方法

    本文实例讲述了JS实现固定在右下角可展开收缩DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

  • JS+CSS实现DIV层的展开、收缩效果

    JS+CSS实现DIV层的展开、收缩效果

    本文为大家分享的第一个实例:JS控制DIV层的展开.收缩效果. <html> <head> <title>CSS+JS实现一个DIV层的展开/折叠效果</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica,

  • JS仿QQ好友列表展开、收缩功能(第二篇)

    JS仿QQ好友列表展开、收缩功能(第二篇)

    在上篇的基础上继续完善,点击一个li元素,其他li元素上的类名清除掉. 效果图如下所示: js: <script> window.onload = function(){ var list = document.getElementById('list'); var ah2 = list.getElementsByTagName('h2'); var uls = list.getElementsByTagName('ul'); var lis = null;//用于下面的存储 var arrl

  • JavaScript设置FieldSet展开与收缩

    JavaScript方法代码: 复制代码 代码如下: // 设置FieldSet高度方法,支持IE浏览器.Firefox // 参数1:pTableID,FieldSet内部div或table的id // 参数2:pFieldSetID,FieldSet的ID // 参数3:pImageID,图片的ID,展开或收缩后更新图片SRC function FieldSetVisual( pTableID, pFieldSetID, pImageID ) { var objTable = documen

  • 在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）

    复制代码 代码如下: <%@ page contentType="text/html; charset=GBK" language="java"%> <%@ page import="com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic" %> <% String query = request.getParameter("query&

  • 使用JS实现气泡跟随鼠标移动的动画效果

    使用JS实现气泡跟随鼠标移动的动画效果

    气泡跟随鼠标移动,并在每次点击时产生不同的变化 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 简单的气泡效果 </title> <style type="text

  • JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】

    JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】

    本文实例讲述了JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果.分享给大家供大家参考,具体如下: 基于Sketch.js,实现了物体触碰检测(蝌蚪会遇到障碍物以及聪明的躲避鼠标的点击),随机运动,聚集算法等. 已经具备了游戏的基本要素,扩展一下可以变成一个不错的 HTML5 游戏. 演示效果如下: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-

  • 基于JS快速实现导航下拉菜单动画效果附源码下载

    基于JS快速实现导航下拉菜单动画效果附源码下载

    这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示         源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&

  • js实现点击选项置顶动画效果

    本文实例为大家分享了js实现点击选项置顶动画的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js置顶动画</title> <style> *{margin:0;padding:0;} ul {width: 1000px;margin:100px auto;position:relative;

  • 判断iframe里的页面是否加载完成

    复制代码 代码如下: //判断iframe是否加载完成,RMid为iframe的ID document.getElementById("RMid").onload = function () { alert("加载完成"); } //在父框架操作iframe页面里的AddReceipt2方法 window.frames["RMid"].AddReceipt2();

  • iframe里的页面禁止右键事件的方法

    在子页面中加入: 复制代码 代码如下: <script> document.oncontextmenu = function(){ return false } </script> 即可

  • JS模拟的QQ面板上的多级可展开的菜单

    QQ菜单 if (!document.getElementById) document.getElementById = function() { return null; } function initializeMenu(menuId, actuatorId) { var menu = document.getElementById(menuId); var actuator = document.getElementById(actuatorId); if (menu == null ||

  • JS打开层/关闭层/移动层动画效果的实例代码

    css 复制代码 代码如下: body, span, div, td { font-size:12px; line-height:1.5em; color:#849BCA; }#bodyL { float:left; width:84px; margin-right:2px; }a.od { width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849B

  • iframe里使用JavaScript控制主页转向的方法

    本文实例讲述了iframe里使用JavaScript控制主页转向的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码写在iframe里面,点击按钮后整个网页会转向指定的url,而不是只转iframe里的页面 <!DOCTYPE html> <html> <head> <script> function breakout() { if (window.top!=window.self) { window.top.location="tryjs

随机推荐