有着立体效果的图纸特效,旋转木马

心想事成类似Pinterest 的图片预加载功用

2016/09/11 · JavaScript
· 预加载

初稿出处: Jack
Pu   

提起Pinterest,我们第一影像可能是图表社交网站,里面有很多用户上传的五花八门的图纸。在此此前端设计出发的话,我们终将不会忘记我们已经那一个流行的瀑布流布局。然而前几日,给大家简单分析上
Pinterest上其余一项非凡值得借鉴图片加载细节。

探访上面的截图:

亚洲必赢官网 1

大家可以感到到图片出来的时候预先绘制概略,重点是预制区域的水彩选拔与图片较为一般的色彩值,当图片加载完全后,会有种渐入的效用。
作用体验

其间谷歌(谷歌)的图片检索也利用了接近成效:

亚洲必赢官网 2

咱们称为那种效益为Color Placeholder
[情调预置],当图片加载的时候,大家先行显示其所在容器的背景颜色(如同很多会显示一个加载的gif),由于受限于分裂的图形和分寸,因此对待与齐刷刷的加载gif,不一样色块体验
可能 更好吧(至少Pinterest 谷歌这么认为吧).

HTML页面

插件代码

此实例是自家两次学习一边写出来的,希望可以帮到我们,一起上学。效果如图所示:

完结步骤

接下去大家进来正题,怎样协调达成如此的卡通加载效果(完毕的点子势必有无数的也欢迎大家提议更好的思绪)

我们先定义下基本的html结构

XHTML

<!–一个post当作一个单位–> <div class=”post”> <div
class=”image-bg” style=”background-color:#141646″> <img
width=”310″ height=”242″
src=””
/> </div> <p class=”title”>Mars</p> </div>

1
2
3
4
5
6
7
<!–一个post当作一个单位–>  
<div class="post">  
  <div class="image-bg" style="background-color:#141646">
    <img width="310" height="242" src="https://mir-s3-cdn-cf.behance.net/projects/404/89388038777855.Y3JvcCwxMDk1LDg1NiwyNTIsMjE.png" />
  </div>
  <p class="title">Mars</p>
</div>

再看下css设置

CSS

.image-bg{ background: #e1e1e1; } img { width:100%; opacity: 0;
transition: opacity .2s ease-in .25s; } .loaded img { opacity: 1; }

1
2
3
4
5
6
7
8
9
10
11
12
.image-bg{
    background: #e1e1e1;
  }
  img {
    width:100%;
    opacity: 0;
    transition: opacity .2s ease-in .25s;
 
  }
  .loaded img {
    opacity: 1;
  }

图形默许是透明度为0,当加载成功后安装为1就行啊。

JavaScript

$(function() { $(‘.post img’).each(function() { var el = this; var image
= new Image(); image.src = el.src; image.onload = function() {
$(el).parent().addClass(‘loaded’); } }) })

1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
    $(‘.post img’).each(function() {
       var el = this;
       var image = new Image();
       image.src = el.src;
 
       image.onload = function() {
         $(el).parent().addClass(‘loaded’);
       }
    })
 
  })

DEMO

几乎基本思路就是这几个,不过那其间最要旨的就是确定所谓的Dominant
Color(图片中主要色彩)。

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>旋转木马轮播图</title>
<link rel=”stylesheet” href=”css/css.css”/>
<!–先引工具包,在引逻辑包–>
<script src=”js/jquery-1.11.1.js”></script>
<script src=”js/index.js”></script>
</head>
<body>

复制代码 代码如下:

亚洲必赢官网 3

安装背景的颜色

比方你用photoshop打开一张图片的话,你只须求几步就足以规定你希望取得的颜料:
滤镜 -> 模糊 -> 平均即可。

亚洲必赢官网 4

当然那是指向你所能处理的图样,即使面对海量的图样的话,那几个时候大家要求用程序去完结。

