js的一些功能实例代码

标签：pagex   ...   margin   show   on()   last   top   图片预览   inf   

//图片预览
HUIDENG.imgShow = function(){
$(".img_show").each(function(){
var tar = $(this);
var img = tar.closest("li").find(".img");
var windowURL = window.URL || window.webkitURL;

tar.change(function(e){
var inp_text = this.files[0];
var src = windowURL.createObjectURL(inp_text);
img.find("img").attr("src",src);
});
});
}();

//手机端拖拽移动
$(‘.bt_edit‘).on(‘touchstart‘,function(e){
var tar = $(this);
var po_right = parseFloat(tar.css("right"));
var po_bottom = parseFloat(tar.css("bottom"));

tar.css({
webkitAnimation: "none"
});

var x1 = e.originalEvent.targetTouches[0].pageX;
var y1 = e.originalEvent.targetTouches[0].pageY;

$(document).on("touchmove",function(e){
var x2 = e.originalEvent.targetTouches[0].pageX;
var y2 = e.originalEvent.targetTouches[0].pageY;

tar.css({
webkitTransform: "translate("+(x2-x1)+"px,"+(y2-y1)+"px)"
});
});

$(document).on("touchend",function(e){
$(document).off("touchmove");
var x3 = e.originalEvent.changedTouches[0].pageX;
var y3 = e.originalEvent.changedTouches[0].pageY;

tar.css({
webkitTransform: "translate(0,0)",
right: po_right-(x3-x1)+"px",
bottom: po_bottom-(y3-y1)+"px",
webkitAnimation: "action0 0.5s linear infinite forwards"
})
$(document).off("touchend");

});
})

//自适应下拉菜单
var box = $(".slide");
var box_a = box.find("a");
var len = box_a.length;
var wid = 0;
for(var i=0;i<len;i++){
var wid_val = box_a.eq(i).width();
wid+=(wid_val+10);
}
box.css({
width: wid+"px",
marginLeft: -wid/2+"px",
display: "none"
});

$(".thisclick").hover(function(){
box.stop().slideDown("fast");
},function(){
box.stop().slideUp("fast");
})

//判断文本是否有修改
$(function(){
$(document).data(‘isUpdate‘,‘false‘);
$(document).click(function(tar){
if(tar.target.nodeName == ‘INPUT‘){
if(!$(tar.target).is(‘input[type = ["bitton"]‘)){
$(document).data(‘isUpdate‘,‘true‘);
}
}
})
if(isUpdate == ‘true‘){
...
}
})

//瀑布流
function waterfall(){
var Oul = $("#water");
var Box = $("#water li");
var w = Box.eq(0).outerWidth();
var hArr = [];
var minHIndex;
var mainHeight = 0;

Box.each(function(index,value){
var h=Box.eq(index).outerHeight();
if(index < 2){
hArr[index] = h;
}else{
var minH=Math.min.apply(null,hArr);
minHIndex = $.inArray(minH ,hArr);
$(value).css({
‘position‘:‘absolute‘,
‘top‘:minH + ‘px‘,
‘left‘:minHIndex * w +‘px‘
});
hArr[minHIndex] += Box.eq(index).outerHeight();
}
})
}

//赋值高度
function calheight(){
var Oul = $("#water");
var Box = $("#water li");
var oneHeight = 0;
var twoHeight = 0;

oneHeight = Oul.children("li:last-child").position().top +Oul.children("li:last-child").outerHeight();
twoHeight =Oul.children("li:last-child").prev().position().top +Oul.children("li:last-child").prev().outerHeight();
if(twoHeight > oneHeight){
Oul.height(twoHeight);
}else{
Oul.height(oneHeight);
}
}

//产生随机数
var flag;
var arr = [];
for(var i =0;i<20;i++){
var ran = parseInt(Math.random()*9+1);
for(var j=0;j<4;j++){
if(ran != arr[j]){
flag = true;
}else if(ran == arr[j]){
flag =false;
break;
}
}
if(flag){
arr.push(ran);
}
if(arr.length == 4){
break;
}
}

js的一些功能实例代码

标签：pagex   ...   margin   show   on()   last   top   图片预览   inf   

原文地址：http://www.cnblogs.com/thisxiaojiu/p/6602272.html