前端的小技巧

最新推荐文章于 2022-11-15 10:47:32 发布

置顶蒙奇D路飞12138

最新推荐文章于 2022-11-15 10:47:32 发布

阅读量664

点赞数

分类专栏：个人笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_29994361/article/details/88898259

版权

个人笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、表格圆角不能用用的问题

border-collapse: separate;

//注:  border-collapse: collapse; 会和 border-radius冲突!!!!

高度是百分比，文字如何居中

给父级添加 display:table;

给子级添加
display:table-cell;
vertical-align:middle;

select去掉默认样式

appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*剩下的背景可以自定义*/

去掉复选框默认样式

.c_table .table2 tr td .che1 input{
    float:left;
    width:18px;
    height:17px;
    border:0;
    outline:none;
    margin-right:5px;
    background:url(images/min_ico4.png) no-repeat;
    appearance: none;
    -o-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.c_table .table2 tr td .che1 input:checked{
    background:url(images/min_ico3.png) no-repeat;
    border:0;
    outline:none;
}

wow.js的使用方法，先要引用wow.js和animate.css

<div class="testing_radio1 wow slideInRight" data-wow-duration="0.2s" data-wow-delay="0s">

</div>
<script>
    var wow = new WOW({
        boxClass:     'wow',            //boxClass：动画元素的class名称。默认为'wow'。
        animateClass: 'animated',       //animateClass：动画class类。默认为'animated'。
        offset:       0,                //offset：触发动画时元素的偏移距离。默认为0。
        mobile:       true,             //mobile：是否在移动设备上触发动画。默认为true。
        live:         true,             //live：是否异步加载内容。默认为true。
        callback:     function(box) {   //callback：回调函数。
            
        },
        scrollContainer: null           //scrollContainer：可选的滚动容器选择器，不设置时默认为window。
    });
    wow.init();  
    /*
        wow rollIn	从左到右、顺时针滚动、透明度从100%变化至设定值

        wow bounceIn	从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
        wow bounceInUp	从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
        wow bounceInDown	从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
        wow bounceInLeft	从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
        wow bounceInRight	从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变

        wow slideInUp	从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
        wow slideInDown	从上往下、上来后固定到设定位置、透明度为设定值不变
        wow slideInLeft	从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
        wow slideInRight	从右往左、上来后固定到设定位置、透明度为设定值不变

        wow lightSpeedIn	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
        wow pulse	原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
        wow flipInX	原位置后仰前栽、透明度从100%变化至设定值
        wow flipInY	原位置左右旋动、透明度从100%变化至设定值
        wow bounce	上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
        wow shake	左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
        wow swing	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
        wow bounceInU	原位置不变、直接从不显示到显示（无过过渡效果）
        wow wobble	原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

        data-wow-duration 改变动画时间
        data-wow-delay 延迟在动画开始之前
        data-wow-offset 距离开始动画(有关浏览器底部)
        data-wow-iteration 动画重复的次数
    */
</script>

jquery获得$(this)下面的指定的子元素

<script type="text/javascript">
    //方法一 find查找所有的子元素,一直查找,跨层级查 
	var name1= $(this).find(".abc").css();

	//方法二 children 查找直接子元素,不跨层级
	var name2 = $(this).children(".abc").css();
</script>

自身元素的父级元素，添加个class，然后遍历其它兄弟元素，去除其它父级所有的class

$(this).parent().addClass("on1").siblings().removeClass();

表格换行，加在table上

	word-break:break-all; 
	word-wrap:break-all;

英文换行

.p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/

背景图技巧

background-origin:border-box;    背景图忽略border和padding，显示在边框上
background-origin:padding-box;    背景图忽略padding，显示在padding
background-origin:content-box;    背景图直接显示在内容区内

多行文字上下居中

父级
display: flex;
justify-content: space-around;
子级
display: flex;
align-items: center;

点及打开遮罩层，点击其它区域或者按钮关闭遮罩层

<div class="g_tc" id="Form_1" style="display: block;">
	<div class="c_100 ul">
		<div class="pic-Text">
			<a class="x1" href="javascript:;" onclick="$('#Form_1').fadeOut()">
				<img src="assets/images/case/de-x.png" >
			</a>
			<div class="tc-contact">
	</div>
		</div>
	</div>
</div>
<script>

if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest =
    function(s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i,
            el = this;
        do {
            i = matches.length;
            while (--i >= 0 && matches.item(i) !== el) {};
        } while ((i < 0) && (el = el.parentElement));
        return el;
    };
}
/*兼容ie*/

	$("#Form_1").click(function (e) {
		var target = e.target;
		if(target.closest('.ul')==null){
			$("#Form_1").hide();
		}
	});
	$(function(){
		$(".floor-1-list ul li").click(function(){    //.floor-1-list ul li点击的
			$("#Form_1").fadeIn();
		})
	})
</script>
<style>
.g_tc{ 
	display:none; 
	background:rgba(0,0,0,0.8); 
	position:fixed; 
	left:0px; 
	top:0; 
	width:100%; 
	height:100%; 
	z-index:10000; 
	padding: 0 60px;
}

.x1{ 
	position:absolute; 
	right:16px; 
	top:12px;
	z-index: 999;
}

.c_100{  
	width:100%; 
	height: 100%;
	position:relative;
	
}
.pic-Text{
	float: left;
	width: 100%;
	background:#fff;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index:99;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	
}

.tc-contact{
	float: left;
	width: 100%;
	padding: 53px 37px 50px 52px;
}
</style>

qQQ大图标

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=273822832&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:273822832:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

计时器倒数执行css

<script type="text/javascript">
	$(function(){
		var i = 6;
		//设置定时器（循环去执行）
		var timeId = setInterval(function () {
			i--;
			//清理定时器
			if(i<=0){
				$('.newY-banner').css({"marginTop":"-100%"});
				window.clearInterval(timeId);
			}
		}, 500)
	})
</script>

div内滚动距离超过多少240某些元素显示，低于240隐藏

	// $(".pf-ewm").stop(true,true).fadeOut(1000); // 如果小于等于 200 淡出
	$('.c-body').scroll(function(event){
		if($('.c-body').scrollTop() >= 240){
			$(".pf-ewm").fadeIn(1000); // 开始淡入
		} else{
			$(".pf-ewm").stop(true,true).fadeOut(1000); // 如果小于等于 200 淡出
		}
	});