寻找到一张图片较为强烈的水彩,要求在三维空间中找到一些会晤的点。若是协调写的话,要求去探听一些聚拢算法。当然自己并不打算去写更多的情节有关什么去举办图片的这一个颜色的变动,那可能不是一篇小说能给说完的。实际上你安装ImageMagick就足以简单的兑现预期效应:

convert path/or/url/to/image.png -resize 1×1 txt:-

1
convert path/or/url/to/image.png -resize 1×1 txt:-

唯独那个不太适合我们写程序的。大家得以行使第三方的npm
gm

JavaScript

var gm = require(‘gm’); gm(‘demo1.png’) .resize(120, 120) .colors(1)
.toBuffer(‘RGB’, function (error, buffer) { console.log(buffer.slice(0,
3)); });

1
2
3
4
5
6
7
8
var gm = require(‘gm’);
 
gm(‘demo1.png’)  
    .resize(120, 120)
    .colors(1)
    .toBuffer(‘RGB’, function (error, buffer) {
        console.log(buffer.slice(0, 3));
    });

运行输出效果如下:

Shell

~ node gm.js ./demo1.png: <Buffer 34 29 3b> ./demo2.png:
<Buffer cf c3 ad>

1
2
3
4
5
~ node gm.js
./demo1.png:
<Buffer 34 29 3b>  
./demo2.png:
<Buffer cf c3 ad>

比较图如下:

亚洲必赢官网 5

故而借助程序,大家可以在保存图片的时候进行颜色采集,代码中通过先将图片举办高低调整,实际是出于品质的设想。有助于节约运算时间。除此之外embed.ly也开放了对应的API,方便你拿走网络图片的重大色彩。

尽管大家可以有途径取得那样的颜色的话,自然全部效益就不曾什么样难度了。

<div class=”wrap” id=”wrap”>
<div class=”slide” id=”slide”>
<ul>
<li><a href=”#”><img src=”images/slidepic1.jpg”
alt=””/></a></li>
<li><a href=”#”><img src=”images/slidepic2.jpg”
alt=””/></a></li>
<li><a href=”#”><img src=”images/slidepic3.jpg”
alt=””/></a></li>
<li><a href=”#”><img src=”images/slidepic4.jpg”
alt=””/></a></li>
<li><a href=”#”><img src=”images/slidepic5.jpg”
alt=””/></a></li>
</ul>
<div class=”arrow” id=”arrow”>
<a href=”javascript:;” class=”prev”></a>
<a href=”javascript:;” class=”next”></a>
</div>
</div>
</div>

