js的一些功能实例代码

//图片预览
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;
}
}

时间: 2024-10-29 19:05:59

js的一些功能实例代码的相关文章

js网址跳转实例代码

js网址跳转实例代码:网址跳转是常用的功能,比如点击一个按钮实现跳转,或者说希望一条新闻打开后可以跳转到其他页面,就可以直接在编辑器中输入跳转代码.下面就简单列举一下js跳转代码,可以根据实际情况选择使用.方式一: window.location.href="http://www.softwhy.com"; 以上代码可以跳转到指定的链接.方式二: window.history.back(-1); 以上代码可以返回之前访问的页面.方式三: self.location="http

纯css+js下拉菜单实例代码

纯css+js下拉菜单实例代码 分享一个css+js下拉菜单代码,js+css实现的简单下拉菜单,兼容性不错. 例子:<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

js淡入淡出效果实例代码

js淡入淡出效果实例代码:现在的网页要求美观平滑,所以很多让元素消失的效果也也需要有一个过渡过程,这样看起来更为平缓美观,本章节提供了一个代码实例,可以轻松的实现让元素淡入淡出效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com

JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)

一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp负责数据显示,javabean负责封装数据. Servlet+JSP+JavaBean模式程序各个模块之间层次清晰,web开发推荐采用此种模式. 这里以一个最常用的用户登录注册程序来讲解Servlet+JSP+JavaBean开发模式,通过这个用户登录注册程序综合案例,把之前的学过的XML.Xpat

php设计模式之责任链模式实现举报功能实例代码

html <html> <head> <meta charset="UTF-8"> <title>责任链模式</title> </head> <body> <h1>责任链模式举报</h1> <form action="09-2.php" method="post"> <select name="lev"

JS实现注销功能

JS实现注销功能,代码如下: 1 <script> 2 window.history.forward(1); 3 </script> 这个代码的用法就是: 比如,我们此时有两个页面:Login.html 和 Index.html 我们要实现从 Login.html 登陆到 Index.html 注销的话,那么,就把代码放到 Index.html 页面 简单来说,在那个页面注销,就将这个代码放到哪个页面,我在Index.html注销,所以,将代码放到Index.html .

php+mysql+js拖拽div实例

php+mysql+js拖拽div实例 代码已改好,放在目录下可直接使用.适合新手学习! 效果如下图,比较适合做可以移动,拖拽的留言板. 实现思路: 思路也是很简单了,就是js获取定位后的数据,然后请求给PHP,php将定位的横向坐标和纵向坐标存到数据库! 代码实例下载地址:http://download.csdn.net/detail/u011986449/8099045

原生js实现的创建和删除元素实例代码

原生js实现的创建和删除元素实例代码:在实际应用中,往往需要动态的创建和删除指定的元素,下面就通过代码实例介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

js实现的div拖动效果实例代码

js实现的div拖动效果实例代码:div的拖动效果在很多效果中都有应用,当然还有很多附加的功能,本章节只是给拖动效果,并介绍一下它的实现过程.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t