node

node

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
javascript/jQuery

javascript/jQuery

一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
MongoDB

MongoDB

MongoDB 是一个基于分布式文件存储的数据库
openstack

openstack

OpenStack是一个由NASA(美国国家航空航天局)和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。
VUE

VUE

一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
bootstrap

bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
HTML

HTML

超文本标记语言,标准通用标记语言下的一个应用。
CSS/SASS/SCSS/Less

CSS/SASS/SCSS/Less

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
PHP

PHP

PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML(标准通用标记语言下的一个应用)文档中去执行,执行效率比完全生成HTML标记的CGI要高许多;PHP还可以执
每天进步一点点

每天进步一点点

乌法把门的各累笑寂静
求职招聘

求职招聘

猎头招聘专用栏目
Python

Python

一种解释型、面向对象、动态数据类型的高级程序设计语言。

保留2位

lopo1983 发表了文章 • 0 个评论 • 396 次浏览 • 2021-09-29 20:51 • 来自相关话题

retain(key, pow = 2) {
            const [k1, k2] = key.split('.')
            if(!k1 || !k2) return
            if(this[k1][k2]==0) return this.$set(this[k1], k2, '')
            const multiple =  Math.pow(10, Number(pow))
            const num = ~~(Number(this[k1][k2]) * multiple) / multiple
            this.$set(this[k1], k2, num)
        } 查看全部
retain(key, pow = 2) {
            const [k1, k2] = key.split('.')
            if(!k1 || !k2) return
            if(this[k1][k2]==0) return this.$set(this[k1], k2, '')
            const multiple =  Math.pow(10, Number(pow))
            const num = ~~(Number(this[k1][k2]) * multiple) / multiple
            this.$set(this[k1], k2, num)
        }

js偏函数

lopo1983 发表了文章 • 0 个评论 • 1101 次浏览 • 2019-06-10 09:50 • 来自相关话题

有一种函数叫偏函数( 左倾 ),其原理是将一些函数组合封装到一个函数中,调用时可以按顺序实现全部功能。使用时大多需要配合reduceRight
const compose = (...args) => x => args.reduceRight((result, cb) => cb(res), x); 查看全部

有一种函数叫偏函数( 左倾 ),其原理是将一些函数组合封装到一个函数中,调用时可以按顺序实现全部功能。使用时大多需要配合reduceRight


const compose = (...args) => x => args.reduceRight((result, cb) => cb(res), x);

关于call 和apply的理解

lopo1983 发表了文章 • 0 个评论 • 1231 次浏览 • 2018-04-09 01:23 • 来自相关话题

call猫吃鱼,狗吃肉,奥特曼打小怪兽。

有天狗想吃鱼了

猫.吃鱼.call(狗,鱼)

狗就吃到鱼了

猫成精了,想打怪兽

奥特曼.打小怪兽.call(猫,小怪兽)?
apply
一天猫不仅想吃肉,还想吃猪肉牛肉羊肉,那么:狗.吃肉.apply(猫, [猪肉, 牛肉, 羊肉])
? 查看全部
call
猫吃鱼,狗吃肉,奥特曼打小怪兽。

有天狗想吃鱼了

猫.吃鱼.call(狗,鱼)

狗就吃到鱼了

猫成精了,想打怪兽

奥特曼.打小怪兽.call(猫,小怪兽)
?
apply
一天猫不仅想吃肉,还想吃猪肉牛肉羊肉,那么:狗.吃肉.apply(猫, [猪肉, 牛肉, 羊肉])

?

ES6常用新特性(vue中常用)

lopo1983 发表了文章 • 0 个评论 • 1308 次浏览 • 2018-01-10 09:07 • 来自相关话题

刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中。但是ES6那么多那么多特性,掌握好常用的。
?1.let 和 const 命令
?
let和const来声明,let表示变量、const表示常量。let和const都是块级作用域。
?
什么是会计作用域?
?{}大括号内的代码块即为let 和 const的作用域。
案例 向一个数组中插入0~9//
var funcs =
for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i) })
}
funcs.forEach(function(func) {
func()
})

//
// ES5告诉我们可以利用闭包解决这个问题
var funcs =
for (var i = 0; i < 10; i++) {
func.push((function(value) {
return function() {
console.log(value)
}
}(i)))
}
// es6
for (let i = 0; i < 10; i++) {
func.push(function() {
console.log(i)
})
}
。2.模板字符串
js 拼接模板很头疼,es5 之前 += + 各种“” ‘’
?
es6直接`` //es5
var name = 'lopo'
console.log('hello' + name)
//es6
const name = 'lopo'
console.log(`hello ${name}`) //hello lopo
console.log(`hello ${name==='xz'?'213':'hehe'}`) // hello hehe
3.函数
?函数默认值
es6 可为参数提供默认值,以方便初始化//es5
function action(num) {
num = num || 200
//当传入num时,num为传入的值
//当没传入参数时,num即有了默认值200
return num
}
//es6
function action(num = 200) {
console.log(num)
}
action() //200
action(300) //300


箭头函数
?
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。
不需要function关键字来创建函数省略return关键字继承当前上下文的 this 关键字
//es5
[1,2,3].map((function(x){
return x + 1
}).bind(this))
//es6 仅有一个参数的时候,是可以省略掉括号的
[1,2,3].map( x => {x + 1} )
[1,2,3].map( x => x + 1 )
//有参数
var people = (name, age) => {
const fullName = 'h' + name
return fullName
} ?
.....未完待续...... 查看全部

刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中。但是ES6那么多那么多特性,掌握好常用的。


?1.let 和 const 命令
?
let和const来声明,let表示变量、const表示常量。let和const都是块级作用域。
?
什么是会计作用域?

?{}大括号内的代码块即为let 和 const的作用域。


案例 向一个数组中插入0~9
//
var funcs =
for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i) })
}
funcs.forEach(function(func) {
func()
})

//
// ES5告诉我们可以利用闭包解决这个问题
var funcs =
for (var i = 0; i < 10; i++) {
func.push((function(value) {
return function() {
console.log(value)
}
}(i)))
}
// es6
for (let i = 0; i < 10; i++) {
func.push(function() {
console.log(i)
})
}
2.模板字符串
js 拼接模板很头疼,es5 之前 += + 各种“” ‘’
?
es6直接``
    //es5 
var name = 'lopo'
console.log('hello' + name)
//es6
const name = 'lopo'
console.log(`hello ${name}`) //hello lopo
console.log(`hello ${name==='xz'?'213':'hehe'}`) // hello hehe

3.函数
?函数默认值
es6 可为参数提供默认值,以方便初始化
//es5
function action(num) {
num = num || 200
//当传入num时,num为传入的值
//当没传入参数时,num即有了默认值200
return num
}
//es6
function action(num = 200) {
console.log(num)
}
action() //200
action(300) //300