/*

name: UserGuider
authors:

  • Garland Yang
    requires: [Core/Class, Core/Element.Style, Core/Element.Event,
    Core/Element.Dimensions]
    version:
  • 1.0

    */
    var UserGuider = new Class({
    Implements: [Options, Events],
    options: {
    UserGuideList: new Array(),
    step: 0
    },
    initialize: function (options) {
    this.setOptions(options);
    this.step = this.options.step;
    },
    createGuide: function () {
    var self = this;
    $$(‘.userGuide’).dispose();
    var UserGuideList = this.options.UserGuideList;
    var config = UserGuideList[this.step];
    if (config == null) {
    return;
    }
    var ele = $$(‘.’ + config.className)[0];
    if (ele == null) {
    return;
    }
    $$(‘.’ + config.className + ‘ a’).set(‘target’, ‘_blank’);
    var top = ele.getCoordinates().top;
    var right = ele.getCoordinates().right;
    var bottom = ele.getCoordinates().bottom;
    var left = ele.getCoordinates().left;
    var width = ele.getCoordinates().width;
    var height = ele.getCoordinates().height;
    var x = window.getScrollSize().x;
    var y = window.getScrollSize().y;
    this.createShadowDiv(‘shadowTop’, left, 0, width, top);
    this.createShadowDiv(‘shadowRight’, right, 0, x – right, y);
    this.createShadowDiv(‘shadowButtom’, left, bottom, width, y – bottom);
    this.createShadowDiv(‘shadowLeft’, 0, 0, left, y);
    if (config.src != null) {
    this.createUserGuideImg(left + config.imgLeft, top + config.imgTop,
    config.src);
    }
    if (config.navUrl != null) {
    this.createUserGuideNavImg(right – 50, bottom, config.navUrl);
    }
    if (this.step > 0) {
    this.createUserButton(‘userguide_undo’, ‘UserGuide/undo.png’, this.step
  • 1);
    }
    if (this.step < UserGuideList.length – 1) {
    this.createUserButton(‘userguide_next’, ‘UserGuide/next.png’, this.step
  • 1);
    有着立体效果的图纸特效,旋转木马。}
    this.createUserButton(‘userguide_finish’, ‘UserGuide/finish.png’,
    10000);
    this.changeUserGuideButton();
    if (config.src2 != null) {
    this.createUserGuideImg(left + config.imgLeft2, top + config.imgTop2,
    config.src2);
    }
    return this;
    },
    createShadowDiv: function (id, left, top, width, height) {
    var self = this;
    var div = new Element(‘div’);
    div.set(‘id’, id);
    div.addClass(‘userGuide’);
    div.setStyles({
    left: left + ‘px’,
    top: top + ‘px’,
    width: width + ‘px’,
    height: height + ‘px’,
    position: ‘absolute’,
    ‘background-color’: ‘#000’,
    ‘z-index’: 100,
    opacity: 0.5,
    filter: ‘alpha(opacity=50)’
    });
    $$(‘body’).adopt(div);
    return this;
    },
    createUserGuideNavImg: function (left, top, nav) {
    var self = this;
    var img = new Element(‘img’);
    img.addClass(‘userGuideNav’);
    img.addClass(‘userGuide’);
    img.setStyles({
    cursor: ‘pointer’,
    ‘z-index’: 10000,
    left: left + ‘px’,
    top: top + ‘px’,
    position: ‘absolute’
    });
    img.set(‘src’, ‘userguide/nav.png’);
    img.addEvent(‘click’, function () {
    window.open(nav);
    });
    $$(‘body’).adopt(img);
    return this;
    },
    createUserGuideImg: function (left, top, src) {
    var self = this;
    var img = new Element(‘img’);
    img.addClass(‘userGuideImg’);
    img.addClass(‘userGuide’);
    img.setStyles({
    ‘z-index’: 1000,
    left: left + ‘px’,
    top: top + ‘px’,
    position: ‘absolute’
    });
    img.set(‘src’, src);
    $$(‘body’).adopt(img);
    return this;
    },
    createUserButton: function (className, src, thisStep) {
    var self = this;
    var img = new Element(‘img’);
    img.addClass(className);
    img.addClass(‘userGuide’);
    img.setStyles({
    cursor: ‘pointer’,
    ‘z-index’: 1000000,
    position: ‘absolute’
    });
    img.set(‘src’, src);
    img.addEvent(‘click’, function () {
    self.step = thisStep;
    self.createGuide();
    });
    $$(‘body’).adopt(img);
    return this;
    },
    changeUserGuideButton: function () {
    var self = this;
    var size = window.getSize();
    var scroll = window.getScroll();
    var scrollSize = window.getScrollSize();
    $$(‘.userguide_finish’).setStyles({
    left: (size.x – 220) + ‘px’,
    top: (size.y + scroll.y – 80) + ‘px’
    });
    $$(‘.userguide_next’).setStyles({
    left: (size.x – 420) + ‘px’,
    top: (size.y + scroll.y – 80) + ‘px’
    });
    $$(‘.userguide_undo’).setStyles({
    left: (size.x – 620) + ‘px’,
    top: (size.y + scroll.y – 80) + ‘px’
    });
    return this;
    }
    });

调用方式

复制代码 代码如下:

