Jquery特效
调用js
<script type="text/javascript" src="../js/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> <link rel="stylesheet" href="../css/minh.css" /> <script type="text/javascript" src="../js/min.js"></script> <script src="../js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="../layer/layer.js" type="text/javascript"></script>1.生成一个table
function addtable()
{
var dom_tbody = $('<tbody></tbody>');
for (var j = 0; j < 200; j++) {
var dom_tr = $('<tr></tr>');
for (var i = 0; i < 200; i++) {
var id="r"+j+"l"+i;
var dom_td = $("<td id="+id+"></td>");
dom_tr.append(dom_td);
}
dom_tbody.append(dom_tr);
}
var dom_table = $('<table id="maptable" style="border:1; margin:auto;width:auto;"></table>');
dom_table.append(dom_tbody);
$("#tablediv").append(dom_table);
}
$(function(){
$("#hide1").on("click",function(){
var xy=$("#hide2").html().split(",");;
var pagex,pagey;
pagex=xy[0];
pagey=xy[1];
layerid++;
var div_img='<div id="layer'+layerid+'" name="layer" class="layer" style="position: absolute;left:'+xx+'px;top:'+yy+'px;width:auto;height:auto;z-index: 50;"><div id="layer_handle'+layerid+'" class="layer_handle'+layerid+'" name="layer_handle"><img src="../img/6.png" id=img'+layerid+' style="height:30px;width:30px;position:absolute;left:0;top:0;"></img></div></div>';
$("#putimg").append(div_img);
var idd='#layer'+layerid;
var handle_id="#layer_handle"+layerid;
var imgid="#img"+layerid;
$(idd).Draggable(
{
zIndex: 2000000000,
ghosting: false,
opacity: 0.7,
handle: handle_id
});
$(imgid).on('click',function(e){
//获取坐标后，在旁边弹出一个div
var div_edit='<div id="ee'+layerid+'" style="height:35px; text-align:center; width:100px;position: absolute; z-index: 20000000; left:'+e.pageX+'px ;top:'+e.pageY+'px"><input type="button" id="delete'+layerid+'" style="background-color: #FFF;border: 1px solid #CDCDCD;height: 30px;width: 40%;align:left" value="删除"><input type="button" id="edit'+layerid+'" style="background-color: #FFF;border: 1px solid #CDCDCD;height: 30px;width: 40%;align:right" value="修改"></div>';
$("#putEdit").append(div_edit);
var deletebtn="#delete"+layerid;
var editbtn="#edit"+layerid;
var editdiv="#ee"+layerid;
editdivid=editdiv;
$(deletebtn).on('click',function(e){
$(editdiv).remove();
$(idd).remove();
})
$(editbtn).on('click',function(e){
$(editdiv).hide();
var iframtop=e.pageY+'px';
var iframleft=e.pageX+'px';
//此刻弹出一个iFrame对相关信息进行修改
$.layer({
type: 2,
title: '修改/查看',
shadeClose: true, //开启点击遮罩关闭层
offset: [iframtop ,iframleft],
area : ['280px' , '170px'],
iframe: {id:"Edit.html",src: 'editap.html'}
});
})
});
});
$("#hide3").on('click',function(){
$(editdivid).remove();
});
});
<body>
<div id="putimg" ></div>
<div id="putEdit" ></div>
<input type="button" id="hide1" style="display:none;" >
<input type="button" id="hide3" style="display:none;" >
<div id="hide2" style="display:none;"></div>
<div style="height:45px; block" ></div>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="imageUpload" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="button" name="button" class="btn" value="上传" />
</form>
</div>
<div id="list"></div>
<div id="tablediv" style="text-align:center" ></div>
</body>
3.弹出layer
$(function(){
$("table").on('click',function(e)
{
var x=e.pageX.toString()+'px';
var y=e.pageY.toString()+'px';
xx=e.pageX.toString();
yy=e.pageY.toString();
$.layer({
type: 2,
title: '添加AP',
shadeClose: true, //开启点击遮罩关闭层
offset: [y , x],
area : ['280px' , '170px'],
iframe: {id:"addaps",src: 'addap.html'}
});
});
});
$(function(){
$("#yes").on('click',function(){
var returnvalue="100px,200px";
$("#hide3", window.parent.document).trigger("click");
var i = parent.layer.getFrameIndex(window.name);
parent.layer.close(i);
});
$("#no").on('click',function(){
$("#hide3", window.parent.document).trigger("click");//触发父页面响应事件
var i = parent.layer.getFrameIndex(window.name);//关闭该iframe
parent.layer.close(i);
});
})
5.根据控件出发事件进行处理
$("ul").on("click",function(e){ var event = e || window.event, elementId = event.target.id; if (elementId == "xxxx"){xxxxx}})
6.选择器
li has son
7.选择器
$(".next").click(function () {
var i = 0;
var $parent = $(this).parents("div .v_show");
var $v_show = $parent.find("div .v_content_list");
var $v_content = $parent.find(".v_content a");
var v_width = $v_content.width();
var len = $v_show.find("li").length;
if (!$v_show.is(":animated")) {
if (i == len) {
$v_show.animate({ left: '0px' }, "slow");
i = 0;
} else {
$v_show.animate({ left: '-=' + v_width }, "slow");
i++;
}
}
})