jQ插件



//表示根据你的协议编写
swiper 移动端广泛应用的插件
cdn 内容分发网络(content dliver network)
如果百度使用了cdn中的jquery。js 用户打开过百度
下载过这个js文件 我们使用的和他同一个cdn中的jquery。js
用户打开我们的网页时使用浏览器缓存中jquery.js
(function($){
var lunbo = function(){
console.log(1)
}
$.fn.extend({
lunbo:lunbo;
})
})(jQuery)
$(document).lunbo();

jquery 插件

(function($){
var lunbo=function(config){
var _config={
interval:1500,
step:$.noop
}
$.extend(_config,config)
var ul=this.find(‘ul’),
li=ul.find(‘li’),
index=1,
off=li.outerWidth(true);
setInterval(function(){
ul.animate({‘marginLeft’:-index*off},500);
index+=1;
_config.step(index);
if(index===li.length){
index=0;
}
},_config.interval)
return this;
}
$.fn.extend({lunbo:lunbo});
}(jQuery))

$(‘.lunbo’).lunbo({
interval:2500,
step:function(i){
$(‘.pu’).fadeToggle(2500)
}
});
$(‘.xiaolunbo’).lunbo();

拓展一个数组去重方法
<!– $.quchong([1,1,1,2,3])

reverseString –>

@keyframes diaoluo{
0%{
transform: translateY(0);
}
100%{
transform:translateY(300px);
}
}

#section1{
h1{
position: absolute;
top:0;
color: white;
width: 100%;
text-align: center;
}
}

#section1.active{
h1{
animation:diaoluo .8s ease both infinite alternate 1s;
}
}

#section2{
position: relative;
%fk{
width: 200px;
height: 200px;
background: pink;
}
.zuo,.you{
@extend %fk;
position: absolute;
top: 50%;
transition: all 5s ease;
}
.zuo{
left: 0;
}
.you{
right:0;
}
}

#section2.active{
.zuo{
transform: translateX(200px);
}
.you{
transform: translateX(-200px);
}
}

<!DOCTYPE html>




Document





0%