var UserGuider;
var UserGuideList = new Array({
className: ‘step0’,
src: ‘UserGuide/step0.png’,
imgTop: 50,
imgLeft: 50
}, {
className: ‘step1’,
src: ‘UserGuide/step1.png’,
imgTop: -150,
imgLeft: 0,
src2: ‘UserGuide/pic/1.gif’,
imgTop2: 210,
imgLeft2: 450
}, {
className: ‘step2’,
src: ‘UserGuide/step2.png’,
imgTop: 0,
imgLeft: -600,
navUrl: ‘/MyMessageCenter.aspx’,
src2: ‘UserGuide/pic/2.gif’,
imgTop2: 110,
imgLeft2: 80
}, {
className: ‘step3’,
src: ‘UserGuide/step3.png’,
imgTop: -150,
imgLeft: 130,
navUrl: ‘/MyTaskSearch.aspx’,
src2: ‘UserGuide/pic/3.png’,
imgTop2: -120,
imgLeft2: 250
});
window.addEvent(‘domready’,function(){
UserGuider = new UserGuider({
UserGuideList: UserGuideList
})
UserGuider.createGuide();
});

html代码如下所示:

扩展

亚洲必赢官网 6

实际不外乎纯粹的水彩背景外,大家还可能会遭受类似 medium
的图形(参考上图)预加载技术,才起来图片是歪曲的。实际上大家可以因此插件生成一张几素的小图片,然后利用上高四模糊滤镜,然后等待原图加载落成后,大家在体现原来的图样。

JavaScript

var gm = require(‘gm’); gm(‘demo1.png’) .resize(4, 4) .toBuffer(‘GIF’,
function (error, buffer) { console.log(‘data:image/gif;base64,’ +
buffer.toString(‘base64’)); });

1
2
3
4
5
6
7
var gm = require(‘gm’);
 
gm(‘demo1.png’)  
    .resize(4, 4)
    .toBuffer(‘GIF’, function (error, buffer) {
        console.log(‘data:image/gif;base64,’ + buffer.toString(‘base64’));
    });

XHTML

<div class=”image-bg” style=”background-color:#141646″> <img
src=”data:image/gif;base64,R0lGODlhBAADAPMJACwlPjAmPDUqOzgrOgQPSgkSShAVRhEWRplcFsR3EAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAEAAMAAAQJ0″
width=”310″ height=”242″
real-src=””
/>

1
2
<div class="image-bg" style="background-color:#141646">  
    <img  src="data:image/gif;base64,R0lGODlhBAADAPMJACwlPjAmPDUqOzgrOgQPSgkSShAVRhEWRplcFsR3EAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAEAAMAAAQJ0" width="310" height="242" real-src="https://mir-s3-cdn-cf.behance.net/projects/404/89388038777855.Y3JvcCwxMDk1LDg1NiwyNTIsMjE.png" />

若果您有趣味,可以明白进一步复杂的非死不可关于图片预加载的方案Facebook’s
200 byte
technique

</body>
</html>

你或许感兴趣的篇章:

  • jquery
    插件已毕图片延迟加载效果代码
  • js loading加载效果落到实处代码
  • js控制的遮罩层实例介绍
  • jquery下完成overlay遮罩层代码
  • JS遮罩层效果 包容ie firefox
    jQuery遮罩层
  • JQuery
    遮罩层落成(mask)达成代码
  • Javascript
    遮罩层和加载效果代码

复制代码 代码如下:

参考

1 赞 3 收藏
评论

亚洲必赢官网 7

 

<html xmlns=”” xml:lang=”en”
lang=”en”>
  <head>
    <title>图片浏览工具创设</title>
    <script type=”text/javascript”
src=”js/main.js”></script>
    <link rel=”stylesheet” type=”text/css”  href =
“style/css.css”>
  </head>
  <body>
  <div id=”pic_browser”>
      <img class=”prev” src=”images/prev.png”
onclick=”javascript:jzk.ui.moveImg(-1);”/>

 

      <img id=”img1″ onclick=””/>
      <div class=”mask3″
