18
2023
09

Ueditor百度编辑器中的 setContent()方法的使用

百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容

函数说明:setContent(string,boolean);

参数string 是需要设置到编辑器里面的内容,可以含有HTML代码,最后插入到编辑器中的内容是经过 编辑器内置过滤器过滤后的内容,同时该函数会出发selectionchange 事件。

参数:boolean,(true/false) true表示清空编辑器俩面的内容,在内容后面添加内容,不传,默认是true;false表示清空当前编辑器的内容后,在插入内容。

16
2022
12

flex布局设置单个子元素靠右

· 父盒子加了display: flex,就相当于起到浮动的效果,盒子会自行排列成一排;

· 若想让父盒子里的某一个盒子靠右显示,其他盒子居左, 只需要在父盒子里面,加入display: flex,在想要移动的盒子里面,加入margin-left: auto即可;

· 同理,如果你想让第一个盒子向左显示,其余盒子都向右显示,只需要给左边的第一个盒子设置 margin-right:auto即可;

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,其他浏览器未测试。