原地址http://www.w3cfuns.com/notes/16580/7165dcd29b8fe012d0d0ac73eb01a1ba.html
来源:互联网 发布:pingfangsc字体 mac版 编辑:程序博客网 时间:2024/05/18 01:05
去除input框的内阴影以及点击时背景灰色:
input,
textarea,
select {
-webkit-appearance: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
获取用户的input输入的内容
var name = $('.b_name').val();
判断用户输入的字节;
if(name.length==3)
弹出层用的是js动态定位(追求效率,用的以前封装的方法)
//居中显示弹出层
function popBox(id){
var w =$(id).width();
var h =$(id).height();
var t = scrollY() +(windowHeight()/2)-(h/2);
if(t<0)t=0;
var l = scrollX()+((windowWidth())-(w))/2;
if(l<0) l=0;
$(id).css({left:l/20+'rem',top:t/20+'rem'});
$(id).css('display','block');
}
//浏览器视口的高度(兼容写法-male)
function windowHeight() {
var de = document.documentElement;
return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}
//浏览器视口的宽度(兼容写法-male)
function windowWidth() {
var de = document.documentElement;
return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}
弹窗的div和img自动地位在ab的靠左的document。body
弹窗div边框透明写法
.css{-webkit-background-clip: content-box;background-clip: content-box;}
背景图根据手机分辨率大小来适应高度
1. position: relative;
2. height: 22rem;
3. margin: 0 auto;
4. background: #000 url(../img/center_page/mine_bg_head@2x.png) no-repeat top center;
5. background-size: cover;
6. color: #fff;
复选框的全选以及未全部选
https://css-tricks.com/indeterminate-checkboxes/
移动端垂直水平居中
http://caibaojian.com/mobile-translate.html
方法1
.center{
width:50%;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
方法2
.center {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
解决移动端弹出层不适配小屏幕手机的问题
.mask{
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
display: block;
width: 100%;
height: 100%;
background: #000;
z-index: 9;
position: absolute;
position: fixed;
top: 0;
left: 0;
}
清除浮动
给父级加上 overflow:hidden
点击弹窗以外的地方可退出弹窗
$(".next_col1").click(function(){
$(".mask_big").show();
return false;//必定要加
})
$(document).click(function(){
$(".mask_big").hide();
});
zepto移动端点击按钮之后先显示延迟5秒之后在显示弹出框!
<script language='javascript' type='text/javascript'>
$(function () {
setTimeout(function () {
$("divid").show();
}, 6000);
})
</script>
在浏览器中有些a标签没有用的只是为了显示小手,一定记得不href=“#”换成href=" javascript:void(0); "
target="_self"不然在外网会出现点击无效
refresh 属性值 -- 刷新与跳转(重定向)页面
5秒之后刷新本页面:
<meta http-equiv="refresh" content="5" />
5秒之后转到××首页:
<meta http-equiv="refresh" content="5; url=http://www.baidu.com/" />
css计算器
div {
width:-webkit-calc(100%-100px);
width:-moz-calc(100%-100px);
width:calc(100%-100px);
}
类似于标签的让文字适应 加display: inline-block;就能解决啦
zepto不支持scrollTop时,返回顶部有动画的方法
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
// 滚动条到页面顶部的水平距离var x = Math.max(x1, Math.max(x2, x3));
// 滚动条到页面顶部的垂直距离var y = Math.max(y1, Math.max(y2, y3));
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
// 如果距离不为零, 继续调用迭代本函数if (x > 0 || y > 0) {
var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
window.setTimeout(invokeFunction, time);
}
}
$(".fix_go_top").on("click", function() {
//$("body").scrollTop(0);
//window.scrollTo(0,0); goTop();
});
jq插入图片[
$("#yf1")[0].src="http://nimage.39.net/ask2016/wx_ask/images/yf_06.png";
文字超过宽度后面的文字显示为点点
text-overflow : ellipsis;
white-space : nowrap;
overflow : hidden
文字设置超过两行文字打点点
1. height: 50px;
2. text-overflow: -o-ellipsis-lastline;
3. overflow: hidden;
4. text-overflow: ellipsis;
5. display: -webkit-box;
6. -webkit-line-clamp: 2;
7. -webkit-box-orient: vertical;
点击a标签跳转可以滑动效果
$(function(){
sectionLength = $(".content section").size();
//锚点跳转滑动效果
$('a[href*=#],area[href*=#]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
})
滚动条滚动到顶部除去定位,滑动过程定位fixed
// 定位
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".nav").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0});
}else if(scroH<navH){
$(".nav").css({"position":"static"});
}
})
})
微信分享标题自定义
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
需要配置id
<script>
var wxinfo = new api39_wx({
title: '【示爱宣言】——遇上这种表白,谁不想跟你啪啪啪',
desc: '',
link: 'http://ask.39.net/html5/jies_h5/',
imgUrl: 'http://image.39.net/ask2016/wx_ask/xingqingjun/jies_h5/images/share_t.jpg'
});
</script>
h5背景音乐播放循环
诚心奉上最近被坑的h5背景音乐,说多了都是泪
兼容安卓、ios,音乐播放当中遇见服务器配置问题会出现音乐无法播放,
html:
<span id="musicControl">
<a id="mc_play" class="on" onclick="play_music();">
<audio id="musicfx" loop="loop" autoplay="autoplay" >
<source src=" http://biz.ifeng.com/fashion/special/derucci20153g/img/music.mp3" type="audio/mpeg">
</audio>
</a>
</span>
css:
@-webkit-keyframes reverseRotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(360deg);}
}
#musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
#musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url('../images/mcbg.png') no-repeat;background-size:100%;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:left bottom;}
#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:}
js:
function play_music(){
if ($('#mc_play').hasClass('on')){
$('#mc_play audio').get(0).pause();
$('#mc_play').attr('class','stop');
}else{
$('#mc_play audio').get(0).play();
$('#mc_play').attr('class','on');
}
$('#music_play_filter').hide();
event.stopPropagation(); //阻止冒泡
}
function just_play(id){
$('#mc_play audio').get(0).play();
$('#mc_play').attr('class','on');
if (typeof(id)!='undefined'){
$('#music_play_filter').hide();
}
event.stopPropagation(); //阻止冒泡
}
function is_weixn(){
return false;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
var play_filter=document.getElementById('music_play_filter');
play_filter.addEventListener('click', function(){
just_play(1);
});
play_filter.addEventListener('touchstart', function(){
just_play(1);
});
play_filter.addEventListener('touchend', function(){
just_play(1);
});
play_filter.addEventListener('touchmove', function(){
just_play(1);
});
play_filter.addEventListener('mousedown', function(){
just_play(1);
});
play_filter.addEventListener('mouseup', function(){
just_play(1);
});
play_filter.addEventListener('mousemove',function(){
just_play(1);
});
window.onload=function(){
if (!is_weixn()){
just_play();
}
}
打算集齐七个龙珠在写一篇jq的总结:
(先来两个吧,哈哈哈哈)
禁用Jquery(动画)效果
$(document).ready(function() {
jQuery.fx.off = true;
});
与其他Javascript类库冲突解决方案
$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq('#id').show();
});
input,
textarea,
select {
-webkit-appearance: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
获取用户的input输入的内容
var name = $('.b_name').val();
判断用户输入的字节;
if(name.length==3)
弹出层用的是js动态定位(追求效率,用的以前封装的方法)
//居中显示弹出层
function popBox(id){
var w =$(id).width();
var h =$(id).height();
var t = scrollY() +(windowHeight()/2)-(h/2);
if(t<0)t=0;
var l = scrollX()+((windowWidth())-(w))/2;
if(l<0) l=0;
$(id).css({left:l/20+'rem',top:t/20+'rem'});
$(id).css('display','block');
}
//浏览器视口的高度(兼容写法-male)
function windowHeight() {
var de = document.documentElement;
return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}
//浏览器视口的宽度(兼容写法-male)
function windowWidth() {
var de = document.documentElement;
return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}
弹窗的div和img自动地位在ab的靠左的document。body
弹窗div边框透明写法
.css{-webkit-background-clip: content-box;background-clip: content-box;}
背景图根据手机分辨率大小来适应高度
1. position: relative;
2. height: 22rem;
3. margin: 0 auto;
4. background: #000 url(../img/center_page/mine_bg_head@2x.png) no-repeat top center;
5. background-size: cover;
6. color: #fff;
复选框的全选以及未全部选
https://css-tricks.com/indeterminate-checkboxes/
移动端垂直水平居中
http://caibaojian.com/mobile-translate.html
方法1
.center{
width:50%;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
方法2
.center {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
解决移动端弹出层不适配小屏幕手机的问题
.mask{
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
display: block;
width: 100%;
height: 100%;
background: #000;
z-index: 9;
position: absolute;
position: fixed;
top: 0;
left: 0;
}
清除浮动
给父级加上 overflow:hidden
点击弹窗以外的地方可退出弹窗
$(".next_col1").click(function(){
$(".mask_big").show();
return false;//必定要加
})
$(document).click(function(){
$(".mask_big").hide();
});
zepto移动端点击按钮之后先显示延迟5秒之后在显示弹出框!
<script language='javascript' type='text/javascript'>
$(function () {
setTimeout(function () {
$("divid").show();
}, 6000);
})
</script>
在浏览器中有些a标签没有用的只是为了显示小手,一定记得不href=“#”换成href=" javascript:void(0); "
target="_self"不然在外网会出现点击无效
refresh 属性值 -- 刷新与跳转(重定向)页面
5秒之后刷新本页面:
<meta http-equiv="refresh" content="5" />
5秒之后转到××首页:
<meta http-equiv="refresh" content="5; url=http://www.baidu.com/" />
css计算器
div {
width:-webkit-calc(100%-100px);
width:-moz-calc(100%-100px);
width:calc(100%-100px);
}
类似于标签的让文字适应 加display: inline-block;就能解决啦
zepto不支持scrollTop时,返回顶部有动画的方法
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
// 滚动条到页面顶部的水平距离var x = Math.max(x1, Math.max(x2, x3));
// 滚动条到页面顶部的垂直距离var y = Math.max(y1, Math.max(y2, y3));
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
// 如果距离不为零, 继续调用迭代本函数if (x > 0 || y > 0) {
var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
window.setTimeout(invokeFunction, time);
}
}
$(".fix_go_top").on("click", function() {
//$("body").scrollTop(0);
//window.scrollTo(0,0); goTop();
});
jq插入图片[
$("#yf1")[0].src="http://nimage.39.net/ask2016/wx_ask/images/yf_06.png";
文字超过宽度后面的文字显示为点点
text-overflow : ellipsis;
white-space : nowrap;
overflow : hidden
文字设置超过两行文字打点点
1. height: 50px;
2. text-overflow: -o-ellipsis-lastline;
3. overflow: hidden;
4. text-overflow: ellipsis;
5. display: -webkit-box;
6. -webkit-line-clamp: 2;
7. -webkit-box-orient: vertical;
点击a标签跳转可以滑动效果
$(function(){
sectionLength = $(".content section").size();
//锚点跳转滑动效果
$('a[href*=#],area[href*=#]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
})
滚动条滚动到顶部除去定位,滑动过程定位fixed
// 定位
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".nav").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0});
}else if(scroH<navH){
$(".nav").css({"position":"static"});
}
})
})
微信分享标题自定义
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
需要配置id
<script>
var wxinfo = new api39_wx({
title: '【示爱宣言】——遇上这种表白,谁不想跟你啪啪啪',
desc: '',
link: 'http://ask.39.net/html5/jies_h5/',
imgUrl: 'http://image.39.net/ask2016/wx_ask/xingqingjun/jies_h5/images/share_t.jpg'
});
</script>
h5背景音乐播放循环
诚心奉上最近被坑的h5背景音乐,说多了都是泪
兼容安卓、ios,音乐播放当中遇见服务器配置问题会出现音乐无法播放,
html:
<span id="musicControl">
<a id="mc_play" class="on" onclick="play_music();">
<audio id="musicfx" loop="loop" autoplay="autoplay" >
<source src=" http://biz.ifeng.com/fashion/special/derucci20153g/img/music.mp3" type="audio/mpeg">
</audio>
</a>
</span>
css:
@-webkit-keyframes reverseRotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(360deg);}
}
#musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
#musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url('../images/mcbg.png') no-repeat;background-size:100%;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:left bottom;}
#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:}
js:
function play_music(){
if ($('#mc_play').hasClass('on')){
$('#mc_play audio').get(0).pause();
$('#mc_play').attr('class','stop');
}else{
$('#mc_play audio').get(0).play();
$('#mc_play').attr('class','on');
}
$('#music_play_filter').hide();
event.stopPropagation(); //阻止冒泡
}
function just_play(id){
$('#mc_play audio').get(0).play();
$('#mc_play').attr('class','on');
if (typeof(id)!='undefined'){
$('#music_play_filter').hide();
}
event.stopPropagation(); //阻止冒泡
}
function is_weixn(){
return false;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
var play_filter=document.getElementById('music_play_filter');
play_filter.addEventListener('click', function(){
just_play(1);
});
play_filter.addEventListener('touchstart', function(){
just_play(1);
});
play_filter.addEventListener('touchend', function(){
just_play(1);
});
play_filter.addEventListener('touchmove', function(){
just_play(1);
});
play_filter.addEventListener('mousedown', function(){
just_play(1);
});
play_filter.addEventListener('mouseup', function(){
just_play(1);
});
play_filter.addEventListener('mousemove',function(){
just_play(1);
});
window.onload=function(){
if (!is_weixn()){
just_play();
}
}
打算集齐七个龙珠在写一篇jq的总结:
(先来两个吧,哈哈哈哈)
禁用Jquery(动画)效果
$(document).ready(function() {
jQuery.fx.off = true;
});
与其他Javascript类库冲突解决方案
$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq('#id').show();
});
0 0
- 原地址http://www.w3cfuns.com/notes/16580/7165dcd29b8fe012d0d0ac73eb01a1ba.html
- http://www.w3cfuns.com/
- http://www.w3cfuns.com/article-1305-1.html
- 数组定义 转载 原地址:http://www.tzwhx.com/newOperate/html/1/12/121/21969.html
- 使用activitygroup(原地址:http://www.cnblogs.com/answer1991/archive/2012/05/08/2489844.html)
- 转载:SVN忽略已添加到版本库文件或者问文件夹,原地址:http://www.phpddt.com/phpdown/svn-ignore.html
- 使用HTTP协议访问网络 原网址https://www.2cto.com/kf/201701/552932.html
- extern “C” 阅读笔记 (转自---http://www.vcfans.com/2008/03/extern-c-read-the-notes.html)
- 新bolg地址 http://www.milletblog.com/
- 原文地址:http://www.cnblogs.com/kuangbin/archive/2011/07/26/2117636.html
- 求解协方差矩阵算法 转载地址:http://www.16kan.com/post/231601.html
- WebLogic的下载地址http://www.oracle.com/technetwork/middleware/weblogic/downloads/wls-main-097127.html
- java反射详解-原文地址:http://www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html
- jquery-dbgrid demo 地址 ( http://www.trirand.com/blog/jqgrid/jqgrid.html)
- DPDK内存管理 原文地址:http://www.cnblogs.com/jintianfree/p/4018043.html
- 原文地址http://www.cnblogs.com/biyeymyhjob/archive/2012/07/12/2588074.html
- .9.png 转载地址http://www.cnblogs.com/lwbqqyumidi/p/3373070.html
- 格式工厂下载地址http://www.33lc.com/soft/1958.html
- C# MD5 加密
- 锋利的jquery读书笔记---jquery的dom操作
- 阿里云CDN的API操作
- android 程序检测是否安装其他一个程序
- Orcad 原理图完成后 的 规则检查,设置很重要。
- 原地址http://www.w3cfuns.com/notes/16580/7165dcd29b8fe012d0d0ac73eb01a1ba.html
- STM32时钟系统
- Intent setClass and setComponent
- 设计模式解析
- eclipse配置tomcat8
- 安卓开发添加依赖后,提示类找不到异常,控件不显示
- java8 -Date/Time
- C语言学习—第二章 C语言入门程序(老司机开车)
- ListView setSelection()无效