onclick=”javascript:jzk.ui.moveImg(3);”></div><!–
增加三级遮罩 –>

CSS内容

      <img id=”img2″ onclick=””/>
      <div class=”mask2″
onclick=”javascript:jzk.ui.moveImg(2);”></div><!–
增加二级遮罩 –>

@charset “UTF-8”;
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 “Microsoft YaHei”,
“微软雅黑”, SimSun, “行草”, sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

      <img id=”img3″ onclick=””/>
      <div class=”mask1″
onclick=”javascript:jzk.ui.moveImg(1);”></div><!–
伸张一流遮罩 –>

.wrap{
width:1200px;
margin:10px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
opacity: 0;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(..prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(..next.png);
}

      <img id=”img4″ onclick=””/>

 

      <img id=”img5″ onclick=””/>
      <div class=”mask5″
onclick=”javascript:jzk.ui.moveImg(-1);”></div><!–
和mask1一样效果 –>

 

      <img id=”img6″ onclick=””/>
      <div class=”mask6″
onclick=”javascript:jzk.ui.moveImg(-2);”></div><!–
和mask2一样效果 –>

JS中index.js内容

      <img id=”img7″ onclick=””/>
      <div class=”mask7″
onclick=”javascript:jzk.ui.moveImg(-3);”></div><!–
和mask3一样效果 –>

jQuery(function () {
//旋转木马的逻辑包
//旋转木马思路:点击左侧或者左边按钮,移动样式或者移动li标签的职分;
var arrOfJson = [
{ // 1
width:400,
top:70,
left:50,
opacity:0.2,
“z-index”:2
},
{ // 2
width:600,
top:120,
left:0,
opacity:0.8,
“z-index”:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:1,
“z-index”:4
},
{ // 4
width:600,
top:120,
left:600,
opacity:0.8,
“z-index”:3
},
{ //5
width:400,
top:70,
left:750,
opacity:0.2,
“z-index”:2
}
];

      <img class=”next” src=”images/next.png”
onclick=”javascript:jzk.ui.moveImg(1);”/>
  </div>
  </body>
</html>

//须求1:页面加载的时候拥有li标签根据arrOfJson中的样式滑动过去;
//鼠标进入突显左右按钮,移开隐藏;(用opacity控制)
//须求2:点击右边按钮,删除数组中的首个,添加到最末尾;
//需要3:点击右侧按钮,逻辑相反;

css代码如下:

//需要1:页面加载的时候所有li标签依照arrOfJson中的样式滑动过去;
//鼠标进入突显左右按钮,移开隐藏;(用opacity控制)
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
$(ele).css(“z-index”,arrOfJson[index][“z-index”]);
});
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
$(ele).animate(arrOfJson[index],400);
})

   
此处的mask1、2、3…..是覆盖几张相片的一个div,用opacity属性来定义透明度,能够完结一种朦胧感,让外观尤其美妙。

$(“#slide”).mouseenter(function () {
$(“#arrow”).animate({“opacity”:1});
})
$(“#slide”).mouseleave(function () {
$(“#arrow”).animate({“opacity”:0});
})
//要求2:点击右边按钮,删除数组中的首个,添加到最末尾;
$(“.next”).on(“click”, function () {
//删除数组中的首个,添加到最末尾;
var first = arrOfJson.shift();
arrOfJson.push(first);
//安装新数组在加载四次;
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
$(ele).css(“z-index”,arrOfJson[index][“z-index”]);
});
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
$(ele).stop().animate(arrOfJson[index],400);
})
});
//要求3:点击左侧按钮,逻辑相反;
$(“.prev”).on(“click”, function () {
//删除数组中的最终一个,添加到最前方;
var last = arrOfJson.pop();
arrOfJson.unshift(last);
//安装新数组在加载三次;
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
$(ele).css(“z-index”,arrOfJson[index][“z-index”]);
});
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
亚洲必赢官网 ,$(ele).stop().animate(arrOfJson[index],400);
})
});
})

