在jquery中部分隐藏iframe

Hide iframe partially in jquery

本文关键字：隐藏 iframe 中部 jquery      更新时间：2023-09-26

我有一个main.jsp页面，它有两个框架，这里的代码是

 <body>
<div><a href="#" onClick="somthingJS();"> hide</a></div>
<table>
<tr>
    <td style="height:100%"><iframe name="leftFrame" id="leftFrame" src="leftnavigation.jsp" height="600" width="200" frameborder="0"></iframe></td>
    <td style="height:100%"><iframe name="mainFrame" id="mainFrame" src="news.jsp"  height="600" width="1000" frameborder="0" scrolling="auto"> </iframe></td>
</tr>       
</tr>   
</table>
</body>

并且我需要隐藏我的左帧。在隐藏标签上onclick方法做一些事情来隐藏我的iframe
但并不是所有的东西都必须使用Jquery隐藏90%我如何隐藏；单击隐藏显示。。

提前感谢。。。。。

如果你想"隐藏90"-不透明度变为20%？然后：
使用jquery .fadeTo
这是工作代码：http://jsfiddle.net/rnAyh/

如果您想更改，可以检查以下内容：http://jsfiddle.net/rnAyh/1/

只需更改iframe的宽度？

(function() {
  var toggle = false,
      frames = [document.getElementById('leftFrame'),document.getElementById('mainFrame')];
  window.somethingJS = function() {
    frames[0].setAttribute("width",toggle ? 200 : 20);
    frames[1].setAttribute("width",toggle ? 1000 : 1180);
    toggle = !toggle;
  };
})();

我不确定我是否完全理解你想做什么，但从标题来看，你似乎想剪辑一个iframe。请尝试CSS iframe属性。

.iframe-to-crop {
    clip: rect(0px,50px,0px,0px);
}

这将"剪切"iframe右侧的50px。看看这个。

下面的代码应该在内联中找到我的注释以进行解释。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script> 
           /*
            attr() if element height is needed if set, 
            css() if style element used
            */
            function somethingJS(){
                var iHeight=$('#leftFrame').attr("height");
               iHeight=(!isNaN(iHeight))?600:iHeight;
               $('#leftFrame').attr("height",iHeight-iHeight*(90/100));
            }
        </script>
    </head>
<body>
    <div>
        <!-- In your original code href="#" will create problems in IE , so either attach the event in jquery onload or use the below code -->    
        <a href="javascript:void(0)" onClick="somethingJS()"> hide</a>    
    </div>
<table>
<tr>
    <td style="height:100%"><iframe name="leftFrame" id="leftFrame" src="12197789.html" height="600" width="200" frameborder="1"></iframe></td>
    <td style="height:100%"><iframe name="mainFrame" id="mainFrame" src="12197789.html" height="600" width="1000" frameborder="1" scrolling="auto"> </iframe></td>
</tr>       
</table>
</body>
</html>

您可以将左边框的样式更改为opacity: 0.1-只需将somethingJS();更改为

document.getElementById('leftFrame').style.opacity = 0.1;
相关文章：