<%@ 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>
相关推荐
用jQuery实现div跟着鼠标走 鼠标移动时，层也跟着鼠标的移动而移动
鼠标移上某一位置，随即在鼠标附近弹出层，鼠标移动则层移动
jQuery实现鼠标划过文字左右移动 请点击演示地址看效果。
jQuery鼠标移动发出气泡动画
五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 ...
jquery实现鼠标移动出现提示信息
jquery鼠标移动放大图片
jQuery实现鼠标划过时文字左右移动 代码应该有用
jquery实现缩略图边框跟随鼠标移动特效.rarjquery实现缩略图边框跟随鼠标移动特效.rarjquery实现缩略图边框跟随鼠标移动特效.rarjquery实现缩略图边框跟随鼠标移动特效.rarjquery实现缩略图边框跟随鼠标移动特效....
主要为大家详细介绍了jQuery实现div跟随鼠标移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Jquery IU Draggable随着鼠标移动实现拖动.zip
jQuery实现平面图区域标记拖拽移动效果
jquery实现鼠标移动开窗效果.rar
jquery元素跟随鼠标移动
jQuery磁性透明图层跟随鼠标移动图片特效
5种jquery+css3鼠标移动悬停动画效果，供大家一起共同分享学习。
Jquery改装的tabs页面，鼠标移动上去切换，可以点击链接和jquery的UI是不同的