<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>quanren</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script type="text/javascript" src="js/ui.core.min.js"></script>
<script type="text/javascript" src="js/ui.dragdrop.min.js"></script>
<script type="text/javascript" src="js/ui.resize.min.js"></script>
<script type="text/javascript" src="js/ui.imagemarker.js"></script>
</head>
<body>
<div style="cursor:pointer;" id="quanren">圈人</div>
<div class="imgContainer" id="imgContainer">
<img src="images/test.jpg" id="bigImage" height="444" />
</div>
<br />
<p>
左上Left<input type="text" id="nwLeft" size="6" />左上Top<input type="text" id="nwTop" size="6" />
</p>
<p>
右下Left<input type="text" id="seLeft" size="6" />右下Top<input type="text" id="seTop" size="6" />
</p>
<div class="BPTTleft" style="width:100%;"></div>
<script type="text/javascript">
var photo = [
{"tagid":"1","tagname":"知道是否是真的发","taguserid":"8487373","leftL":"63","leftT":"81","rightL":"382","rightT":"392"},
{"tagid":"1","tagname":"bbbbbbb","taguserid":"","leftL":"129","leftT":"151","rightL":"252","rightT":"266"},
{"tagid":"3","tagname":"aaaaaaaa","taguserid":"3454322","leftL":"267","leftT":"147","rightL":"354","rightT":"229"}
];
function showTags(){
photo=window.eval(photo);
if ($jj(".divArr").length==0){
$jj('<div class="divArr"></div>').
appendTo($jj("#imgContainer"));
}
var listTags="";
var listDivs="";
if(photo.length>0){
for(var i=0;i<photo.length;i++){
listTags+="<li id=\""+photo[i].taguserid+"\">"+photo[i].tagname+" <span id=\""+photo[i].tagid+"\">×</span></li>";
listDivs+="<div style=\"height:"+(photo[i].rightT-photo[i].leftT)+"px;width:"+(photo[i].rightL-photo[i].leftL)+"px;"
listDivs+="left:"+photo[i].leftL+"px;top:"+photo[i].leftT+"px;\" title=\""+photo[i].tagname+"\"></div>"
}
$jj(".divArr").html(listDivs);
$jj(".BPTTleft").html("<ul>"+listTags+"</ul>");
$jj(".BPTTleft").find("ul > li").each(function(k){
$jj(this).mouseover(function(){
XC.divShow(k);
}).
mouseout(function(){
XC.divHide(k);
}).
click(function(){
XC.goSpace($jj(this).attr("id"));
}).
children("span").click(function(){
XC.delDiv($jj(this).attr("id"));
});
});$jj(".divArr").find("div").each(function(k){
$jj(this).addClass("divShow").
attr("id","div_"+k).
css("z-index",999+k).
mouseover(function(){
$jj(this).
css({ border: "1px #FF6600 solid",
height: ""+(parseInt($jj(this).css("height"))-2)+"px",
width: ""+(parseInt($jj(this).css("width"))-2)+"px" }).
html("<div style=\"top:"+(parseInt($jj(this).css("height"))+2)+"px;left:"+$jj(this).css("left")+"px;\" class=\"divHtml\">"+$jj(this).attr("title")+"</div>");
}).
mouseout(function(){
$jj(this).
css({ border: "0px #FF6600 solid",
height: ""+(parseInt($jj(this).css("height"))+2)+"px",
width: ""+(parseInt($jj(this).css("width"))+2)+"px" }).
children("div").
remove();
});
});
}
}
showTags.prototype = {
divShow: function (div) {
$jj("#div_"+div).
css({ border: "1px #FF6600 solid",
height: ""+(parseInt($jj("#div_"+div).css("height"))-2)+"px",
width: ""+(parseInt($jj("#div_"+div).css("width"))-2)+"px" }).
html("<div style=\"top:"+(parseInt($jj("#div_"+div).css("height"))+2)+"px;left:"+$jj("#div_"+div).css("left")+"px;\" class=\"divHtml\">"+$jj("#div_"+div).attr("title")+"</div>");
},
divHide: function (div) {
$jj("#div_"+div).
css({ border: "0px #FF6600 solid",
height: ""+(parseInt($jj("#div_"+div).css("height"))+2)+"px",
width: ""+(parseInt($jj("#div_"+div).css("width"))+2)+"px" }).
children("div").
remove();
},
alldivHide: function () {
$jj(".divShow").hide();
},
alldivShow: function () {
$jj(".divShow").show();
},
goSpace: function (uID) {
//if(uID!="")alert(uID);
},
delDiv: function (tID) {
//ajax删除tag
XC=new showTags();
$jj("#photo-marker").fadeOut("slow",
function(){
$jj(".okPosition").
slideUp("slow");
});
}
}
var XC=new showTags();
</script>
<script type="text/javascript">
var code_00="@";
var arrLenn="@";
var firstVall="";
function frSearch(){
$jj(".okPosition").children("input").val($jj(".okPosition").children("input").val().replace(/[,'"\\&<>?()%$#@!^*_+-;~]/g,""));
$jj(".okPosition").children("input").val($jj(".okPosition").children("input").val().replace(/\s/,""));
var code=$jj(".okPosition").children("input").val();
if(code!=""){
if(code.indexOf(code_00)==-1 || arrLenn!=0){
if(firstVall!=code){
$jj.ajax({
type : "POST" ,
async : false ,
url : "http://192.168.18.19:8080/!/common/AjaxSearch22.php",
data : "ran="+Math.random()+"&key="+code,
success : function(msg){
if(msg.indexOf("您已登录超时")==-1){
var jsonFr=window.eval(msg);
var listFrr=""
if(jsonFr.length!=0){
for(i=0;i<jsonFr.length;i++){
listFrr+="<input type=\"radio\" value=\""+jsonFr[i].USERID+"\" name=\"jsonFr\" class=\"radio\" /> "+jsonFr[i].USERNAME+" ("+jsonFr[i].REGION+")<br />";
}
$jj(".okFre").html("<b>您也可以直接选择以下好友:</b><br />"+listFrr);
arrLenn=jsonFr.length;
code_00="@";
firstVall=code;
}else{
/*没有找到匹配朋友*/
arrLenn=0;
firstVall="";
code_00=="@"?code_00=code:code_00="@";
}
}else{
/*登录超时*/
arrLenn=0;
}
} ,
error : function(){
/*网络繁忙,请求失败*/
arrLenn=0;
}
});
}
}else{
/*未找到匹配朋友*/
firstVall="";
arrLenn=0;
}
}else{
/*未输入字母或汉字*/
firstVall="";
arrLenn=0;
}
if(arrLenn==0){
$jj(".okFre").css({ height: "1px", overflow: "hidden" });
}else{
$jj(".okFre").children("input").each(function(k){
$jj(this).click(function(){
//ajax提交好友
alert(this.value);
XC=new showTags();
quanren = false;
$jj("#photo-marker").
remove();
});
});
$jj(".okFre").css("height","auto");
}
$jj(".okFre").slideDown("slow");
}
/**/
var imagemarker = null;
var quanren = false;
$jj("#quanren").click(function(){
if(!quanren){
imagemarker = new xuanchi.ui.imageMarker({
drag:test,
resize:test,
dragStop:test,
resizeStrop:test
});
}
quanren = true;
XC.alldivHide();
$jj("#photo-marker").slideDown("slow",
function(){
$jj(".okPosition").slideDown("slow",function(){
$jj(this).children("input").keyup(function(){
frSearch();
});
$jj(this).children("button").each(function(k){
if(k==0){$jj(this).click(function(){
//ajax提交
XC=new showTags();
quanren = false;
$jj("#photo-marker").
remove();
});}
if(k==1){$jj(this).click(function(){
if(quanren){
quanren = false;
XC.alldivShow();
$jj("#photo-marker").fadeOut("slow",
function(){
$jj(".okPosition").
slideUp("slow");
});
}
});}
});
});
});
});
function test(){
var myObj = imagemarker.getPosition();
$jj("#nwLeft").val(myObj.nw[0]);
$jj("#nwTop").val(myObj.nw[1]);
$jj("#seLeft").val(myObj.se[0]);
$jj("#seTop").val(myObj.se[1]);
$jj(".okPosition").css({ top: 0,
left: myObj.se[0]-myObj.nw[0]+6
});
}
</script>
</body>
</html>
JS实现图片圈人，仿校内网圈人
4星 · 超过85%的资源 需积分: 9 197 浏览量
2010-08-07
13:30:01
上传
评论 1
收藏 251KB RAR 举报 
圈人.rar （16个子文件） 
圈人 images 
marqueeHoriz.gif 1KB marker-shine.gif 113B tmbg.gif 43B
test2.jpg 159KB marker-square.gif 829B
Thumbs.db 29KB test.jpg 59KB marqueeVert.gif 1KB js ui.dragdrop.min.js 24KB ui.resize.min.js 18KB Thumbs.db 4KB jquery-1.3.min.js 54KB ui.imagemarker.js 4KB ui.core.min.js 8KB index.htm 8KB style style.css 4KB
- 1
- 2
- 3
前往页