浏览 4115 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-05-27
最后修改：2009-06-02
练习了一下遮罩效果的实现——基于jQuery。 在js禁用的情况下不影响页面显示效果，符合web标准，在firefox下出现了三个对号:)，在firefox3、chrome、ie6、ie7、ie8下面显示正常。
欢迎下载使用： shadeBlock
如果需要更炫的效果，请选用lightBox , 或者tinyBox 。
引用部分： <script type="text/javascript" language="javascript" src="./script/jquery.js"></script> <script type="text/javascript" language="javascript" src="./script/shadeBlock.js"></script> <link href="./style/shadeBlock.css" type="text/css" rel="stylesheet" />
调用很简单： // 本网页影藏元素，格式：$("#触发元素的id").shadeBlock(width, height, "#要显示的元素id", "title");
$("#loginFormTrigger").shadeBlock(300, 140, "#loginForm", "Login Form");
// 其他网域元素，格式：$("#触发元素的id").shadeBlock(width, height, "远程URL#创建的要显示的元素id", "title");
$("#baiduSearchTrigger").shadeBlock(800, 500, "http://www.baidu.com#baiduSearch", "baidu 搜索");
// 本网域页面元素，格式：$("#触发元素的id").shadeBlock(width, height, "相对路径#创建的要显示的元素id", "title");
$("#localPageTrigger").shadeBlock(600, 300, "local.html#localPage", "本网域页面");
页面也很简单： <body> <div> <a href="#loginForm" class="hiddenDisplayTrigger" id="loginFormTrigger">显示登录窗口</a> <a href="http://www.baidu.com#baiduSearch" class="hiddenDisplayTrigger" id="baiduSearchTrigger">显示baidu搜索页面</a> <a href="index.html#localIndex" class="hiddenDisplayTrigger" id="localIndexTrigger">显示本网域页面</a> </div> <div class="shadeHiddenBlock" id="loginForm"> <p> <label for="username">用户名</label><input type="text" name="username" id="username" /> </p> <p> <label for="password">密 码</label><input type="password" name="password" id="password" /> </p> </div> </body>
效果大致如下：
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
