记一次在父窗口操作iframe子页面里调用jQuery动画的过程

最新推荐文章于 2023-04-17 14:49:31 发布

hhsacsb

最新推荐文章于 2023-04-17 14:49:31 发布

阅读量238

点赞数

分类专栏：产品设计网页设计文章标签： jquery css3 html5

本文链接：https://blog.csdn.net/hhsacsb/article/details/116334916

版权

网页设计同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

产品设计

2 篇文章 0 订阅

订阅专栏

项目场景：

这次是因为用户看过产品后觉得不太美观，所以产生要进行一次版本更新了。之前的管理员导航比较死板，像这样的：
在这里插入图片描述
可是我想让显示的效果更加有趣生动，于是我希望做成这样的：
导航栏会有一个动画效果产生

问题描述：

以往都是用$(".alpha").animate方法来产生一个动画就完事了，但是后台管理员的html用了iframe窗口，不能直接用之前的方法，否则取不到对象：
父窗口iframe代码段：

<li id="Li0" onmouseover="Menus.Show(this,0)" onclick="getleftbar(this);"><a href="/admin/News/Admin_Article.aspx"
                        target="frmright"><strong>文章系统</strong></a>
                        <div class="menu_childs" onmouseout="Menus.Hide(0);">

                            <ul>
                                <li><a href="/admin/News/Admin_Article.aspx?Action=Add" target="frmright">添加文章</a></li>
                                <li><a href="/admin/News/ArticleColumn.aspx" target="frmright">分类管理</a></li>
                                <li><a href="/admin/News/Admin_Article.aspx" target="frmright">文章管理</a></li>
                                
                            </ul>
                        </div>
                    </li>
<iframe class="left_iframe" id="frmleft" name="frmleft" src="left.htm" frameborder="0"></iframe>

iframe内的子页面代码段

<body>
    <table height="100%" cellspacing="0" cellpadding="0" width="100%" border="0">
        <tbody>
            <tr>
                <td style="padding-top: 10px" valign="top">
                    <table class="alpha" style="display:inline-block">
                        <tr>
                            <td class="menu" id="menubar" valign="top">
                                <li><a href="serverVariables.aspx" target="frmright">网站服务器信息</a></li>
                                <li><a href="ConfigSet.aspx" target="frmright">系统基本设置</a></li>
                                <li><a href="news/Admin_Article.aspx?Action=Add" target="frmright">添加文章</a></li>
                                <li><a href="SQLBackup.aspx?Action=Backup" target="frmright">数据库备份</a></li>
                                <li><a href="company/Team.aspx?Action=Add" target="frmright">自定义企业收费模式</a></li>
                                <li><a href="collection/Admin_Collection.aspx" target="frmright">采集管理</a></li>
                                <li><a href="FriendManage.aspx" target="frmright">友情链接管理</a></li>
                                <li><a href="ad/Index_ADFlash.aspx" target="frmright">首页快捷广告管理</a></li>
                                <li><a href="Admin_Manage.aspx" target="frmright">管理员资料/权限设置</a></li>
                                <li><a href="onezp/onezp.aspx" target="frmright">一句话求贤才</a></li>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>

问题分析：

那么问题来了，想要让导航有一个动画效果，肯定是对子页面里的$(".alpha")对象进行动画处理，那么获取对象以及对应的动画，到底是要写在父页面，还是写在iframe的子页面里呢？

$(".alpha").animate({ left: '10px' }, 200);

如果这样写在父页面，当点击导航进行切换时，明显是获取不到$(’.alpha’)的，因为父页面里就没有这个html啊。
那写在子页面总可以了吧？嗯，看起来好像可行……可是子页面没有绑定导航的getleftbar单击事件哦……

解决方案：

最后发现只能在父页面里写jQuery来处理这个问题，即：在父页面获取iframe子页面内的元素。
经过万能的google后，发现一个神奇代码段：

$("#frmleft").contents().find(".alpha")

就可以了，之后找到了alpha这个元素，那么就可以下一步操作了，如添加animate或改变css等，故在此记录处理结果和最终效果。

最终代码：

// 在父窗口中获取iframe子页面中的元素
$("#frmleft").contents().find(".alpha").css({ left: '-500px' });
$("#frmleft").contents().find(".alpha").animate({ left: '10px' }, 200);
$("#frmleft").contents().find(".alpha").animate({ left: '0px' }, 80);