01
2020
12

css动画可以暂停

css动画已经很熟悉了,用的也越来越多,基本每个网站都有用到。但是css动画可以暂停?我还真不知道。

animation-play-state(running | paused)

该属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外,它的值可以被设置为暂停和恢复的动画的重放。其中恢复已暂停的动画,是从它暂停的时候,而不是从动画的起点。

<div class="play">
    点我
</div>
.play{  
    width: 100px; 
    height:100px; 
    margin: 40px; 
    text-align:center;
    line-height: 94px; 
    border: 3px solid #e1efde; 
    border-radius: 50%; 
    animation: play-state 3s linear infinite; 
    cursor: pointer; 
}
.play:hover {   
    animation-play-state: paused; 
}
@keyframes play-state {   
    0% {
        margin-left: 0;
    }   
    100% {
        margin-left: 200px;
    } 
}


12
2020
10

实现checkbox 翻页后,仍保持选中状态

使用的技术

localStorage.setItem(key,val);

localStorage.getItem(key);

<input type="checkbox" value="1" name="ids" onclick="save_storage(this)"/>小明
<input type="checkbox" value="2" name="ids" onclick="save_storage(this)"/>小李
<input type="checkbox" value="3" name="ids" onclick="save_storage(this)"/>小王

选中时存value,不选时移除value的js方法

14
2020
09

swiper 2实现匀速无缝滚动

var mySwiper = new Swiper('.swiper-container',{
    autoplay : 1, //间隔一毫秒滚动一下
    speed:3000,  //匀速时间
    loop : true,
    freeMode:true,  //设置为true则变为free模式
    slidesPerView : 5,
});

然后修改swiper.css的代码

16
2020
08

通过option的text动态设置下拉框选中

html:

<select id="myselect">
    <option value="">性别</option>
    <option value="01">男</option>
    <option value="02">女</option>
</select>

js:

12
2020
08

滚屏加载–无刷新动态加载数据技术的应用

滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后 台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用。本文将使用jQuery,结合 PHP,mysql以及JSON,为您讲解如何应用滚屏加载技术到您的项目中去。当然,阅读本文的前提是您需要有jQuery和PHP相关基础。

12
2020
08

PHP实现将textarea的值根据回车换行拆分至数组

textarea回车换行为 \r\n

$keyword_list = trim($_REQUEST['keywords']);
$keyword_arr = explode("\r\n", $keyword_list);

这个地方需要注意是要去除textarea 前后的空格,否则会多出一个

或者使用explode也是可以的

01
2020
08

滚轮滚动时让div背景图片移动的相对缓慢

鼠标滚轮滚动时,这一个div的移动速度相对较慢,下面其他div内容能够追上并超越它。

css代码:

.banner { width: 100%; position: fixed; top:0;}

js代码:

//banner 缓升

var BannerBox = $(".banner");
BannerHeight();
$(window).scroll(function(){
    BannerHeight();
})
function BannerHeight(){
    BannerBox.css({
        "top" : -$(window).scrollTop()/5+"px"
    })
}
25
2020
07

纯CSS解决锚点跳转偏移

能用css自然不想用js解决,因为在加载方面,css总是先加载,并且速度很快。

.div{
   position:relative;
   padding-top:50px;
   margin-top: -50px;
}

 

完美兼容chrome和Firefox,其他浏览器未测试。

14
2020
07

css来控制img正方形自适应

该方法主要用来做网站自适应的,同时可以实现撑起内容高度。

实现方法很多,其中简洁的方法就是直接在img的父元素上加padding-bottom

<div class="img-box">
	<img src="123.jpg"/>
</div>
.img-box{
	padding-bottom:100%;
}
.img-box img{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	margin:auto;
}


.img-box img里的宽度100%,高度100%就可以填满整个正方形框,如果都不填则自动水平居中和垂直居中div框内

01
2020
07

两个DIV高度自适应方法(左右两个DIV高度一样)

 html:

<div id="container">
    <div id="leftSide">
        <p>aaaa</p>
        <p>aaaa</p>
    </div> 
    <div id="rightSide">bbb</div>
</div>

1、使用display:table; 利用的table本身的自适应特性,兼容性好,容易使用