<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="/common/taglibs.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>xxxx</title>
<link href="${ctx}/jsp/tips/tip.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/css/three-color-control.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/js/artDialog4.1.6/skins/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx}/js/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="${ctx}/js/artDialog4.1.6/artDialog.js"></script>
<script type="text/javascript" src="${ctx}/js/artDialog4.1.6/plugins/iframeTools.js"></script>
<script type="text/javascript" src="${ctx}/js/ImageMapster/ jquery.imagemapster.js"></script>
</head>
<body>
<div class="info">
<div id="event_act_list" class="info_list">
<ul>
<li>
<img id="areaImg" src="<%=basePath%>/images/home/fq.bmp"
usemap="#planetmap" style="float: left; margin-right: 20px;" />
<map name="planetmap" id="planetmap">
<area name="xl" shape="circ" coords="120,180,30" href="#"
alt="xlpcs" style='background-color: black; border-color: black' />
<area name="af" shape="circ" coords="260,250,30" href="#"
alt="afpcs" />
<area name="jc" shape="circ" coords="0,0,110,260" href="#"
alt="jcpcs" />
<area name="cj" shape="circ" coords="0,0,110,260" href="#"
alt="cjpcs" />
<area name="fc" shape="circ" coords="0,0,110,260" href="#"
alt="fcpcs"/>
</map>
<div id="xl" style="border-radius: 10px;"></div>
<div id="af" style="border-radius: 10px;"></div>
<div id="jc" style="border-radius: 10px;"></div>
<div id="cj" style="border-radius: 10px;"></div>
<div id="fc" style="border-radius: 10px;"></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
(function($) {
$("div").css('background', "write");
//设置辖区div元素默认加载为透明色，防止系统发生异常。
$.each($('ul li:nth-child(1)'), function(obj){
if($(this).children.length > 0) {
$(this).find('div').css('background', '#FFF');
}
} );
var _regionParent = "";
$.ajax({
url : '${ctx}/threecolor/three-color-rule!getHighColorsByRegion.action', //异步提交。
data:{'regionParent' :_regionParent, 'op' : 'ajax'}, //后期可根据父级机构进行扩展。
cache : false,
async : true, //设置与服务器交互方式为异步方式。
type : "POST", //POST提交。
dataType : 'json',
success : function (result){
if(result != "") {
var _jsonObj = result;
//根据预警分析情况，获取每个区域的最高预警色。
$.each(_jsonObj, function(ele) {
var _areaObj = _jsonObj[ele];
if(_areaObj != null && _areaObj.regionCode != undefined && _areaObj.HIGHCOLOR != undefined) {
$("#" + _areaObj.regionCode).css('background', _areaObj.HIGHCOLOR); //根据实际结果来显示自定义的色块背景色.
}
});
}
}
});
//弹出透明提示框
var x = 10,y = -30,systitle = '';
//绑定图片所示特定区域鼠标移动和点击事件.
$("#event_act_list area[shape*=circ]").bind('mouseover',
function(e) {
//根据移动不同县区，获取当前焦点所处县区。
var _regionType = $(this).attr('alt');
var _regionParams = "";
if(_regionType.indexOf('')) {
_regionParams = '';
}else if(_regionType.indexOf('')) {
_regionParams = '';
}else if(_regionType.indexOf('')) {
_regionParams = '';
}else if(_regionType.indexOf('')) {
_regionParams = '';
}else if(_regionType.indexOf('')) {
_regionParams = '';
}
//根据不同的区域热点，动态加载改区域热点及时数据。(注意：不同区域其预警信息数据值不一致)
$.ajax({
url : '${ctx}/threecolor/three-color-rule!getColorsByRegion.action', //异步提交。
data:{'regionParams' :_regionParams, 'op' : 'ajax'},
cache : false,
async : true, //设置与服务器交互方式为异步方式。
type : "POST", //POST提交。
dataType : 'json',
success : function (result){
if(result != "") {
var resJsonObj = result;
if(resJsonObj != null) {
resJson = "预警信息|";
$.each(resJsonObj, function(index) {
if(resJsonObj[index].MODEL != undefined && resJsonObj[index].COLOR != undefined) {
resJson += resJsonObj[index].MODEL + '|' + resJsonObj[index].COLOR + '|';
}
});
}else {
resJson = "预警信息|";
}
$.each($('ul li:nth-child(1)'), function(obj) {
if($(this).children().length > 0) {
$(this).find('a').remove();
$(this).find('img').before('<a id="content" data="' + resJson + '" class="has-tip" href="#"></a>');
}
})
systitle = $('#content').attr('data');
this.selfTitle = systitle.split('|');
arrData = this.selfTitle;
var showtip = [];
showtip[0] = "<div id='popbox' class='popup'><div class='popup_in'><div class='popup_font'><h4>" + arrData[0] + "</h4>";
for (var i = 1,l = arrData.length; i < l; i = i + 2) {
if (!arrData[i]) {
arrData[i] = '';
}
if (arrData[i] != 'undefined') {
if (arrData[i + 1] == undefined) {
arrData[i + 1] = ''
}
if(arrData[i+1] != undefined && arrData[i+1] != "") {
showtip.push("<p class='c'><span class='l'>" + arrData[i] + "</span><span class='r' style='width:15px; height: 15px;background-color: " + arrData[i+1] + ";border-radius: 10px;'></span></p>");
}
}
}
showtip.push("</div></div></div>");
$("body").append(showtip.join(''));
$("#popbox").css({"opacity":"0.95","top":(e.pageY + y) + "px","left":(e.pageX + x) + "px"}).show("fast");
}
}
});
}).bind('mouseout',
function() {
$("#popbox").remove();
}).bind('mousemove', function(e) {
$("#popbox").css({"top":(e.pageY + y) + "px","left":(e.pageX + x) + "px"});
}).bind('click', function() {
//按区域统计预警情况报表
var _regionParams = $(this).attr('alt');
window.open ('${ctx}/threecolor/three-color-rule!jqblAlalys.action?regionParams=' + encodeURIComponent(_regionParams), 'newwindow', 'height=800, width=1500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
});
})(jQuery)
</script>
</body>
</html>
相关推荐
4. **动态定位**：为了让提示框始终跟随鼠标，可以在鼠标移动事件中动态调整其位置。可以使用event对象的clientX和clientY属性获取鼠标位置，然后计算并更新提示框的left和top样式。 四、实战示例 在压缩包中，...
在今天的知识分享中，我们将探讨如何利用JQuery实现一个常见的网页交互效果：鼠标移上元素时弹出提示框，鼠标移出时提示框消失。这一交互功能在用户界面设计中非常实用，能够有效地为用户提供额外的信息或说明。 ...
《jQuery随鼠标移动提示插件详解》 在Web开发中，提供友好的用户交互体验是至关重要的，而提示信息就是其中一种有效的方式。jQuery作为一款强大的JavaScript库，为开发者提供了丰富的功能，包括创建动态和交互式的...
本资源“jquery tips提示图片信息.rar”显然聚焦于利用jQuery实现一种图片提示信息的功能，这通常涉及到图片展示、用户交互以及可能的动画效果。以下是关于这个主题的详细知识点： 1. jQuery选择器：jQuery的选择器...
jQuery Tips提示插件是这个库的一个扩展，它增强了网页的用户体验，通过提供自适应屏幕宽度的提示信息，使用户能够更方便地理解和操作页面内容。 一、jQuery Tips提示插件介绍 jQuery Tips插件主要用于在网页上显示...
当光标移动到某些元素上时，会弹出像tips的提示框。 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>...
标题 "jquery做的一个onmouse出tips帮助文档的一个效果" 提示我们这个压缩包中的内容是关于使用jQuery实现鼠标悬停（onmouseover）时显示提示信息（tips）的示例。这种效果常见于许多网站，当用户将鼠标移到某个元素...
25.jquery鼠标移动出现下拉菜单及提示特效代码 26.jquery外国滚动型多级展开菜单插件(jGlideMenu)下载 27.jquery自由滚动切换 标签式导航菜单示例 28.博客Blog横向jquery动态滑动菜单插件示例 29.打包50种...
当鼠标移动到特定元素上时，我们可以通过绑定`mouseenter`或`mouseover`事件来触发提示消息的显示。同时，利用`fadeIn`, `fadeToggle`或`show`等方法可以实现消息窗口的动态显示。 下面是一个基本的步骤来实现这个...
标题中的“JQUERY实现左侧TIPS滑进滑出效果示例”是指利用JavaScript库jQuery来创建一种交互式UI效果，即当鼠标悬停在某个元素（如一个按钮或链接）上时，会在页面左侧显示出一个提示框（TIPS），这个提示框会平滑地...
标题中的“jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)”是指使用jQuery库来创建一种美观且实用的商品图片提示功能。当用户将鼠标悬停在商品图片上时，会显示一个带有阴影效果的提示框，提供额外...
通过上述方法，即使不使用jQuery等库，也能够使用原生JavaScript轻松实现一个跟随鼠标移动的链接文字提示框效果。该技术对于提高网站的用户体验非常有帮助，尤其是对于信息密集型的网站，能够让用户更快地获取信息。...
它可能具有独特的视觉效果，如线条跟随鼠标移动等。 **1.23 Cut & Paste jQuery Mega Menu** Cut & Paste jQuery Mega Menu 可能是一种易于使用的 Mega 菜单插件，它提供了拖放式的编辑界面，让用户可以方便地调整...
Flip Out Cards是一个基于jQuery的多层次多方向弹出卡片插件，Flip Out Cards插件可以轻松实现当鼠标悬浮于卡片上时，同时从卡片的左、右、下三个方向弹出三张卡片，看起来有点像变形金刚的感觉，用于产品的说明是个...
JavaScript中的工具提示条（Tips）是一种常见的用户交互元素，它可以在鼠标悬停在特定元素上时显示额外的信息，提供上下文帮助或者展示详细数据。在本文中，我们将深入探讨JavaScript工具提示条的基本概念、实现方式...
3. **鼠标位置获取**：通过监听鼠标事件获取当前鼠标的屏幕坐标，确保提示信息能够跟随鼠标移动而移动。 4. **CSS样式控制**：使用CSS定义提示信息的外观样式，包括边框、背景色等，以提升用户体验。 #### 代码解析...
标题中的“基于jQuery的类似Google搜索的提示列表”是指一种使用JavaScript库jQuery实现的功能，它模仿了Google搜索引擎的自动完成功能。这个功能通常用于提高用户体验，当用户在搜索框中输入关键字时，系统会根据已...
3. **JQ Layer插件**: 基于jQuery的弹出层插件，提供了一套完整的弹出层解决方案，包括多种类型的弹出样式和交互方式。 ### 二、主要功能 1. **提示（Tips）**: 快速显示简单提示信息，可自定义样式和位置。 2. **...