复制代码 代码如下:

body {width: 1340px;height: 500px;background:
url(../images/body_bg.gif) no-repeat;}
#pic_browser {width: 860px;height: 192px; position:
relative;margin:130px 106px;}
#pic_browser img{position: absolute;border: none;}

.prev {top:76px;left: 0px; }
#img1, .mask3 {width: 106px;height: 70px;left: 45px;top: 61px;z-index:
4;}
#img2, .mask2 {width: 166px;height: 110px;left: 95px;top:41px;z-index:
5;}
#img3, .mask1 {width: 226px;height: 150px;left: 175px;top:
21px;z-index: 6;}
#img4 {width: 290px;height: 192px;left: 285px;top: 0px;z-index: 7;}
#img5, .mask5 {width: 226px;height: 150px;right: 175px;top:
21px;z-index: 6;}
#img6, .mask6 {width: 166px;height: 110px;right: 95px;top:41px;z-index:
5;}
#img7, .mask7 {width: 106px;height: 70px;right: 45px;top: 61px;z-index:
4;}
.next {top:76px;right: 0px;}

.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {background:
#fff;position: absolute;}
.mask1, .mask5  {opacity: 0.3;}
.mask2, .mask6 {opacity: 0.5;}
.mask3, .mask7 {opacity: 0.7;}

js代码如下:

复制代码 代码如下:

window.onload = function()
{
   jzk.app.initImg();
}

var imgArray = new Array();
imgArray[0] = ‘images/1.jpg’;
imgArray[1] = ‘images/2.jpg’;
imgArray[2] = ‘images/3.jpg’;
imgArray[3] = ‘images/4.jpg’;
imgArray[4] = ‘images/5.jpg’;
imgArray[5] = ‘images/6.jpg’;
imgArray[6] = ‘images/7.jpg’;
var base=0;

var jzk = {}; /*概念命名空间*/

jzk.tools = {};/*支行第一层*/

jzk.ui = {};/*分层第二层*/
jzk.ui.moveImg = function(offset)
{
    base= (base-offset);
    for(var i = base;i< base +7;i++)/*定义i为数组下标的变量*/
    {
        var img =
document.getElementById(‘img’+(i-base+1));/*保证img变量为img1、img2、img3…直到img7这7个img元素*/
        if(i<0)  /*数组下标i<0,表达offset>0,*/
        {
            img.src =imgArray[imgArray.length+i];
        }
        else if(i>imgArray.length-1)
        {
            img.src =imgArray[i-imgArray.length];
        }
        else
        {
            img.src = imgArray[i];
        }
    }
}

jzk.app = {}; /*分段第三层*/
jzk.app.initImg =
function()/*初叶化展现图片,也就是调用函数moveImg进度:参数为7,base等于-7,i等于-7,-6,-5,-4,-3,-2,-1那7个值,对应的元素为img1,img2,…img7,所以有:img1=imgArray[-7+7],img2=imgArray[-6+7]….*/
{
     jzk.ui.moveImg(7);/*开端参数应该设为:能显得的张数(此处为7);*/
}
多少个文件,属js代码比较难通晓,上面我也交给了详尽的注脚,如果还有何人看了不懂的,可以在底下评论中商讨。

您可能感兴趣的小说:

  • javascript落到实处带节日和阴历的日历特效
  • 一个JavaScript的求爱小特效
  • 纯JavaScript完毕HTML5
    Canvas八种特效滤镜示例
  • 23个Javascript弹出窗口特效整理
  • javascript
    打字效果的文字特效
  • JavaScript妙味课堂
    物体平滑移动特效
  • javascript:google
    向上向下滚动特效,兼容IE6,7,8,FF
  • javascript
    可控式透明特效完成代码
  • JavaScript 地震特效
  • 同一个网页中贯彻五个JavaScript特效的方法
网站地图xml地图