jQuery 幻灯片的实现原理
javascript/jQuery • boloog 发表了文章 • 0 个评论 • 2003 次浏览 • 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+"></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+"></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+"></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+"></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在线查看 查看全部
淡入淡出的轮播
?
实例代码
?轮播1在线查看
左右无缝切换的轮播
?
实例代码
轮播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+"></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+"></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正则表达式基本语法
javascript/jQuery • boloog 发表了文章 • 0 个评论 • 1824 次浏览 • 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
?
?
?
?
?
?
?
?
?
?
?
?
?
?
? 查看全部
\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}，^，$，分别是什么?
2.?去除字符串两边的空白字符
?
?3.?判断用户输入的是不是邮箱
?
?4.?判断用户输入的是不是手机号
?
?5.?判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）
?
?6.?判断用户输入的是不是合法密码（长度6-20个字符，只包括大写字母、小写字母、数字、下划线，且至少至少包括两种）
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
\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?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
vue 注册共用filter
VUE • lopo1983 发表了文章 • 0 个评论 • 1362 次浏览 • 2017-04-28 16:43
import filters from './utils/filters'Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))
import filters from './utils/filters'
Object.keys(filters).forEach(k => Vue.filter(k, filters[k])) JavaScript的Math对象
javascript/jQuery • boloog 发表了文章 • 0 个评论 • 1759 次浏览 • 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;
? 查看全部
?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
?
?2.?写一个函数，返回从min都max之间的 随机整数，包括min包括max
?
3.?写一个函数，生成一个长度为 n 的随机字符串，字符串字符的取值范围包括0到9，a到 z，A到Z。
?
4.?写一个函数，生成一个随机 IP 地址，一个合法的 IP 地址为 0.0.0.0~255.255.255.255
?
5.?写一个函数，生成一个随机颜色字符串，合法的颜色为#000000~ #ffffff
?
?
?
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;
?
JavaScript字符串简单操作
javascript/jQuery • boloog 发表了文章 • 0 个评论 • 1672 次浏览 • 2017-04-26 20:09
1.?判断一个字符串是不是回文字符串，如 abcdcba是回文字符串, abcdcbb不是。
function isPalindrome(str){
return str === str.split("").reverse().join("");
}
isPalindrome('abcdcba');
?2.?统计字符串里出现出现频率最多的字符
function getCount(str){
var obj = {};
for (var i = 0; i < str.length; i++) {
var index = str[i];
if(obj[index]){
obj[index]++;
}else{
obj[index] = 1;
}
}
console.log(obj); // 当前对象
var maxNumber = 0,maxString="";
for(var key in obj){
if(obj[key] > maxNumber){
maxNumber = obj[key];
maxString = key;
}
}
console.log("字符"+ maxString+"出现频率最多"+ maxNumber+"次");
}
getCount('abefsfscfffdcbaa');
?3.?返回第一个字母为大写的字符
?
function ucFirst(str){
var newStr = str.charAt(0).toUpperCase()+ str.slice(1, str.length);
return newStr;
}
ucFirst("bsfans");
?4.?把my-short-string形式的字符串转化成myShortString形式的字符串
function camelize(str){
var newArr = str.split("-");
var newStr = '';
for (var i = 0; i < newArr.length; i++) {
newStr += newArr[i].charAt(0).toUpperCase()+newArr[i].slice(1,newArr[i].length);
}
console.log(newStr.slice(0,1).toLowerCase() + newStr.slice(1,newStr.length));
}
camelize("background-color");
camelize("list-style-image");
?
?
? 查看全部
function isPalindrome(str){
return str === str.split("").reverse().join("");
}
isPalindrome('abcdcba');
?2.?统计字符串里出现出现频率最多的字符
function getCount(str){
var obj = {};
for (var i = 0; i < str.length; i++) {
var index = str[i];
if(obj[index]){
obj[index]++;
}else{
obj[index] = 1;
}
}
console.log(obj); // 当前对象
var maxNumber = 0,maxString="";
for(var key in obj){
if(obj[key] > maxNumber){
maxNumber = obj[key];
maxString = key;
}
}
console.log("字符"+ maxString+"出现频率最多"+ maxNumber+"次");
}
getCount('abefsfscfffdcbaa');
?3.?返回第一个字母为大写的字符
?
function ucFirst(str){
var newStr = str.charAt(0).toUpperCase()+ str.slice(1, str.length);
return newStr;
}
ucFirst("bsfans");
?4.?把my-short-string形式的字符串转化成myShortString形式的字符串
function camelize(str){
var newArr = str.split("-");
var newStr = '';
for (var i = 0; i < newArr.length; i++) {
newStr += newArr[i].charAt(0).toUpperCase()+newArr[i].slice(1,newArr[i].length);
}
console.log(newStr.slice(0,1).toLowerCase() + newStr.slice(1,newStr.length));
}
camelize("background-color");
camelize("list-style-image");
?
?
? 查看全部
1.?判断一个字符串是不是回文字符串，如 abcdcba是回文字符串, abcdcbb不是。
?2.?统计字符串里出现出现频率最多的字符
?3.?返回第一个字母为大写的字符
?
?4.?把my-short-string形式的字符串转化成myShortString形式的字符串
?
?
?
function isPalindrome(str){
return str === str.split("").reverse().join("");
}
isPalindrome('abcdcba');?2.?统计字符串里出现出现频率最多的字符
function getCount(str){
var obj = {};
for (var i = 0; i < str.length; i++) {
var index = str[i];
if(obj[index]){
obj[index]++;
}else{
obj[index] = 1;
}
}
console.log(obj); // 当前对象
var maxNumber = 0,maxString="";
for(var key in obj){
if(obj[key] > maxNumber){
maxNumber = obj[key];
maxString = key;
}
}
console.log("字符"+ maxString+"出现频率最多"+ maxNumber+"次");
}
getCount('abefsfscfffdcbaa');?3.?返回第一个字母为大写的字符
?
function ucFirst(str){
var newStr = str.charAt(0).toUpperCase()+ str.slice(1, str.length);
return newStr;
}
ucFirst("bsfans");?4.?把my-short-string形式的字符串转化成myShortString形式的字符串
function camelize(str){
var newArr = str.split("-");
var newStr = '';
for (var i = 0; i < newArr.length; i++) {
newStr += newArr[i].charAt(0).toUpperCase()+newArr[i].slice(1,newArr[i].length);
}
console.log(newStr.slice(0,1).toLowerCase() + newStr.slice(1,newStr.length));
}
camelize("background-color");
camelize("list-style-image");?
?
?
HTML5 中的新属性 async和defer区别
HTML • boloog 发表了文章 • 0 个评论 • 1681 次浏览 • 2017-04-20 18:30
浏览器支持情况：
Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持?async?defer?属性。
?
简述：<script async src="common.js"></script>有?async?脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
?<script defer src="index.js"></script>
?有?defer?脚本将在页面完成解析时执行，但 index.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。<script src="index.js"></script>
?没有?defer?或?async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该?script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
?
实例代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 中的新属性 async和defer区别</title>
</head>
<body>
<script async src="./common.js"></script>
<script defer src="./index.js"></script>
<script>
console.log(1111);
</script>
</body>
</html>
?运行结果：1111
index.js
common.js
?
?
?
? 查看全部
Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持?async?defer?属性。
?
简述：<script async src="common.js"></script>有?async?脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
?<script defer src="index.js"></script>
?有?defer?脚本将在页面完成解析时执行，但 index.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。<script src="index.js"></script>
?没有?defer?或?async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该?script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
?
实例代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 中的新属性 async和defer区别</title>
</head>
<body>
<script async src="./common.js"></script>
<script defer src="./index.js"></script>
<script>
console.log(1111);
</script>
</body>
</html>
?运行结果：1111
index.js
common.js
?
?
?
? 查看全部
浏览器支持情况：
Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持?async?defer?属性。
?
简述：
?
?有?defer?脚本将在页面完成解析时执行，但 index.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
?没有?defer?或?async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该?script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
?
实例代码：
?运行结果：
?
?
?
?
Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持?async?defer?属性。
?
简述：
<script async src="common.js"></script>有?async?脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
?
<script defer src="index.js"></script>
?有?defer?脚本将在页面完成解析时执行，但 index.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
<script src="index.js"></script>
?没有?defer?或?async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该?script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
?
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 中的新属性 async和defer区别</title>
</head>
<body>
<script async src="./common.js"></script>
<script defer src="./index.js"></script>
<script>
console.log(1111);
</script>
</body>
</html>
?运行结果：
1111
index.js
common.js
?
?
?
?
百度BOS 上传 Vue 2.x封装
VUE • lopo1983 发表了文章 • 0 个评论 • 1959 次浏览 • 2017-04-19 18:28
template
<div class="fileup">
<input type="file" ref="fileup" multiple="multiple" class="hide" name="fileUp" :id="rdid" @change="onFileChange" />
<label class="btn btn-ces" :for="rdid"><span class="iconfont icon-add"></span>选择文件</label>
<span>{{infomsg}}</span>
<div class="fileup-area" v-show="files.length">
<div class="col-md-2 files" v-for="(item,index) in files">
<div class="thumbnail">
<div class="thumbnail-object" :style="{'background-image':`url(${item.src})`}">
<a class="ctr-bar" @click="delFile(index,item.key,item.status)">
<span class="iconfont icon-del"></span>
</a>
</div>
<div class="caption">
<p class="name">{{item.name}}</p>
<span class="iconfont icon-zhengque text-success" v-if="item.status==2"></span>
<bsf-progress :state="item.progress" v-if="item.progress<100"></bsf-progress>
</div>
</div>
</div>
</div>
<p class="btn-mix" v-if="files.length>0">
<a class="btn btn-ces" @click="sendFile">提交</a>
<a class="btn btn-default" @click="clearFile">取消</a>
</p>
</div>
javascript
import bos from '@/assets/js/bce-sdk-js/baidubce-sdk.bundle'
import lib from "@/assets/js/lib"
import bsfProgress from '@/components/comp/progress'
import { bosConfig, bucket } from '@/config/bos'
let client = new baidubce.sdk.BosClient(bosConfig);
export default {
name: "bosupt",
components: {
bsfProgress
},
props: {
maxlength: {
type: Number,
default: 3
},
maxSize: {
type: Number,
default: 50000
}
},
data() {
return {
files: [],
infomsg:""
}
},
computed: {
rdid() {
return "up" + Math.ceil(Math.random() * 1000, 3);
}
},
methods: {
onFileChange(evt) {
let files = evt.target.files;
let _this = this;
if(files.length) {
for(let i = 0, len = files.length; i < len; i++) {
let file = files[i];
let fcobj = {
type: file.name.substring(file.name.lastIndexOf('.')).toLowerCase(),
key: lib.randomStr(false, 5)
};
let o = {
file: file, // File 对象
status: 0, // 0：未上传 1：正在上传：2上传成功 3：上传失败
progress: 0, // 上传进度
type: fcobj.type,
key: fcobj.key,
name: file.name,
size: file.size,
path: "http://" + bucket + ".bj.bcebos.com/" + fcobj.key + fcobj.type
};
let reader = new FileReader()
reader.readAsDataURL(file);
reader.onload = (e) => {
o.src = e.target.result // base64 可以作为判断是不是存在相同文件
if(this.files.findIndex(f => f.src == o.src) > -1) {
return false
}
if(o.size <= _this.maxSize) {
this.files.push(o)
} else {
this.infomsg="图片太大了哦"
return false
}
};
};
}
Array.from(this.files).slice(0, this.maxlength)
},
delFile(index, key, status) {
if(status == 2) {
client.deleteObject(bucket, key).then(e => {
e && this.files.splice(index, 1);
}).catch(e => {
console.log(e)
})
} else {
this.files.splice(index, 1);
}
},
clearFile() {
let files = this.files;
this.files = [];
let ar = []
this.$refs.fileup.value = "";
this.$emit('clearfile', ar)
},
sendFile() {
this.files.forEach(o => {
if(o.status == 0) {
let file = o.file
let blob = file;
let keytext = o.type;
let key = o.key + keytext;
const ext = key.split(/\./g).pop();
let mimeType = baidubce.sdk.MimeType.guess(ext);
if(/^text\//.test(mimeType)) {
mimeType += '; charset=UTF-8';
}
let options = {
'Content-Type': mimeType
};
client.putObjectFromBlob(bucket, key, blob, options)
.then(function(res) {})
.catch(function(err) {
console.error(err);
});
client.on('progress', function(evt) {
if(evt.lengthComputable) {
o.progress = (evt.loaded / evt.total) * 100;
o.status = 2;
}
});
}
});
let ar = []
this.files.forEach(e => {
ar.push(e.path)
});
this.$emit('sendfile', ar)
}
},
mounted: function() {
this.$nextTick(function() {
})
}
}
BOS 配置
bos.js
const bosConfig = {
credentials: {
ak: '',
sk: ''
},
endpoint: 'http://bj.bcebos.com'
}
const bucket = 'bucket名称';
export{bosConfig,bucket}
感谢戏子大爷 查看全部
<div class="fileup">
<input type="file" ref="fileup" multiple="multiple" class="hide" name="fileUp" :id="rdid" @change="onFileChange" />
<label class="btn btn-ces" :for="rdid"><span class="iconfont icon-add"></span>选择文件</label>
<span>{{infomsg}}</span>
<div class="fileup-area" v-show="files.length">
<div class="col-md-2 files" v-for="(item,index) in files">
<div class="thumbnail">
<div class="thumbnail-object" :style="{'background-image':`url(${item.src})`}">
<a class="ctr-bar" @click="delFile(index,item.key,item.status)">
<span class="iconfont icon-del"></span>
</a>
</div>
<div class="caption">
<p class="name">{{item.name}}</p>
<span class="iconfont icon-zhengque text-success" v-if="item.status==2"></span>
<bsf-progress :state="item.progress" v-if="item.progress<100"></bsf-progress>
</div>
</div>
</div>
</div>
<p class="btn-mix" v-if="files.length>0">
<a class="btn btn-ces" @click="sendFile">提交</a>
<a class="btn btn-default" @click="clearFile">取消</a>
</p>
</div>
javascript
import bos from '@/assets/js/bce-sdk-js/baidubce-sdk.bundle'
import lib from "@/assets/js/lib"
import bsfProgress from '@/components/comp/progress'
import { bosConfig, bucket } from '@/config/bos'
let client = new baidubce.sdk.BosClient(bosConfig);
export default {
name: "bosupt",
components: {
bsfProgress
},
props: {
maxlength: {
type: Number,
default: 3
},
maxSize: {
type: Number,
default: 50000
}
},
data() {
return {
files: [],
infomsg:""
}
},
computed: {
rdid() {
return "up" + Math.ceil(Math.random() * 1000, 3);
}
},
methods: {
onFileChange(evt) {
let files = evt.target.files;
let _this = this;
if(files.length) {
for(let i = 0, len = files.length; i < len; i++) {
let file = files[i];
let fcobj = {
type: file.name.substring(file.name.lastIndexOf('.')).toLowerCase(),
key: lib.randomStr(false, 5)
};
let o = {
file: file, // File 对象
status: 0, // 0：未上传 1：正在上传：2上传成功 3：上传失败
progress: 0, // 上传进度
type: fcobj.type,
key: fcobj.key,
name: file.name,
size: file.size,
path: "http://" + bucket + ".bj.bcebos.com/" + fcobj.key + fcobj.type
};
let reader = new FileReader()
reader.readAsDataURL(file);
reader.onload = (e) => {
o.src = e.target.result // base64 可以作为判断是不是存在相同文件
if(this.files.findIndex(f => f.src == o.src) > -1) {
return false
}
if(o.size <= _this.maxSize) {
this.files.push(o)
} else {
this.infomsg="图片太大了哦"
return false
}
};
};
}
Array.from(this.files).slice(0, this.maxlength)
},
delFile(index, key, status) {
if(status == 2) {
client.deleteObject(bucket, key).then(e => {
e && this.files.splice(index, 1);
}).catch(e => {
console.log(e)
})
} else {
this.files.splice(index, 1);
}
},
clearFile() {
let files = this.files;
this.files = [];
let ar = []
this.$refs.fileup.value = "";
this.$emit('clearfile', ar)
},
sendFile() {
this.files.forEach(o => {
if(o.status == 0) {
let file = o.file
let blob = file;
let keytext = o.type;
let key = o.key + keytext;
const ext = key.split(/\./g).pop();
let mimeType = baidubce.sdk.MimeType.guess(ext);
if(/^text\//.test(mimeType)) {
mimeType += '; charset=UTF-8';
}
let options = {
'Content-Type': mimeType
};
client.putObjectFromBlob(bucket, key, blob, options)
.then(function(res) {})
.catch(function(err) {
console.error(err);
});
client.on('progress', function(evt) {
if(evt.lengthComputable) {
o.progress = (evt.loaded / evt.total) * 100;
o.status = 2;
}
});
}
});
let ar = []
this.files.forEach(e => {
ar.push(e.path)
});
this.$emit('sendfile', ar)
}
},
mounted: function() {
this.$nextTick(function() {
})
}
}
BOS 配置
bos.js
const bosConfig = {
credentials: {
ak: '',
sk: ''
},
endpoint: 'http://bj.bcebos.com'
}
const bucket = 'bucket名称';
export{bosConfig,bucket}
感谢戏子大爷 查看全部
template
javascript
BOS 配置
bos.js
感谢戏子大爷
<div class="fileup">
<input type="file" ref="fileup" multiple="multiple" class="hide" name="fileUp" :id="rdid" @change="onFileChange" />
<label class="btn btn-ces" :for="rdid"><span class="iconfont icon-add"></span>选择文件</label>
<span>{{infomsg}}</span>
<div class="fileup-area" v-show="files.length">
<div class="col-md-2 files" v-for="(item,index) in files">
<div class="thumbnail">
<div class="thumbnail-object" :style="{'background-image':`url(${item.src})`}">
<a class="ctr-bar" @click="delFile(index,item.key,item.status)">
<span class="iconfont icon-del"></span>
</a>
</div>
<div class="caption">
<p class="name">{{item.name}}</p>
<span class="iconfont icon-zhengque text-success" v-if="item.status==2"></span>
<bsf-progress :state="item.progress" v-if="item.progress<100"></bsf-progress>
</div>
</div>
</div>
</div>
<p class="btn-mix" v-if="files.length>0">
<a class="btn btn-ces" @click="sendFile">提交</a>
<a class="btn btn-default" @click="clearFile">取消</a>
</p>
</div>
javascript
import bos from '@/assets/js/bce-sdk-js/baidubce-sdk.bundle'
import lib from "@/assets/js/lib"
import bsfProgress from '@/components/comp/progress'
import { bosConfig, bucket } from '@/config/bos'
let client = new baidubce.sdk.BosClient(bosConfig);
export default {
name: "bosupt",
components: {
bsfProgress
},
props: {
maxlength: {
type: Number,
default: 3
},
maxSize: {
type: Number,
default: 50000
}
},
data() {
return {
files: [],
infomsg:""
}
},
computed: {
rdid() {
return "up" + Math.ceil(Math.random() * 1000, 3);
}
},
methods: {
onFileChange(evt) {
let files = evt.target.files;
let _this = this;
if(files.length) {
for(let i = 0, len = files.length; i < len; i++) {
let file = files[i];
let fcobj = {
type: file.name.substring(file.name.lastIndexOf('.')).toLowerCase(),
key: lib.randomStr(false, 5)
};
let o = {
file: file, // File 对象
status: 0, // 0：未上传 1：正在上传：2上传成功 3：上传失败
progress: 0, // 上传进度
type: fcobj.type,
key: fcobj.key,
name: file.name,
size: file.size,
path: "http://" + bucket + ".bj.bcebos.com/" + fcobj.key + fcobj.type
};
let reader = new FileReader()
reader.readAsDataURL(file);
reader.onload = (e) => {
o.src = e.target.result // base64 可以作为判断是不是存在相同文件
if(this.files.findIndex(f => f.src == o.src) > -1) {
return false
}
if(o.size <= _this.maxSize) {
this.files.push(o)
} else {
this.infomsg="图片太大了哦"
return false
}
};
};
}
Array.from(this.files).slice(0, this.maxlength)
},
delFile(index, key, status) {
if(status == 2) {
client.deleteObject(bucket, key).then(e => {
e && this.files.splice(index, 1);
}).catch(e => {
console.log(e)
})
} else {
this.files.splice(index, 1);
}
},
clearFile() {
let files = this.files;
this.files = [];
let ar = []
this.$refs.fileup.value = "";
this.$emit('clearfile', ar)
},
sendFile() {
this.files.forEach(o => {
if(o.status == 0) {
let file = o.file
let blob = file;
let keytext = o.type;
let key = o.key + keytext;
const ext = key.split(/\./g).pop();
let mimeType = baidubce.sdk.MimeType.guess(ext);
if(/^text\//.test(mimeType)) {
mimeType += '; charset=UTF-8';
}
let options = {
'Content-Type': mimeType
};
client.putObjectFromBlob(bucket, key, blob, options)
.then(function(res) {})
.catch(function(err) {
console.error(err);
});
client.on('progress', function(evt) {
if(evt.lengthComputable) {
o.progress = (evt.loaded / evt.total) * 100;
o.status = 2;
}
});
}
});
let ar = []
this.files.forEach(e => {
ar.push(e.path)
});
this.$emit('sendfile', ar)
}
},
mounted: function() {
this.$nextTick(function() {
})
}
}
BOS 配置
bos.js
const bosConfig = {
credentials: {
ak: '',
sk: ''
},
endpoint: 'http://bj.bcebos.com'
}
const bucket = 'bucket名称';
export{bosConfig,bucket}感谢戏子大爷
纯css写出小三角和气泡对话框
CSS/SASS/SCSS/LESS • boloog 发表了文章 • 0 个评论 • 3192 次浏览 • 2017-04-19 18:04
各种小三角实现：在线查看<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.common-div{
width: 0;
height: 0;
margin: 20px;
}
.div1{
border-top: 25px solid blue;
border-left: 25px solid red;
border-right: 25px solid yellow;
border-bottom: 25px solid green;
}
.div2{
border-top: 25px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.div3{
border-top: 25px solid transparent;
border-left: 25px solid red;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.div4{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid yellow;
border-bottom: 25px solid transparent;
}
.div5{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid green;
}
.div6{
border-top: 25px solid transparent;
border-left: 25px solid red;
border-right: 25px solid transparent;
border-bottom: 25px solid red;
}
.div7{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid green;
border-bottom: 25px solid green;
}
</style>
</head>
<body>
<div class="common-div div1"></div>
<div class="common-div div2"></div>
<div class="common-div div3"></div>
<div class="common-div div4"></div>
<div class="common-div div5"></div>
<div class="common-div div6"></div>
<div class="common-div div7"></div>
</body>
</html>
?
?气泡对话框：在线查看<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3对话框</title>
<style>
.dialog-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
position: relative;
margin-top: 30px;
background-color: #fff;
}
.dialog-box-1 .triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
position: absolute;
top: -20px;
left: 10px;
}
.dialog-box-2 .triangle {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
top: -1px;
right: -1px;
}
.dialog-box-3 .triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
position: absolute;
top: -20px;
left: 10px;
}
.dialog-box-3 .triangle:after {
content: "";
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
position: absolute;
top: -6px;
left: -8px;
}
</style>
</head>
<body>
<div class="dialog-box dialog-box-1">
<span class="triangle"></span>
</div>
<div class="dialog-box dialog-box-2">
<span class="triangle"></span>
</div>
<div class="dialog-box dialog-box-3">
<span class="triangle"></span>
</div>
</body>
</html> 查看全部
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.common-div{
width: 0;
height: 0;
margin: 20px;
}
.div1{
border-top: 25px solid blue;
border-left: 25px solid red;
border-right: 25px solid yellow;
border-bottom: 25px solid green;
}
.div2{
border-top: 25px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.div3{
border-top: 25px solid transparent;
border-left: 25px solid red;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.div4{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid yellow;
border-bottom: 25px solid transparent;
}
.div5{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid green;
}
.div6{
border-top: 25px solid transparent;
border-left: 25px solid red;
border-right: 25px solid transparent;
border-bottom: 25px solid red;
}
.div7{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid green;
border-bottom: 25px solid green;
}
</style>
</head>
<body>
<div class="common-div div1"></div>
<div class="common-div div2"></div>
<div class="common-div div3"></div>
<div class="common-div div4"></div>
<div class="common-div div5"></div>
<div class="common-div div6"></div>
<div class="common-div div7"></div>
</body>
</html>
?
?气泡对话框：在线查看<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3对话框</title>
<style>
.dialog-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
position: relative;
margin-top: 30px;
background-color: #fff;
}
.dialog-box-1 .triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
position: absolute;
top: -20px;
left: 10px;
}
.dialog-box-2 .triangle {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
top: -1px;
right: -1px;
}
.dialog-box-3 .triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
position: absolute;
top: -20px;
left: 10px;
}
.dialog-box-3 .triangle:after {
content: "";
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
position: absolute;
top: -6px;
left: -8px;
}
</style>
</head>
<body>
<div class="dialog-box dialog-box-1">
<span class="triangle"></span>
</div>
<div class="dialog-box dialog-box-2">
<span class="triangle"></span>
</div>
<div class="dialog-box dialog-box-3">
<span class="triangle"></span>
</div>
</body>
</html> 查看全部
各种小三角实现：在线查看
?
?气泡对话框：在线查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.common-div{
width: 0;
height: 0;
margin: 20px;
}
.div1{
border-top: 25px solid blue;
border-left: 25px solid red;
border-right: 25px solid yellow;
border-bottom: 25px solid green;
}
.div2{
border-top: 25px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.div3{
border-top: 25px solid transparent;
border-left: 25px solid red;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.div4{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid yellow;
border-bottom: 25px solid transparent;
}
.div5{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid green;
}
.div6{
border-top: 25px solid transparent;
border-left: 25px solid red;
border-right: 25px solid transparent;
border-bottom: 25px solid red;
}
.div7{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid green;
border-bottom: 25px solid green;
}
</style>
</head>
<body>
<div class="common-div div1"></div>
<div class="common-div div2"></div>
<div class="common-div div3"></div>
<div class="common-div div4"></div>
<div class="common-div div5"></div>
<div class="common-div div6"></div>
<div class="common-div div7"></div>
</body>
</html>
?
?气泡对话框：在线查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3对话框</title>
<style>
.dialog-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
position: relative;
margin-top: 30px;
background-color: #fff;
}
.dialog-box-1 .triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
position: absolute;
top: -20px;
left: 10px;
}
.dialog-box-2 .triangle {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
top: -1px;
right: -1px;
}
.dialog-box-3 .triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
position: absolute;
top: -20px;
left: 10px;
}
.dialog-box-3 .triangle:after {
content: "";
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
position: absolute;
top: -6px;
left: -8px;
}
</style>
</head>
<body>
<div class="dialog-box dialog-box-1">
<span class="triangle"></span>
</div>
<div class="dialog-box dialog-box-2">
<span class="triangle"></span>
</div>
<div class="dialog-box dialog-box-3">
<span class="triangle"></span>
</div>
</body>
</html>
css居中的几种实现方式
CSS/SASS/SCSS/LESS • boloog 发表了文章 • 0 个评论 • 1617 次浏览 • 2017-04-18 18:33
1.?使用padding<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
background-color: pink;
padding: 100px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
使用padding让文本垂直居中显示
</div>
</body>
</html>2.?使用绝对定位<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: red;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
</style>
</head>
<body>
<div class="wrap">
使用绝对定位让.wrap垂直居中显示
</div>
</body>
</html>3.?使用CSS3 transform<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: red;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="wrap">
使用CSS3 transform让 .wrap垂直居中显示
</div>
</body>
</html>4.?使用伪元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 400px;
height: 300px;
margin: 0 auto;
background-color: #ccc;
text-align: center;
}
.wrap::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
使用伪元素实现垂直居中
</div>
</body>
</html> 查看全部
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
background-color: pink;
padding: 100px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
使用padding让文本垂直居中显示
</div>
</body>
</html>2.?使用绝对定位<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: red;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
</style>
</head>
<body>
<div class="wrap">
使用绝对定位让.wrap垂直居中显示
</div>
</body>
</html>3.?使用CSS3 transform<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: red;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="wrap">
使用CSS3 transform让 .wrap垂直居中显示
</div>
</body>
</html>4.?使用伪元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 400px;
height: 300px;
margin: 0 auto;
background-color: #ccc;
text-align: center;
}
.wrap::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
使用伪元素实现垂直居中
</div>
</body>
</html> 查看全部
1.?使用padding
<!DOCTYPE html>2.?使用绝对定位
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
background-color: pink;
padding: 100px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
使用padding让文本垂直居中显示
</div>
</body>
</html>
<!DOCTYPE html>3.?使用CSS3 transform
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: red;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
</style>
</head>
<body>
<div class="wrap">
使用绝对定位让.wrap垂直居中显示
</div>
</body>
</html>
<!DOCTYPE html>4.?使用伪元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: red;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="wrap">
使用CSS3 transform让 .wrap垂直居中显示
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 400px;
height: 300px;
margin: 0 auto;
background-color: #ccc;
text-align: center;
}
.wrap::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
使用伪元素实现垂直居中
</div>
</body>
</html>