跟随鼠标移动的悬浮提示框案例

js部分

$(function(){
$('<div id="tip_box"></div>').appendTo(document.body);
$(".mhover li").each(function (i) {
$(this).mousemove(function (ev) {
var str = $(this).data("ori");
var box = $('#tip_box');
box.show();
box.html(str);
var t = $(window).scrollTop();
var x = ev.clientX - box.width() - 40;
var y = ev.clientY + t - 15;
box.css({ left: x, top: y });
});
$(this).mouseout(function () {
$("#tip_box").hide();
});
});
})

html部分

<style type="text/css">
* { margin:0; padding:0; list-style:none;}
.mhover { margin: 50px auto 0; width:200px; border:solid 1px #ccc;}
.mhover li { height:30px; line-height:30px;}
#tip_box { position:absolute; top:0; left:0; background:#f00;}
</style>

<div class="mhover">
<ul>
<li data-ori="这里是需要显示的文字1">标题</li>
<li data-ori="这里是需要显示的文字2">标题</li>
<li data-ori="这里是需要显示的文字3">标题</li>
<li data-ori="这里是需要显示的文字4">标题</li>
<li data-ori="这里是需要显示的文字5">标题</li>
<li data-ori="这里是需要显示的文字6">标题</li>
<li data-ori="这里是需要显示的文字7">标题</li>
<li data-ori="这里是需要显示的文字8">标题</li>
<li data-ori="这里是需要显示的文字9">标题</li>
</ul>
</div>

textarea自适应高度

html部分

<textarea id="textarea" placeholder="回复内容"></textarea>
<script type="text/javascript" src="autoTextarea.js"></script>
<script>
var text = document.getElementById("textarea");
autoTextarea(text);// 调用
</script>

js部分

var autoTextarea = function (elem, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function (type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function (name) {
var val = elem.currentStyle[name];

if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};

return val;
} : function (name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));


elem.style.resize = 'none';

var change = function () {
var scrollTop, height,
padding = 0,
style = elem.style;

if (elem._length === elem.value.length) return;
elem._length = elem.value.length;

if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

elem.style.height = minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
};
style.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
};
};

addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
change();
};

js正则表达式限制文本框只能输入数字,小数点,英文字母

1.文本框只能输入数字代码(小数点也不能输入)

<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

2.只能输入数字,能输小数点.

<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

3.数字和小数点方法二

<input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">
Read more

判断是否是微信内置浏览器

function isWeiXin(){ 
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}

$(function(){
if(isWeiXin()){
$("body").html("微信打开");
}else {
$("body").html("其它浏览器打开");
}
})

jquery实现返回顶部

//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500);
} else {
$("#back-to-top").fadeOut(1500);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});

jquery判断地址栏是否存在某参数

var arr = new Array();
var pa;
r = window.location.search;//获取地址栏问号之后的参数(包括问号)
r = r.substr(1);//去除问号
arr = r.split('&');//切割多个参数为数组
for(i=0;i<arr.length;i++){
pa = arr[i].split('=');//把单个参数的名称和值拆分开
if(pa[0]=='b' && pa[1]=='bbb'){//判断参数名称和值是否对应
console.log('abcdefg');//输出
}
}

input默认提示文字

//input默认提示文字
$('.input_text_val').bind({
focus:function(){
if (this.value == this.defaultValue){
this.value="";
}
},
blur:function(){
if (this.value == ""){
this.value = this.defaultValue;
}
}
})

div移动到顶部固定不变

//获取要定位元素距离浏览器顶部的距离
var navH = $(".hb").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$(".hb").css({"position":"fixed","top":0});
}else if(scroH<navH){
$(".hb").css({"position":"static"});
}
})

两个div同步滑动(js, jquery)

方法一.使用js(适用web和wap)

//横向滚动条同步
<div id="div1" style="width:500px; overflow:scroll;" onscroll="document.getElementById('div2').scrollLeft = this.scrollLeft;">
<div style="width:800px; height:50px;"></div>
</div>
<div id="div2" style="width:500px; overflow:scroll;" onscroll="document.getElementById('div1').scrollLeft = this.scrollLeft;">
<div style="width:800px; height:50px;"></div>
</div>

//竖向滚动条同步
<div id="div1" style="width:500px; overflow:scroll;" onscroll="document.getElementById('div2').scrollTop = this.scrollTop;">
<div style="width:800px; height:50px;"></div>
</div>
<div id="div2" style="width:500px; overflow:scroll;" onscroll="document.getElementById('div1').scrollTop = this.scrollTop;">
<div style="width:800px; height:50px;"></div>
</div>
Read more