这篇文章主要介绍了 JS 控制弹出悬浮窗口 (一览画面) 的实例代码的相关资料, 非常不错具有参考借鉴价值,需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在 web 项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息。如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好。如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖。下面我以某个对日电子商务网站为实例说明下它的实现方式。
1、jsp 页面上弹出层的代码
- <!-- 物流详情弹出页面 start -->
- <s:iterator value="lrVo" var="lrVo" id="lrVo" status="st">
- <div class="logisticscenter_xq" style="display: none;" id='<s:property value="#lrVo.logisticNO"/>'>
- <dl>
- <dt>
- <strong>
- <s:text name="struts.webui.logistics.label.logisticsDetails" />
- :
- </strong>
- </dt>
- <dd>
- <strong class="close_wind">
- X
- </strong>
- </dd>
- </dl>
- <div class="information logistics_win">
- <table width="" border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td class="r_text">
- <span class="icon9">
- *
- </span>
- <s:text name="struts.webui.logistics.label.logisticsNumber" />
- :
- </td>
- <td>
- </td>
- <td colspan="3" id="logisticNo">
- <s:property value="#lrVo.logisticNO" />
- </td>
- </tr>
- <tr>
- <td valign="top" class="r_text">
- <span class="icon9">
- *
- </span>
- <s:text name="struts.webui.logistics.label.distribution" />
- :
- </td>
- <td>
- </td>
- <td colspan="3" style="text-align:left" id="content">
- <s:property value="#lrVo.content" escape="false" />
- </td>
- </tr>
- </table>
- </div>
- </div>
- </s:iterator>
- <!--物流详情弹出窗口 end-->
层样式代码:
- .logisticscenter_xq{
- position: absolute;
- width:710px;
- border:solid 2px #787878;
- background: #edfcfe;
- z-index: 2;
- }
我的处理时将弹出层放置到整个网站页面的 layout.jsp,网站中所有页面的布局都继承它。该网站采用 tiles 框架统一对页面布局。
2、计算对象居中要设置的 left 值和 top 值
我把这一步要完成的功能写成一个 js 文件,主要是根据用户在一览页面上鼠标点击的坐标位置,动态地显示该条记录的层窗口。主要代码如下:
- // 计算对象居中需要设置的left和top值
- // 参数:
- // _w - 对象的宽度
- // _h - 对象的高度
- function getLT(_w,_h)
- {
- var de = document.documentElement;
- // 获取当前浏览器窗口的宽度和高度
- // 兼容写法,可兼容ie,ff
- var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
- var h = (de&&de.clientHeight) || document.body.clientHeight;
- // 获取当前滚动条的位置
- // 兼容写法,可兼容ie,ff
- var st= (de&&de.scrollTop) || document.body.scrollTop;
- var topp=0;
- if(h>_h)
- topp=(st+(h - _h)/2);
- else
- topp=st;
- var leftp = 0;
- if(w>_w)
- leftp = ((w - _w)/2);
- // 左侧距,顶部距
- return [leftp,topp];
- }
- //获取鼠标位置GetPostion
- function GetPostion(e) {
- var x = getX(e);
- var y = getY(e);
- }
- function getX(e) {
- e = e || window.event;
- return e.pageX || e.clientX + document.body.scrollLeft - document.body.clientLeft
- }
- function getY(e) {
- e = e|| window.event;
- return e.pageY || e.clientY + document.body.scrollTop - document.body.clientTop
- }
- //判断浏览器类型
- function getOs()
- {
- var OsObject = "";
- if(navigator.userAgent.indexOf("MSIE")>0) {
- return "MSIE";
- }
- if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
- return "Firefox";
- }
- if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
- return "Safari";
- }
- if(isCamino=navigator.userAgent.indexOf("Camino")>0){
- return "Camino";
- }
- if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
- return "Gecko";
- }
- }
将该 js 包含到主调用的一览 jsp 文件中。
- <script language="javascript" type="text/javascript" src="<s:url value="
- /js/aligncenter.js "/>">
- </script>
3、一览 jsp 中的调用方法
- <a class="view_button" onclick="viewLogistics(event,'<s:property value="
- #lrVo.logisticNO "/>')" href="####">
- <s:text name="struts.webui.logistics.label.view" />
- </a>
用户点击该行记录的详情链接时调用显示层的方法,同时将该记录的 id 值传给调用方法。其实,每一个层就是用这条记录的一个 id 属性值进行区分的。
- function viewLogistics(event,logisticNO){
- var os = getOs();
- var y = getY(event);
- if(os=='MSIE'){
- y=window.event.y+405;
- }
- $(".logisticscenter_xq").hide();
- $("#"+logisticNO).show();
- $("#"+logisticNO).CSS("top",y+15);
- }
至于方法中 event 参数的作用,还不是太清楚,这点需要再调查一下。最终效果如下图,随着鼠标下移,层能够动态的移动。
以上所述是小编给大家介绍的 JS 控制弹出悬浮窗口 (一览画面) 的实例代码,希望对大家有所帮助,如果大家想了解更多资讯请关注 phperz 网站!
来源: http://www.phperz.com/article/17/0330/265337.html