文档章节

图片加载显示效果(8种效果)

mymlucifer
 mymlucifer
发布于 2015/03/16 13:06
字数 311
阅读 11
收藏 0

dreamweaver免费视频教程:

51RGB Dreamweaver板块

加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频 绝对干货!

 

图片加载显示效果(8种效果)

 

插件描述

鼠标经过左侧分类文字时,文字背景样式改变,并切换右侧相应图片,兼容ie6以上

使用步骤

     

1.        引用js

<script src="js/masonry.pkgd.min.js"></script>

<script src="js/imagesloaded.js"></script>

<script src="js/classie.js"></script>

<script src="js/AnimOnScroll.js"></script>

2.        引用html

<ul class="grid effect-4" id="grid">

    <li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li>

    <li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li>

    <li><a href="http://drbl.in/fWMT"><img src="images/3.jpg"></a></li>

    <li><a href="http://drbl.in/fQdt"><img src="images/4.png"></a></li>

    <!-- ... -->

</ul>

3.        引用css

/* Effect 4: fall perspective */

.grid.effect-4 {

    perspective: 1300px;

}

 

.grid.effect-4 li {

    transform-style: preserve-3d;

}

 

.grid.effect-4 li.animate {

    transform: translateZ(400px) translateY(300px) rotateX(-90deg);

    animation: fallPerspective .8s ease-in-out forwards;

}

 

@keyframes fallPerspective {

    100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }

}

 

代码压缩包下载地址:

http://www.51rgb.com/nbbs/thread-1691-1-1.html

 

光看文字怎么够 来看在线视频 手把手教你做网站!

Adobe官方讲师万晨曦指导 轻松幽默学习网站开发

Dreamweaver视频直达网址 51RGB Dreamweaver板块

 


© 著作权归作者所有

mymlucifer
粉丝 7
博文 61
码字总数 26911
作品 0
南昌
私信 提问
iOS疯狂详解之imageIO完成渐进加载图片

一、常见渐进加载图片模式 目前我们看到的渐进加载主要有以下三种实现方式: 1) 依次从web上加载不同尺寸的图片,从小到大。最开始先拉取一个小缩略图做拉伸显示,然后拉取中等规格的图,拉取...

hanbing94
2015/09/29
138
0
GIF,JPG还是PNG选择合适的图片格式

转自:IT屌丝,码农之家 从某种程度上说,判断一个网页设计师是否优秀,可以从其在WEB开发(或网页设计)中是否合理的采用各种图片格式得出结论。事实上,或许所有人都知道图片存在GIF,JPG和...

it_hack
2013/04/16
325
0
JS三教九流系列-jquery实例开发到插件封装3

我们先写实例,然后可能需要在封装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 1-7实例地址 http://my.oschina.net/u/2352644/blog/49082...

透笔度
2015/08/25
227
0
使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效

日期:2012-3-26 来源:GBin1.com 在线演示 本地下载 360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程...

gbin1
2012/03/27
196
0
InceptionV3迁移学习:选择不同tensor作为输入

本文主要讨论的是预训练InceptionV3如何定义不同的输入以及输出,并展示了提取不同inception模型节点的迁移学习效果 网上很容易找到关于InceptionV3模型迁移学习的文章 但是这些文章都是一致的...

vincehxb
2017/10/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
11
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部