悬浮框

最新推荐文章于 2024-11-22 21:18:26 发布

全栈编程网

最新推荐文章于 2024-11-22 21:18:26 发布

阅读量686

点赞数

本文深入探讨了jQuery在网页开发中的应用，包括引入方法、样式表链接、JavaScript文件加载、库文件加载、CSS类样式引用、自定义样式表链接、JS功能调用、库功能调用、样式表和JS功能集成、DOM操作、事件处理、动画效果实现等关键概念和技术。通过实例演示，展示了如何利用jQuery简化前端开发工作，提升网页交互性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("ctx",basePath);
%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习2</title>
<link rel="stylesheet" type="text/css" href="${ctx}js/jquery-easyui-1.3.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx}js/jquery-easyui-1.3.6/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${ctx}/test.css">
<script type="text/javascript" src="${ctx}js/util.js"></script>
<script type="text/javascript" src="${ctx}js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${ctx}js/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}js/jquery-easyui-1.3.6/easyui-lang-zh_CN.js"></script>
<style type="text/css">
#previewDiv{
z-index: 9999;
position:absolute;
display:none;
background:#fff;
border-right:1px solid #999;
top:0px;
left:0px;
}
.mask {
color:#C7EDCC;
background-color:#999;
position:absolute;
top:0px;
left:0px;
width:100%;
height:3000px;
opacity: 0.6;
filter: "alpha(opacity=60)";
filter: alpha(Opacity=60);
}
</style>
<script type="text/javascript">
$(function(){
$(document).bind('mousemove',function(e){
if(e.pageX<5){
show();
}
});

$("#previewDiv").bind('mouseout',function(e){
if(e.pageX>$(this).width()){
hide();
}
});
});
function show(){
//添加并显示遮罩层
// $("<div id='mask'></div>").addClass("mask").click(function() {}) .appendTo("body").fadeIn(0);
// document.getElementById("mask").style.display = "none";

var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
$("#previewDiv").height(windowHeight);
$("#previewDiv").width(100);
$("#previewDiv").css({
"position": "absolute"
});
$("#previewDiv").show();
}

function hide(){
$("#mask").remove();
$("#previewDiv").hide();
}
</script>
</head>
<body>

<div id="previewDiv">
<table id ="head">
<tr><td>短消息预览</td></tr>
</table>
<table align="center">
<tr><td>
<div class="zhnx_neirong">
<h3>您收到了来自花花的回复</h3>
<p class="duanluo"> 内容：这是浮动层居中的实例</span></p>
</div>
<div class="zhnx_huifu"><p><a href="javascript:;">查看花花的名片</a></p></div>
</td></tr>
</table>
<table align="center">
<tr><td><div><input type="button" value=" 关闭 " onclick="hide();"/></div></td></tr>
</table>
</div>

</body>
</html>