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 个评论 • 1452 次浏览 • 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 个评论 • 1843 次浏览 • 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 个评论 • 1904 次浏览 • 2018-04-09 01:23 • 来自相关话题

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

有天狗想吃鱼了

猫.吃鱼.call(狗,鱼)

狗就吃到鱼了

猫成精了,想打怪兽

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

有天狗想吃鱼了

猫.吃鱼.call(狗,鱼)

狗就吃到鱼了

猫成精了,想打怪兽

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

?

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

lopo1983 发表了文章 • 0 个评论 • 1988 次浏览 • 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 个评论 • 2882 次浏览 • 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 个评论 • 4944 次浏览 • 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 个评论 • 2056 次浏览 • 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 个评论 • 2247 次浏览 • 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="+val.url+">![](+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="+val.url+">![](+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在线查看 查看全部
淡入淡出的轮播
?
  • 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="+val.url+">![](+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="+val.url+">![](+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 个评论 • 2064 次浏览 • 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 个评论 • 1974 次浏览 • 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;


?