箭头函数
?
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。
  • 不需要function关键字来创建函数
  • 省略return关键字
  • 继承当前上下文的 this 关键字

  • //es5
    [1,2,3].map((function(x){
    return x + 1
    }).bind(this))
    //es6 仅有一个参数的时候,是可以省略掉括号的
    [1,2,3].map( x => {x + 1} )
    [1,2,3].map( x => x + 1 )
    //有参数
    var people = (name, age) => {
    const fullName = 'h' + name
    return fullName
    }
    ?
    .....未完待续......

    svg动画库 vivus.js

    lopo1983 发表了文章 • 0 个评论 • 2040 次浏览 • 2017-05-27 02:12 • 来自相关话题

    vivus.js 是一个用于操作简单svg动画的js库,它不依赖任何的js库。目前版本为0.4.1
    ?
    一、安装
    官网地址:https://github.com/maxwellito/vivus
    CNPM:cnpm install vivusBowerbower install vivusCDN(该cdn 的版本为0.4.0)<script src="https://cdn.bootcss.com/vivus/ ... gt%3B?
    Vivus 提供一个免费的在线的svg动画生成工具(online的) 地址为:instant
    二。?Animations
    ?
    vivus 动画有三种 Delayed、Sync、OneByOne(默认:Delayed)
















    ?三、原则
    ?
    1.vivus 是基于strokeDashoffset来进行动画的
    2.svg中的circle,rect,line和polyline慎用
    3.所有的svg都必须有描边属性 不能有fill(你可以用css 来进行fill 动画 svg 支持css3部分动画)
    4.不要有隐藏路径 和 text 元素
    ?
    四、使用
    ?
    内联svg<svg id="my-svg">
    <path...>
    <path...>
    <path...>
    </svg>

    <script>
    new Vivus('my-svg', {duration: 200}, myCallback);
    </script>object标签载入<object id="my-svg" type="image/svg+xml" data="link/to/my.svg"></object>

    <script>
    new Vivus('my-svg', {duration: 200}, myCallback);
    </script><div id="my-div"></div>

    <script>
    new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'}, myCallback);
    </script>
    创建object是会根据其父级来定大小
    如果你需要定义这个object的大小 需要在onReady回调中定义new Vivus('my-div-id', {
    file: 'link/to/my.svg'
    onReady: function (myVivus) {
    // `el` property is the SVG element
    myVivus.el.setAttribute('height', 'auto');
    }
    });
    用css3实现svg fill 动画/* Style */
    #mySVG * {
    fill-opacity: 0;
    transition: fill-opacity 1s;
    }

    #mySVG.finished * {
    fill-opacity: 1;
    }/* JavaScript */
    new Vivus('mySVG', {}, function (obj) {
    obj.el.classList.add('finished');
    })
    五、选项参数列表
    https://github.com/maxwellito/vivus#option-list
    六、方法
    https://github.com/maxwellito/vivus#methodsvar myVivus = new Vivus('my-svg-id');
    myVivus
    .stop()
    .reset()
    .play(2)var myVivus = new Vivus('my-svg-id');
    myVivus.play(1, function() {
    // called after the animation completes
    })

    // alternativly if you leave the speed param blank and use the default, you
    // can pass the callback as the first parameter like so.
    myVivus.play(function() {
    // called after the animation completes
    })七、贝塞尔函数类型设置
    默认:EASE, EASE_IN, EASE_OUT, EASE_OUT_BOUNCE用法new Vivus('my-svg-id', {
    type: 'delayed',
    duration: 200,
    animTimingFunction: Vivus.EASE
    }, myCallback);demo地址:demo 查看全部
    vivus.js 是一个用于操作简单svg动画的js库,它不依赖任何的js库。目前版本为0.4.1
    ?
    一、安装
    官网地址:https://github.com/maxwellito/vivus
    CNPM:
    cnpm install vivus
    Bower
    bower install vivus
    CDN(该cdn 的版本为0.4.0)
    <script src="https://cdn.bootcss.com/vivus/ ... gt%3B
    ?

    Vivus 提供一个免费的在线的svg动画生成工具(online的) 地址为:instant


    二。?Animations
    ?
    vivus 动画有三种 Delayed、Sync、OneByOne(默认:Delayed)

    68747470733a2f2f7261772e6769746875622e636f6d2f6d617877656c6c69746f2f76697675732f6d61737465722f6173736574732f64656c617965642e706e67.png


    68747470733a2f2f7261772e6769746875622e636f6d2f6d617877656c6c69746f2f76697675732f6d61737465722f6173736574732f73796e632e706e67.png


    68747470733a2f2f7261772e6769746875622e636f6d2f6d617877656c6c69746f2f76697675732f6d61737465722f6173736574732f6f6e6542794f6e652e706e67.png


    ?三、原则
    ?
    1.vivus 是基于strokeDashoffset来进行动画的
    2.svg中的circle,rect,line和polyline慎用
    3.所有的svg都必须有描边属性 不能有fill(你可以用css 来进行fill 动画 svg 支持css3部分动画)
    4.不要有隐藏路径 和 text 元素
    ?
    四、使用
    ?
    内联svg
    <svg id="my-svg">
    <path...>
    <path...>
    <path...>
    </svg>

    <script>
    new Vivus('my-svg', {duration: 200}, myCallback);
    </script>
    object标签载入
    <object id="my-svg" type="image/svg+xml" data="link/to/my.svg"></object>

    <script>
    new Vivus('my-svg', {duration: 200}, myCallback);
    </script>
    <div id="my-div"></div>

    <script>
    new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'}, myCallback);
    </script>

    创建object是会根据其父级来定大小
    如果你需要定义这个object的大小 需要在onReady回调中定义

    new Vivus('my-div-id', {
    file: 'link/to/my.svg'
    onReady: function (myVivus) {
    // `el` property is the SVG element
    myVivus.el.setAttribute('height', 'auto');
    }
    });


    用css3实现svg fill 动画

    /* Style */
    #mySVG * {
    fill-opacity: 0;
    transition: fill-opacity 1s;
    }

    #mySVG.finished * {
    fill-opacity: 1;
    }
    /* JavaScript */
    new Vivus('mySVG', {}, function (obj) {
    obj.el.classList.add('finished');
    })


    五、选项参数列表
    https://github.com/maxwellito/vivus#option-list
    六、方法
    https://github.com/maxwellito/vivus#methods
    var myVivus = new Vivus('my-svg-id');
    myVivus
    .stop()
    .reset()
    .play(2)
    var myVivus = new Vivus('my-svg-id');
    myVivus.play(1, function() {
    // called after the animation completes
    })

    // alternativly if you leave the speed param blank and use the default, you
    // can pass the callback as the first parameter like so.
    myVivus.play(function() {
    // called after the animation completes
    })
    七、贝塞尔函数类型设置
    默认:
    EASE, EASE_IN, EASE_OUT, EASE_OUT_BOUNCE
    用法
    new Vivus('my-svg-id', {
    type: 'delayed',
    duration: 200,
    animTimingFunction: Vivus.EASE
    }, myCallback);
    demo地址:demo

    lockr.js 本地储存 localStorage操作js库

    lopo1983 发表了文章 • 0 个评论 • 3402 次浏览 • 2017-05-24 23:51 • 来自相关话题

    一个本地储存操作js库,他真的很小,压缩版的甚至<2kb,你可以用类似api的方式来对本地存储进行操作。

    1.如何安装lockrbower install lockrcnpm i lockr --save你还可以点击在那遥远的地方直接下载使用<script src="/path/lockr.js" type="text/javascript"></script>
    2.API 介绍
    Lockr.prefix?- String
    ?
    设置一个字符串用于标记相关的值Lockr.prefix = 'lockr';
    Lockr.set('username', 'Coyote');
    localStorage.getItem('username');
    localStorage.getItem('lockr_username');




    Lockr.set?- :?[ key, value ]?{String, Number, Array or Object}
    给本地储存写入值Lockr.set('username', 'Coyote'); // String
    Lockr.set('user_id', 12345); // number
    Lockr.set('users', [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]);




    Lockr.get?- :?[ key ?/ ?hash_key , 默认值 ]
    读取本地储存的值,如果获取到的数值为null/undefined ?则返回设置的默认值Lockr.get('username');
    > "Coyote"

    Lockr.get('user_id');
    > 12345

    Lockr.get('users');
    > [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]

    Lockr.get('score', 0):
    > 0
    //不存在返回设置的默认值0
    Lockr.set('score', 3):
    Lockr.get('score', 0):
    > 3




    Lockr.rm?- arguments:?[ key ]?{String}
    从本地储存中移除相关数据Lockr.set('username', 'Coyote');
    Lockr.get('username');
    > "Coyote"
    Lockr.rm('username');
    Lockr.get('username');
    > undefined




    Lockr.sadd?- arguments?[ key, value ]{String, Number, Array or Object}
    给hash key添加指定值(持续添加类似push 但具备set 自动过滤重复)Lockr.sadd("wat", 1); // [1]
    Lockr.sadd("wat", 2); // [1, 2]
    Lockr.sadd("wat", 1); // [1, 2]




    Lockr.sismember?- arguments?[ key, value ]
    判断某hash key 是否包含某个值 ?返回Boolean true falseLockr.sadd("wat", 1);
    Lockr.sismember("wat", 1); // true
    Lockr.sismember("wat", 2); // false




    Lockr.smembers?- arguments?[ key ]
    返回hash key下的值Lockr.sadd("wat", 42);
    Lockr.sadd("wat", 1337);
    Lockr.smembers("wat"); // [42, 1337]




    Lockr.srem?- arguments?[ key, value ]
    移除hash key下的指定数值Lockr.sadd("wat", 1);
    Lockr.sadd("wat", 2);
    Lockr.srem("wat", 1);
    Lockr.smembers("wat"); // [2]




    Lockr.getAll?- arguments:?null
    获取所有数据生成多维数组Lockr.getAll();
    > ["Coyote", 12345, [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]]获取所有数据生成json数据Lockr.getAll(true);
    > [{"username": "Coyote"}, {"user_id": 12345}, {"users": [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]}]




    Lockr.flush()?- arguments:?null
    清空本地储存所有数据localStorage.length;
    > 3
    Lockr.flush();
    localStorage.length;
    > 0 查看全部
    lockr.png

    一个本地储存操作js库,他真的很小,压缩版的甚至<2kb,你可以用类似api的方式来对本地存储进行操作。

    1.如何安装lockr
    bower install lockr
    cnpm i lockr --save
    你还可以点击在那遥远的地方直接下载使用
    <script src="/path/lockr.js" type="text/javascript"></script>

    2.API 介绍

    Lockr.prefix?- String


    ?
    设置一个字符串用于标记相关的值
    Lockr.prefix = 'lockr';
    Lockr.set('username', 'Coyote');
    localStorage.getItem('username');
    localStorage.getItem('lockr_username');

    line.jpg

    Lockr.set?- :?[ key, value ]?{String, Number, Array or Object}


    给本地储存写入值
    Lockr.set('username', 'Coyote'); // String
    Lockr.set('user_id', 12345); // number
    Lockr.set('users', [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]);

    line.jpg

    Lockr.get?- :?[ key ?/ ?hash_key , 默认值 ]


    读取本地储存的值,如果获取到的数值为null/undefined ?则返回设置的默认值
    Lockr.get('username');
    > "Coyote"

    Lockr.get('user_id');
    > 12345

    Lockr.get('users');
    > [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]

    Lockr.get('score', 0):
    > 0
    //不存在返回设置的默认值0
    Lockr.set('score', 3):
    Lockr.get('score', 0):
    > 3

    line.jpg

    Lockr.rm?- arguments:?[ key ]?{String}


    从本地储存中移除相关数据
    Lockr.set('username', 'Coyote');
    Lockr.get('username');
    > "Coyote"
    Lockr.rm('username');
    Lockr.get('username');
    > undefined

    line.jpg

    Lockr.sadd?- arguments?[ key, value ]{String, Number, Array or Object}


    给hash key添加指定值(持续添加类似push 但具备set 自动过滤重复)
    Lockr.sadd("wat", 1); // [1]
    Lockr.sadd("wat", 2); // [1, 2]
    Lockr.sadd("wat", 1); // [1, 2]

    line.jpg

    Lockr.sismember?- arguments?[ key, value ]


    判断某hash key 是否包含某个值 ?返回Boolean true false
    Lockr.sadd("wat", 1);
    Lockr.sismember("wat", 1); // true
    Lockr.sismember("wat", 2); // false

    line.jpg

    Lockr.smembers?- arguments?[ key ]


    返回hash key下的值
    Lockr.sadd("wat", 42);
    Lockr.sadd("wat", 1337);
    Lockr.smembers("wat"); // [42, 1337]

    line.jpg

    Lockr.srem?- arguments?[ key, value ]


    移除hash key下的指定数值
    Lockr.sadd("wat", 1);
    Lockr.sadd("wat", 2);
    Lockr.srem("wat", 1);
    Lockr.smembers("wat"); // [2]

    line.jpg

    Lockr.getAll?- arguments:?null


    获取所有数据生成多维数组
    Lockr.getAll();
    > ["Coyote", 12345, [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]]
    获取所有数据生成json数据
    Lockr.getAll(true);
    > [{"username": "Coyote"}, {"user_id": 12345}, {"users": [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]}]

    line.jpg

    Lockr.flush()?- arguments:?null


    清空本地储存所有数据
    localStorage.length;
    > 3
    Lockr.flush();
    localStorage.length;
    > 0

    jQuery 瀑布流可以这样写

    boloog 发表了文章 • 0 个评论 • 1379 次浏览 • 2017-05-04 09:56 • 来自相关话题

    瀑布流实现原理
    ?
    固定每一个item的宽度根据父级绝对定位js计算每一行可以排列几个 (父级总宽度 / item)= 排列个数写一个空数组 循环保存每一行的下标高度循环所有item获取当前行最小的高度和索引,改变当前的left和top会用到left的值就是当前索引*item的宽度top的值就是当前索引的高度计算完以后重置当前索引的高度elHeight[minIndex]+= 当前的高度,依次循环就可以了浏览器缩放时添加一个resize再从第三部重新计算宽度,然后循环数据,调整样式
    ?
    实例代码
    ?
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Waterfall flow</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    body {
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    }
    .clearfix:after{
    content: "";
    display: block;
    clear: both;
    }
    input,button,select,textarea{
    outline:none;border: none;
    }
    a{
    text-decoration: none;
    }
    ul,li{
    list-style: none;
    }
    img{
    border: none;
    }
    .wrap {
    position: relative;
    min-width: 440px;
    width: 90%;
    margin: 0 auto;
    }
    .item {
    width: 200px;
    margin: 10px;
    position: absolute;
    transition: all .6s ease-out;
    font-size: 50px;
    color: #fff;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div class="wrap"></div>
    <script src="https://cdn.bootcss.com/jquery ... gt%3B
    <script>
    var WaterFall = {
    init: function(){
    // 添加 item 盒子
    this.addItem();
    // 添加好盒子就开始布局
    this.layout();
    // 改变窗口时执行
    this.resize();
    },
    addItem: function(){
    var wrap = $('.wrap');
    // 生成30个div 随机高度 和 颜色
    var item = '';
    for (var i = 0; i < 30; i++) {
    item +='<div class="item" style="height:'+parseInt(Math.random() * 100 + 230)+'px;background-color:'+this.getRandColor()+'">'+i+'</div>';
    }
    wrap.append(item);
    },
    layout: function(){
    var elHeight = [];
    // 计算每一行可以存放几个 item 总宽 / item宽度
    var countWidth = Math.floor( $('.wrap').width() / $('.item').width());
    // 初始化添加 第一行高度的下标
    for (var i = 0; i < countWidth; i++) {
    elHeight[i] = 0;
    }
    // 循环 所有item
    $('.item').each(function(index, el) {
    // apply 传入数组 取得最小的高度
    var minValue = Math.min.apply(null, elHeight);
    console.log(minValue)
    // 然后获取当前高度的索引
    var minIndex = elHeight.indexOf(minValue)
    // 修改当前的top 和 left
    $(this).css({
    top: elHeight[minIndex], // 获取当前索引对应的高度
    left: $(this).outerWidth(true) * minIndex // 当前的left值为 索引 * 宽度(位于第几个)
    })
    // 当前索引的高度 += 当前 item 的高度 (比如计算第二排高度时, 就等于上一个的 top + 当前的高度)elHeight[0] += 90 下一次高度就为90
    elHeight[minIndex] += $(this).outerHeight(true);
    });
    },
    resize: function(){
    $(window).resize(function() {
    WaterFall.layout();
    });
    },
    getRandColor: function(){
    var str = '1234567890abcdef';
    var colorStr = '#';
    for(var i =0; i < 6; i++){
    colorStr += str[ Math.floor(Math.random() * str.length) ];
    }
    return colorStr;
    }
    }
    WaterFall.init(); // 执行
    </script>
    </body>
    </html>
    在线查看
    ?
    总结

    瀑布流布局实现了,在数据多的情况下没有做分页加载数据,后续会补充。
    ?
    ? 查看全部
    瀑布流实现原理
    ?
  • 固定每一个item的宽度
  • 根据父级绝对定位
  • js计算每一行可以排列几个 (父级总宽度 / item)= 排列个数
  • 写一个空数组 循环保存每一行的下标高度
  • 循环所有item获取当前行最小的高度和索引,改变当前的left和top会用到
  • left的值就是当前索引*item的宽度
  • top的值就是当前索引的高度
  • 计算完以后重置当前索引的高度elHeight[minIndex]+= 当前的高度,依次循环就可以了
  • 浏览器缩放时添加一个resize再从第三部重新计算宽度,然后循环数据,调整样式

  • ?
    实例代码
    ?
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Waterfall flow</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    body {
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    }
    .clearfix:after{
    content: "";
    display: block;
    clear: both;
    }
    input,button,select,textarea{
    outline:none;border: none;
    }
    a{
    text-decoration: none;
    }
    ul,li{
    list-style: none;
    }
    img{
    border: none;
    }
    .wrap {
    position: relative;
    min-width: 440px;
    width: 90%;
    margin: 0 auto;
    }
    .item {
    width: 200px;
    margin: 10px;
    position: absolute;
    transition: all .6s ease-out;
    font-size: 50px;
    color: #fff;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div class="wrap"></div>
    <script src="https://cdn.bootcss.com/jquery ... gt%3B
    <script>
    var WaterFall = {
    init: function(){
    // 添加 item 盒子
    this.addItem();
    // 添加好盒子就开始布局
    this.layout();
    // 改变窗口时执行
    this.resize();
    },
    addItem: function(){
    var wrap = $('.wrap');
    // 生成30个div 随机高度 和 颜色
    var item = '';
    for (var i = 0; i < 30; i++) {
    item +='<div class="item" style="height:'+parseInt(Math.random() * 100 + 230)+'px;background-color:'+this.getRandColor()+'">'+i+'</div>';
    }
    wrap.append(item);
    },
    layout: function(){
    var elHeight = [];
    // 计算每一行可以存放几个 item 总宽 / item宽度
    var countWidth = Math.floor( $('.wrap').width() / $('.item').width());
    // 初始化添加 第一行高度的下标
    for (var i = 0; i < countWidth; i++) {
    elHeight[i] = 0;
    }
    // 循环 所有item
    $('.item').each(function(index, el) {
    // apply 传入数组 取得最小的高度
    var minValue = Math.min.apply(null, elHeight);
    console.log(minValue)
    // 然后获取当前高度的索引
    var minIndex = elHeight.indexOf(minValue)
    // 修改当前的top 和 left
    $(this).css({
    top: elHeight[minIndex], // 获取当前索引对应的高度
    left: $(this).outerWidth(true) * minIndex // 当前的left值为 索引 * 宽度(位于第几个)
    })
    // 当前索引的高度 += 当前 item 的高度 (比如计算第二排高度时, 就等于上一个的 top + 当前的高度)elHeight[0] += 90 下一次高度就为90
    elHeight[minIndex] += $(this).outerHeight(true);
    });
    },
    resize: function(){
    $(window).resize(function() {
    WaterFall.layout();
    });
    },
    getRandColor: function(){
    var str = '1234567890abcdef';
    var colorStr = '#';
    for(var i =0; i < 6; i++){
    colorStr += str[ Math.floor(Math.random() * str.length) ];
    }
    return colorStr;
    }
    }
    WaterFall.init(); // 执行
    </script>
    </body>
    </html>

    在线查看
    ?
    总结

    瀑布流布局实现了,在数据多的情况下没有做分页加载数据,后续会补充。
    ?
    ?

    jQuery 幻灯片的实现原理

    boloog 发表了文章 • 0 个评论 • 1526 次浏览 • 2017-05-03 09:47 • 来自相关话题

    淡入淡出的轮播
    ?
    slide-ul 是幻灯片的盒子 包括了所有的img position: relative;img position: absolute; 全部隐藏,默认显示第一张图片pageIndex 分页索引对应 img 的索引在点击分页索引时 给对应的 img 显示,其它的 img 隐藏设置一个定时器函数每三秒执行一次,每次都传入 pageIndex 实现定时切换 默认是 0 判断 (pageIndex++ >= img.length) 0 : pageIndex++鼠标移入图片清除定时器 鼠标移出时重启定时器

    实例代码<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jQuery-slide-fadeIn</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    body {
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    }
    .clearfix:after{
    content: "";
    display: block;
    clear: both;
    }
    input,button,select,textarea{
    outline:none;border: none;
    }
    a{
    text-decoration: none;
    color: #fff;
    }
    ul,li{
    list-style: none;
    }
    img{
    border: none;
    }
    .wrap{
    width: 790px;
    margin: 20px auto;
    }
    .slide-box{
    height: 340px;
    overflow: hidden;
    position: relative;
    }
    .slide-left{
    width: 100%;
    position: relative;
    }
    .slide-left li{
    position: absolute;
    display: none;
    }
    .slide-left li a{
    display: block;
    }
    .slide-left li a img{
    width: 100%;
    }

    .slider-indicator{
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    font-size: 0;
    padding: 4px 8px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.3);
    }
    .slider-indicator i{
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    cursor: pointer;
    }
    .slider-indicator i.page-active{
    background-color: #2196F3;
    }
    .slide-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: block;
    width: 40px;
    height: 50px;
    line-height: 45px;
    background-color: rgba(0,0,0,.2);
    font-size: 20px;
    text-align: center;
    display: none;
    }
    .slider-prev{
    left: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    }
    .slider-next{
    right: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    <div class="slide-box clearfix">
    <ul class="slide-left"></ul>
    <div class="slider-indicator"></div>
    <a href="javascript:void(0)" class="slide-btn slider-prev"><</a>
    <a href="javascript:void(0)" class="slide-btn slider-next">></a>
    </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery ... gt%3B
    <script>
    $(function(){
    var data = [{
    url: '#1',
    img: '//img11.360buyimg.com/da/jfs/t4657/90/3561484677/83893/f05ac312/59004d0dNc66933b4.png'
    },
    {
    url: '#2',
    img: '//img1.360buyimg.com/da/jfs/t5122/78/482212244/90225/c4ccd3b7/59001933Nb4a11a00.jpg'
    },
    {
    url: '#3',
    img: '//img12.360buyimg.com/da/jfs/t3172/29/7532815266/78514/96c6e177/58ba3348N479cafe1.jpg'
    },
    {
    url: '#4',
    img: '//img20.360buyimg.com/da/jfs/t4249/102/1331521120/224199/40dcb547/58c0b221N5acfd3c6.jpg'
    },
    {
    url: '#5',
    img: '//img13.360buyimg.com/da/jfs/t5518/250/560655744/102051/9f4965b2/5901d835N6c3481c7.jpg'
    }];

    var slide = $('.slide-box');
    var prev = $('.slider-prev');
    var next = $('.slider-next');
    var slideLeftData = $('.slide-left');
    var slideIndicator = $('.slider-indicator');
    var index = 0,slideAuto=null,isAnimate=false;

    var slideData = ''; // 数据
    var pageIndicator = ''; // page的小点
    $.each(data, function(index, val) {
    slideData += "<li data-id="+index+"><a href="&rvpu; wbm.vsm &rvpu;&hu;![]( wbm.jnh )μ/b&hu;μ/mj&hu;&rvpu;; pageIndicator += "<i></i>";
    });
    slideLeftData.append(slideData); // 给左边盒子添加图片信息

    slideIndicator.append(pageIndicator).find('i').eq(0).addClass('page-active'); // 给第一个小点添加样式
    $('.slide-left li').eq(0).show();

    prev.on('click', prevPage); // 点击上一页
    next.on('click', nextPage); // 点击下一页
    // 自动运行函数
    var autoRun = function(){
    slideAuto = setInterval(function(){
    nextPage(index);
    }, 3000)
    }
    autoRun();
    // 上一页
    function prevPage(){
    if(isAnimate){ return;}
    isAnimate = true;
    index--;
    if(index < 0){
    index = data.length -1;
    }
    slideLeftData.find('li').eq(index).fadeIn().siblings().fadeOut();
    slidePage(index);
    isAnimate = false;
    }

    // 下一页
    function nextPage(){
    if(isAnimate){ return;}
    isAnimate = true;
    index++;
    if(index >= data.length){
    index = 0;
    }
    slideLeftData.find('li').eq(index).fadeIn().siblings().fadeOut();
    slidePage(index);
    isAnimate = false;
    }
    // page
    slideIndicator.on('mouseenter', 'i', function(){
    var pageIndex = $(this).index();
    index = pageIndex;
    $(this).addClass('page-active').siblings().removeClass('page-active');
    slideLeftData.find('li').eq(pageIndex).fadeIn().siblings().fadeOut();
    });
    // 获取当前page 并添加样式
    function slidePage(){
    slideIndicator.find('i').eq(index).addClass('page-active').siblings().removeClass('page-active')
    }
    // 鼠标移入时
    slide.on('mouseenter', function(){
    $('.slide-btn').show(); // 显示左右的按钮
    clearInterval(slideAuto); // 清除定时器
    });
    // 鼠标移出时
    slide.on('mouseleave', function(){
    $('.slide-btn').hide(); // 隐藏左右的按钮
    autoRun(); // 继续运行定时器
    });
    });
    </script>
    </body>
    </html>
    ?轮播1在线查看

    左右无缝切换的轮播
    ?
    slide-box 是包括幻灯片的盒子,设置overflow: hidden;slide-ul 是幻灯片的盒子(宽度为img的宽度*img的length) 包括了所有的img(浮动在一行)分别给 幻灯片的盒子 最前面克隆 img 的最后一个,最后面克隆 img 的第一个 4,0,1,2,3,4,0此时克隆了两个,重新给图片盒子宽度添加总长度, 给第0个写一个 left -img (一个宽度)就显示真正的第一个图片每点击下一页时 (pageIndex++ > imgLength -1) 0 : pageIndex++; 根据对应的pageIndex操作 left每点击上一页时 (pageIndex-- < 0) imgLength-1 : pageIndex--; 在对应的pageIndex操作 left点击到最后一个和最前面一个图片时,在动画效果结果后操作css让元素left值变成对应克隆的对象left,造成一个无限切换的错觉

    实例代码<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jQuery-slide-无缝滚动</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    body {
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    }
    .clearfix:after{
    content: "";
    display: block;
    clear: both;
    }
    input,button,select,textarea{
    outline:none;border: none;
    }
    a{
    text-decoration: none;
    color: #fff;
    }
    ul,li{
    list-style: none;
    }
    img{
    border: none;
    }
    .wrap{
    width: 790px;
    margin: 20px auto;
    }
    .slide-box{
    height: 340px;
    overflow: hidden;
    position: relative;
    }
    .slide-ul{
    width: 100%;
    position: relative;
    }
    .slide-ul li{
    width: 790px;
    float: left;
    }
    .slide-ul li a{
    display: block;
    }
    .slide-ul li a img{
    width: 100%;
    }

    .slider-indicator{
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    font-size: 0;
    padding: 4px 8px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.3);
    }
    .slider-indicator i{
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    cursor: pointer;
    }
    .slider-indicator i.page-active{
    background-color: #2196F3;
    }
    .slide-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: block;
    width: 40px;
    height: 50px;
    line-height: 45px;
    background-color: rgba(0,0,0,.2);
    font-size: 20px;
    text-align: center;
    display: none;
    }
    .slider-prev{
    left: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    }
    .slider-next{
    right: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    <div class="slide-box clearfix">
    <ul class="slide-ul"></ul>
    <div class="slider-indicator"></div>
    <a href="javascript:void(0)" class="slide-btn slider-prev"><</a>
    <a href="javascript:void(0)" class="slide-btn slider-next">></a>
    </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery ... gt%3B
    <script>
    $(function(){
    var data = [{
    url: '#1',
    img: '//img11.360buyimg.com/da/jfs/t4657/90/3561484677/83893/f05ac312/59004d0dNc66933b4.png'
    },
    {
    url: '#2',
    img: '//img1.360buyimg.com/da/jfs/t5122/78/482212244/90225/c4ccd3b7/59001933Nb4a11a00.jpg'
    },
    {
    url: '#3',
    img: '//img12.360buyimg.com/da/jfs/t3172/29/7532815266/78514/96c6e177/58ba3348N479cafe1.jpg'
    },
    {
    url: '#4',
    img: '//img20.360buyimg.com/da/jfs/t4249/102/1331521120/224199/40dcb547/58c0b221N5acfd3c6.jpg'
    },
    {
    url: '#5',
    img: '//img13.360buyimg.com/da/jfs/t5518/250/560655744/102051/9f4965b2/5901d835N6c3481c7.jpg'
    }];

    var slide = $('.slide-box'), // 幻灯片盒子
    prev = $('.slider-prev'), // 上一页按钮
    next = $('.slider-next'), // 下一页按钮
    slideUl = $('.slide-ul'), // 图片盒子
    slideIndicator = $('.slider-indicator'), // 中部page盒子
    pageIndex = 0, // page索引
    slideAuto=null, // 自动滚动方法
    isAnimate=false, // 事件锁
    slideData = '', // img数据变量
    pageIndicator = ''; // page的小点变量

    // 循环添加img数据和page小点的个数
    $.each(data, function(index, val) {
    slideData += "<li data-id="+index+"><a href="&rvpu; wbm.vsm &rvpu;&hu;![]( wbm.jnh )μ/b&hu;μ/mj&hu;&rvpu;; pageIndicator += "<i></i>";
    });
    // 给盒子添加图片信息
    slideUl.append(slideData);
    // 给page盒子添加小点并给第一个添加 page-active 样式
    slideIndicator.append(pageIndicator).find('i').eq(0).addClass('page-active');
    // 默认给第一个li添加显示
    $('.slide-ul li').eq(0).show();
    // 获取图片盒子里面的 li 个数
    var imgLength = slideUl.children().length;
    // 分别给 图片盒子 最前面克隆 li 最后一个,最后面克隆 li 第一个 [4,0,1,2,3,4,0]
    var lastLi = slideUl.find('li').last();
    var firstLi = slideUl.find('li').first();
    slideUl.prepend(lastLi.clone())
    slideUl.append(firstLi.clone());

    // 获取克隆后图片盒子里面的 li 个数
    var countLength = slideUl.children().length;
    // 单独一个li的盒子宽度
    var slideLiWidth = slideUl.find('li').width();
    // 重新计算出 图片盒子 的宽度 让 li 浮动在一行
    var boxWidth = countLength * slideLiWidth;
    // 给图片盒子宽度添加总长度 然后第一个看到的是克隆的那个,所以给个 - 一个li宽度 就显示真正的第一个
    slideUl.css({'left': -slide.width(), width: boxWidth});

    // 点击上一页
    prev.on('click', function(){
    prevPage(1)
    });
    // 点击下一页
    next.on('click', function(){
    nextPage(1);
    });

    // 自动运行函数
    var autoRun = function(){
    slideAuto = setInterval(function(){
    nextPage(1);
    }, 3000)
    }
    autoRun();
    // 上一页
    function prevPage(len){
    if(isAnimate){ return;}
    isAnimate = true;
    pageIndex -=len;
    // '-='+slideLiWidth 0 -790px -1580px -2370px -3160px -3950px
    slideUl.animate({left: '+='+len*slideLiWidth },function(){
    if( pageIndex < 0){
    pageIndex = imgLength-1; // 获取最后一个
    slideUl.css({left: -slideLiWidth*imgLength}); // 默认回到 -3950px 也就是第后一个
    }
    isAnimate = false;
    slidePage(pageIndex); // 获取当前的 小点 状态
    });

    }
    // 下一页
    function nextPage(len){
    if(isAnimate){ return;}
    isAnimate = true;
    pageIndex += len;
    console.log( pageIndex )
    // '-='+slideLiWidth -790px -1580px -2370px -3160px -3950px
    slideUl.animate({left: '-='+len*slideLiWidth },function(){
    // 判断当前索引是否等于img图片的长度(没克隆前的长度)
    if(pageIndex > imgLength -1 ){
    pageIndex = 0; // 给索引值设置为0 也就是当前一个
    slideUl.css({left: -slideLiWidth}); // 默认回到 -790px 也就是第0个
    }
    isAnimate = false;
    slidePage(pageIndex); // 获取当前的 小点 状态
    });
    }
    // 点击切换
    slideIndicator.on('click', 'i', function(){
    var index = $(this).index();
    $(this).addClass('page-active').siblings().removeClass('page-active');
    if(pageIndex > index){ // 当前page 大于 当前索引
    prevPage(pageIndex - index); // 向后移动
    }else{
    nextPage(index - pageIndex); // 向前移动
    }
    });
    // 获取当前page 并添加样式
    function slidePage(){
    slideIndicator.find('i').removeClass('page-active').eq(pageIndex).addClass('page-active')
    }
    // 鼠标移入时
    slide.on('mouseenter', function(){
    $('.slide-btn').show(); // 显示左右的按钮
    clearInterval(slideAuto); // 清除定时器
    });
    // 鼠标移出时
    slide.on('mouseleave', function(){
    $('.slide-btn').hide(); // 隐藏左右的按钮
    autoRun(); // 继续运行定时器
    });
    });
    </script>
    </body>
    </html>
    轮播2在线查看

    制作简书首页的幻灯片
    ?
    功能结合了淡入淡出和无缝滚动
    轮播3在线查看 查看全部
    淡入淡出的轮播
    ?
  • slide-ul 是幻灯片的盒子 包括了所有的img position: relative;
  • img position: absolute; 全部隐藏,默认显示第一张图片
  • pageIndex 分页索引对应 img 的索引
  • 在点击分页索引时 给对应的 img 显示,其它的 img 隐藏
  • 设置一个定时器函数每三秒执行一次,每次都传入 pageIndex 实现定时切换 默认是 0 判断 (pageIndex++ >= img.length) 0 : pageIndex++
  • 鼠标移入图片清除定时器 鼠标移出时重启定时器


  • 实例代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jQuery-slide-fadeIn</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    body {
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    }
    .clearfix:after{
    content: "";
    display: block;
    clear: both;
    }
    input,button,select,textarea{
    outline:none;border: none;
    }
    a{
    text-decoration: none;
    color: #fff;
    }
    ul,li{
    list-style: none;
    }
    img{
    border: none;
    }
    .wrap{
    width: 790px;
    margin: 20px auto;
    }
    .slide-box{
    height: 340px;
    overflow: hidden;
    position: relative;
    }
    .slide-left{
    width: 100%;
    position: relative;
    }
    .slide-left li{
    position: absolute;
    display: none;
    }
    .slide-left li a{
    display: block;
    }
    .slide-left li a img{
    width: 100%;
    }

    .slider-indicator{
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    font-size: 0;
    padding: 4px 8px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.3);
    }
    .slider-indicator i{
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    cursor: pointer;
    }
    .slider-indicator i.page-active{
    background-color: #2196F3;
    }
    .slide-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: block;
    width: 40px;
    height: 50px;
    line-height: 45px;
    background-color: rgba(0,0,0,.2);
    font-size: 20px;
    text-align: center;
    display: none;
    }
    .slider-prev{
    left: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    }
    .slider-next{
    right: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    <div class="slide-box clearfix">
    <ul class="slide-left"></ul>
    <div class="slider-indicator"></div>
    <a href="javascript:void(0)" class="slide-btn slider-prev"><</a>
    <a href="javascript:void(0)" class="slide-btn slider-next">></a>
    </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery ... gt%3B
    <script>
    $(function(){
    var data = [{
    url: '#1',
    img: '//img11.360buyimg.com/da/jfs/t4657/90/3561484677/83893/f05ac312/59004d0dNc66933b4.png'
    },
    {
    url: '#2',
    img: '//img1.360buyimg.com/da/jfs/t5122/78/482212244/90225/c4ccd3b7/59001933Nb4a11a00.jpg'
    },
    {
    url: '#3',
    img: '//img12.360buyimg.com/da/jfs/t3172/29/7532815266/78514/96c6e177/58ba3348N479cafe1.jpg'
    },
    {
    url: '#4',
    img: '//img20.360buyimg.com/da/jfs/t4249/102/1331521120/224199/40dcb547/58c0b221N5acfd3c6.jpg'
    },
    {
    url: '#5',
    img: '//img13.360buyimg.com/da/jfs/t5518/250/560655744/102051/9f4965b2/5901d835N6c3481c7.jpg'
    }];

    var slide = $('.slide-box');
    var prev = $('.slider-prev');
    var next = $('.slider-next');
    var slideLeftData = $('.slide-left');
    var slideIndicator = $('.slider-indicator');
    var index = 0,slideAuto=null,isAnimate=false;

    var slideData = ''; // 数据
    var pageIndicator = ''; // page的小点
    $.each(data, function(index, val) {
    slideData += "<li data-id="+index+"><a href="&rvpu; wbm.vsm &rvpu;&hu;![](+val.img+)</a></li>";
    pageIndicator += "<i></i>";
    });
    slideLeftData.append(slideData); // 给左边盒子添加图片信息

    slideIndicator.append(pageIndicator).find('i').eq(0).addClass('page-active'); // 给第一个小点添加样式
    $('.slide-left li').eq(0).show();

    prev.on('click', prevPage); // 点击上一页
    next.on('click', nextPage); // 点击下一页
    // 自动运行函数
    var autoRun = function(){
    slideAuto = setInterval(function(){
    nextPage(index);
    }, 3000)
    }
    autoRun();
    // 上一页
    function prevPage(){
    if(isAnimate){ return;}
    isAnimate = true;
    index--;
    if(index < 0){
    index = data.length -1;
    }
    slideLeftData.find('li').eq(index).fadeIn().siblings().fadeOut();
    slidePage(index);
    isAnimate = false;
    }

    // 下一页
    function nextPage(){
    if(isAnimate){ return;}
    isAnimate = true;
    index++;
    if(index >= data.length){
    index = 0;
    }
    slideLeftData.find('li').eq(index).fadeIn().siblings().fadeOut();
    slidePage(index);
    isAnimate = false;
    }
    // page
    slideIndicator.on('mouseenter', 'i', function(){
    var pageIndex = $(this).index();
    index = pageIndex;
    $(this).addClass('page-active').siblings().removeClass('page-active');
    slideLeftData.find('li').eq(pageIndex).fadeIn().siblings().fadeOut();
    });
    // 获取当前page 并添加样式
    function slidePage(){
    slideIndicator.find('i').eq(index).addClass('page-active').siblings().removeClass('page-active')
    }
    // 鼠标移入时
    slide.on('mouseenter', function(){
    $('.slide-btn').show(); // 显示左右的按钮
    clearInterval(slideAuto); // 清除定时器
    });
    // 鼠标移出时
    slide.on('mouseleave', function(){
    $('.slide-btn').hide(); // 隐藏左右的按钮
    autoRun(); // 继续运行定时器
    });
    });
    </script>
    </body>
    </html>

    ?轮播1在线查看

    左右无缝切换的轮播
    ?
  • slide-box 是包括幻灯片的盒子,设置overflow: hidden;
  • slide-ul 是幻灯片的盒子(宽度为img的宽度*img的length) 包括了所有的img(浮动在一行)
  • 分别给 幻灯片的盒子 最前面克隆 img 的最后一个,最后面克隆 img 的第一个 4,0,1,2,3,4,0
  • 此时克隆了两个,重新给图片盒子宽度添加总长度, 给第0个写一个 left -img (一个宽度)就显示真正的第一个图片
  • 每点击下一页时 (pageIndex++ > imgLength -1) 0 : pageIndex++; 根据对应的pageIndex操作 left
  • 每点击上一页时 (pageIndex-- < 0) imgLength-1 : pageIndex--; 在对应的pageIndex操作 left
  • 点击到最后一个和最前面一个图片时,在动画效果结果后操作css让元素left值变成对应克隆的对象left,造成一个无限切换的错觉


  • 实例代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jQuery-slide-无缝滚动</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    body {
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    }
    .clearfix:after{
    content: "";
    display: block;
    clear: both;
    }
    input,button,select,textarea{
    outline:none;border: none;
    }
    a{
    text-decoration: none;
    color: #fff;
    }
    ul,li{
    list-style: none;
    }
    img{
    border: none;
    }
    .wrap{
    width: 790px;
    margin: 20px auto;
    }
    .slide-box{
    height: 340px;
    overflow: hidden;
    position: relative;
    }
    .slide-ul{
    width: 100%;
    position: relative;
    }
    .slide-ul li{
    width: 790px;
    float: left;
    }
    .slide-ul li a{
    display: block;
    }
    .slide-ul li a img{
    width: 100%;
    }

    .slider-indicator{
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    font-size: 0;
    padding: 4px 8px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.3);
    }
    .slider-indicator i{
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    cursor: pointer;
    }
    .slider-indicator i.page-active{
    background-color: #2196F3;
    }
    .slide-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: block;
    width: 40px;
    height: 50px;
    line-height: 45px;
    background-color: rgba(0,0,0,.2);
    font-size: 20px;
    text-align: center;
    display: none;
    }
    .slider-prev{
    left: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    }
    .slider-next{
    right: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    <div class="slide-box clearfix">
    <ul class="slide-ul"></ul>
    <div class="slider-indicator"></div>
    <a href="javascript:void(0)" class="slide-btn slider-prev"><</a>
    <a href="javascript:void(0)" class="slide-btn slider-next">></a>
    </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery ... gt%3B
    <script>
    $(function(){
    var data = [{
    url: '#1',
    img: '//img11.360buyimg.com/da/jfs/t4657/90/3561484677/83893/f05ac312/59004d0dNc66933b4.png'
    },
    {
    url: '#2',
    img: '//img1.360buyimg.com/da/jfs/t5122/78/482212244/90225/c4ccd3b7/59001933Nb4a11a00.jpg'
    },
    {
    url: '#3',
    img: '//img12.360buyimg.com/da/jfs/t3172/29/7532815266/78514/96c6e177/58ba3348N479cafe1.jpg'
    },
    {
    url: '#4',
    img: '//img20.360buyimg.com/da/jfs/t4249/102/1331521120/224199/40dcb547/58c0b221N5acfd3c6.jpg'
    },
    {
    url: '#5',
    img: '//img13.360buyimg.com/da/jfs/t5518/250/560655744/102051/9f4965b2/5901d835N6c3481c7.jpg'
    }];

    var slide = $('.slide-box'), // 幻灯片盒子
    prev = $('.slider-prev'), // 上一页按钮
    next = $('.slider-next'), // 下一页按钮
    slideUl = $('.slide-ul'), // 图片盒子
    slideIndicator = $('.slider-indicator'), // 中部page盒子
    pageIndex = 0, // page索引
    slideAuto=null, // 自动滚动方法
    isAnimate=false, // 事件锁
    slideData = '', // img数据变量
    pageIndicator = ''; // page的小点变量

    // 循环添加img数据和page小点的个数
    $.each(data, function(index, val) {
    slideData += "<li data-id="+index+"><a href="&rvpu; wbm.vsm &rvpu;&hu;![](+val.img+)</a></li>";
    pageIndicator += "<i></i>";
    });
    // 给盒子添加图片信息
    slideUl.append(slideData);
    // 给page盒子添加小点并给第一个添加 page-active 样式
    slideIndicator.append(pageIndicator).find('i').eq(0).addClass('page-active');
    // 默认给第一个li添加显示
    $('.slide-ul li').eq(0).show();
    // 获取图片盒子里面的 li 个数
    var imgLength = slideUl.children().length;
    // 分别给 图片盒子 最前面克隆 li 最后一个,最后面克隆 li 第一个 [4,0,1,2,3,4,0]
    var lastLi = slideUl.find('li').last();
    var firstLi = slideUl.find('li').first();
    slideUl.prepend(lastLi.clone())
    slideUl.append(firstLi.clone());

    // 获取克隆后图片盒子里面的 li 个数
    var countLength = slideUl.children().length;
    // 单独一个li的盒子宽度
    var slideLiWidth = slideUl.find('li').width();
    // 重新计算出 图片盒子 的宽度 让 li 浮动在一行
    var boxWidth = countLength * slideLiWidth;
    // 给图片盒子宽度添加总长度 然后第一个看到的是克隆的那个,所以给个 - 一个li宽度 就显示真正的第一个
    slideUl.css({'left': -slide.width(), width: boxWidth});

    // 点击上一页
    prev.on('click', function(){
    prevPage(1)
    });
    // 点击下一页
    next.on('click', function(){
    nextPage(1);
    });

    // 自动运行函数
    var autoRun = function(){
    slideAuto = setInterval(function(){
    nextPage(1);
    }, 3000)
    }
    autoRun();
    // 上一页
    function prevPage(len){
    if(isAnimate){ return;}
    isAnimate = true;
    pageIndex -=len;
    // '-='+slideLiWidth 0 -790px -1580px -2370px -3160px -3950px
    slideUl.animate({left: '+='+len*slideLiWidth },function(){
    if( pageIndex < 0){
    pageIndex = imgLength-1; // 获取最后一个
    slideUl.css({left: -slideLiWidth*imgLength}); // 默认回到 -3950px 也就是第后一个
    }
    isAnimate = false;
    slidePage(pageIndex); // 获取当前的 小点 状态
    });

    }
    // 下一页
    function nextPage(len){
    if(isAnimate){ return;}
    isAnimate = true;
    pageIndex += len;
    console.log( pageIndex )
    // '-='+slideLiWidth -790px -1580px -2370px -3160px -3950px
    slideUl.animate({left: '-='+len*slideLiWidth },function(){
    // 判断当前索引是否等于img图片的长度(没克隆前的长度)
    if(pageIndex > imgLength -1 ){
    pageIndex = 0; // 给索引值设置为0 也就是当前一个
    slideUl.css({left: -slideLiWidth}); // 默认回到 -790px 也就是第0个
    }
    isAnimate = false;
    slidePage(pageIndex); // 获取当前的 小点 状态
    });
    }
    // 点击切换
    slideIndicator.on('click', 'i', function(){
    var index = $(this).index();
    $(this).addClass('page-active').siblings().removeClass('page-active');
    if(pageIndex > index){ // 当前page 大于 当前索引
    prevPage(pageIndex - index); // 向后移动
    }else{
    nextPage(index - pageIndex); // 向前移动
    }
    });
    // 获取当前page 并添加样式
    function slidePage(){
    slideIndicator.find('i').removeClass('page-active').eq(pageIndex).addClass('page-active')
    }
    // 鼠标移入时
    slide.on('mouseenter', function(){
    $('.slide-btn').show(); // 显示左右的按钮
    clearInterval(slideAuto); // 清除定时器
    });
    // 鼠标移出时
    slide.on('mouseleave', function(){
    $('.slide-btn').hide(); // 隐藏左右的按钮
    autoRun(); // 继续运行定时器
    });
    });
    </script>
    </body>
    </html>

    轮播2在线查看

    制作简书首页的幻灯片
    ?
  • 功能结合了淡入淡出和无缝滚动

  • 轮播3在线查看

    JavaScript正则表达式基本语法

    boloog 发表了文章 • 0 个评论 • 1352 次浏览 • 2017-04-28 20:08 • 来自相关话题

    1.?\d,\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^,$,分别是什么?
    \d 匹配 [0-9] 数字字符
    \w 匹配 [a-zA-Z_0-9] 单词字符,字母、数字下划线
    \s 匹配 [\t\n\x0B\f\r] 空白符
    [a-zA-Z0-9] 匹配范围类 小写字母a-z 大写字母 A-Z 和数字 0-9
    \b 匹配单词边界
    var str ='hello world';
    /llo\b/.test(str); // true 匹配边界是llo
    /wor\b/.test(str); // false 匹配边界是wor
    . 匹配 [^\r\n] 除了回车符和换行符之外的所有字符
    * 匹配 出现零次或多次(任意次)
    + 匹配 出现一次或多次(至少出现一次)
    ? 匹配 出现零次或一次(最多出现一次)
    x{3} 匹配 x出现3次
    ^ 匹配 以xxx开头
    $ 匹配 以xxx结束
    2.?去除字符串两边的空白字符
    ?
    var str = ' hello bsfans ';
    function trim(str){
    return str.replace(/^\s+|\s+$/g,'');
    }
    trim(str);
    ?3.?判断用户输入的是不是邮箱
    ?
    var str = 'bsfans@admin.com';
    function isEmail(str){
    return /^\w+@\w+\.(com|cn|com\.cn)$/.test( str );
    }
    isEmail(str);
    ?4.?判断用户输入的是不是手机号
    ?
    function isPhoneNum(str){
    return /^1[3|5|6|7|8]\d{9}$/.test( str )
    }
    isPhoneNum('13600007663');
    ?5.?判断用户输入的是不是合法的用户名(长度6-20个字符,只能包括字母、数字、下划线)
    ?
    function isValidUsername(str){
    return /^\w{6,20}$/.test( str )
    }
    isValidUsername('a_3EDdfd');
    ?6.?判断用户输入的是不是合法密码(长度6-20个字符,只包括大写字母、小写字母、数字、下划线,且至少至少包括两种)
    ?
    function isValidPassword(str){
    if(str.length < 6 || str.length > 20){
    return false;
    }
    var num = 0;
    if(/[A-Z]/.test(str)){
    num++;
    }
    if(/[a-z]/.test(str)){
    num++;
    }
    if(/[0-9]/.test(str)){
    num++;
    }
    if(/_/.test(str)){
    num++;
    }
    return num >= 2;
    }
    isValidPassword('qweqeqew'); // false
    isValidPassword('qweqe111'); // true
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ? 查看全部
    1.?\d,\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^,$,分别是什么?
    \d 匹配 [0-9] 数字字符
    \w 匹配 [a-zA-Z_0-9] 单词字符,字母、数字下划线
    \s 匹配 [\t\n\x0B\f\r] 空白符
    [a-zA-Z0-9] 匹配范围类 小写字母a-z 大写字母 A-Z 和数字 0-9
    \b 匹配单词边界
    var str ='hello world';
    /llo\b/.test(str); // true 匹配边界是llo
    /wor\b/.test(str); // false 匹配边界是wor
    . 匹配 [^\r\n] 除了回车符和换行符之外的所有字符
    * 匹配 出现零次或多次(任意次)
    + 匹配 出现一次或多次(至少出现一次)
    ? 匹配 出现零次或一次(最多出现一次)
    x{3} 匹配 x出现3次
    ^ 匹配 以xxx开头
    $ 匹配 以xxx结束

    2.?去除字符串两边的空白字符
    ?
    var str = '  hello bsfans ';
    function trim(str){
    return str.replace(/^\s+|\s+$/g,'');
    }
    trim(str);

    ?3.?判断用户输入的是不是邮箱
    ?
    var str = 'bsfans@admin.com';
    function isEmail(str){
    return /^\w+@\w+\.(com|cn|com\.cn)$/.test( str );
    }
    isEmail(str);

    ?4.?判断用户输入的是不是手机号
    ?
    function isPhoneNum(str){
    return /^1[3|5|6|7|8]\d{9}$/.test( str )
    }
    isPhoneNum('13600007663');

    ?5.?判断用户输入的是不是合法的用户名(长度6-20个字符,只能包括字母、数字、下划线)
    ?
    function isValidUsername(str){
    return /^\w{6,20}$/.test( str )
    }
    isValidUsername('a_3EDdfd');

    ?6.?判断用户输入的是不是合法密码(长度6-20个字符,只包括大写字母、小写字母、数字、下划线,且至少至少包括两种)
    ?
    function isValidPassword(str){
    if(str.length < 6 || str.length > 20){
    return false;
    }
    var num = 0;
    if(/[A-Z]/.test(str)){
    num++;
    }
    if(/[a-z]/.test(str)){
    num++;
    }
    if(/[0-9]/.test(str)){
    num++;
    }
    if(/_/.test(str)){
    num++;
    }
    return num >= 2;
    }
    isValidPassword('qweqeqew'); // false
    isValidPassword('qweqe111'); // true

    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?

    JavaScript的Math对象

    boloog 发表了文章 • 0 个评论 • 1319 次浏览 • 2017-04-27 20:30 • 来自相关话题

    1.?写一个函数,返回从min到max之间的随机整数,包括min不包括max
    ?function randomNumber(min,max){
    return Math.floor(Math.random() * (max-min) + min);
    }
    randomNumber(10,15);
    ?2.?写一个函数,返回从min都max之间的 随机整数,包括min包括max
    ?function randomNumber(min,max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    randomNumber(2,8);
    3.?写一个函数,生成一个长度为 n 的随机字符串,字符串字符的取值范围包括0到9,a到 z,A到Z。
    ?function getRandStr(num){
    var str = '0123456789qwertyuiopasdfghjklzxcvbnmPOIUYTREWQASDFGHJKLMNBVCXZ';
    var newStr = '';
    for(var i = 0; i < parseInt(num); i++){
    newStr += str[ Math.floor(Math.random() * str.length) ];
    }
    return newStr;
    }
    getRandStr(10);
    4.?写一个函数,生成一个随机 IP 地址,一个合法的 IP 地址为 0.0.0.0~255.255.255.255
    ?function getRandIP(){
    var newIp = "";
    for(var i =0; i < 4; i++){
    newIp += Math.floor(Math.random() * 255) + 1 +',';
    }
    return newIp.substring(0, newIp.length-1);
    }
    getRandIP();
    5.?写一个函数,生成一个随机颜色字符串,合法的颜色为#000000~ #ffffff
    ?function getRandColor(){
    var str = '1234567890abcdef';
    var colorStr = '#';
    for(var i =0; i < 6; i++){
    colorStr += str[ Math.floor(Math.random() * str.length) ];
    }
    return colorStr;
    }
    var color = getRandColor();
    document.body.style.backgroundColor = color;


    ? 查看全部
    1.?写一个函数,返回从min到max之间的随机整数,包括min不包括max
    ?
    function randomNumber(min,max){
    return Math.floor(Math.random() * (max-min) + min);
    }
    randomNumber(10,15);

    ?2.?写一个函数,返回从min都max之间的 随机整数,包括min包括max
    ?
    function randomNumber(min,max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    randomNumber(2,8);

    3.?写一个函数,生成一个长度为 n 的随机字符串,字符串字符的取值范围包括0到9,a到 z,A到Z。
    ?
    function getRandStr(num){
    var str = '0123456789qwertyuiopasdfghjklzxcvbnmPOIUYTREWQASDFGHJKLMNBVCXZ';
    var newStr = '';
    for(var i = 0; i < parseInt(num); i++){
    newStr += str[ Math.floor(Math.random() * str.length) ];
    }
    return newStr;
    }
    getRandStr(10);

    4.?写一个函数,生成一个随机 IP 地址,一个合法的 IP 地址为 0.0.0.0~255.255.255.255
    ?
    function getRandIP(){
    var newIp = "";
    for(var i =0; i < 4; i++){
    newIp += Math.floor(Math.random() * 255) + 1 +',';
    }
    return newIp.substring(0, newIp.length-1);
    }
    getRandIP();

    5.?写一个函数,生成一个随机颜色字符串,合法的颜色为#000000~ #ffffff
    ?
    function getRandColor(){
    var str = '1234567890abcdef';
    var colorStr = '#';
    for(var i =0; i < 6; i++){
    colorStr += str[ Math.floor(Math.random() * str.length) ];
    }
    return colorStr;
    }
    var color = getRandColor();
    document.body.style.backgroundColor = color;


    ?