Js+css3实现图片画廊总结
来源:互联网 发布:易语言电视直播源码 编辑:程序博客网 时间:2024/05/16 01:17
案例中主要用到一些新的CSS3效果比如:
1、3D视图位置设置和子元素3D支持
-webkit-perspective:800px;/*若设置为0px则不支持3D透视功能*/-webkit-transform-style:preserve-3d;
2、翻转为不可见时隐藏
-webkit-backface-visibility:hidden;
3、使用CSS旋转和进行位移
-webkit-transfrom:translate(0px,0px) rotateY(0deg);
4、CSS过渡动画
-webkit-transition:-webkit-transform 0.6s ease-in-out (delay);
另外用到的一些前端JS技巧:
1、字符串替换的简易模版功能
1.1、
template.replace('{{index}}',s).replace('{{img}}',data[s].img).replace('{{caption}}',data[s].caption).replace('{{desc}}',data[s].desc);
1.2、
.className.replace(/\s*photo_center\s*/,' ');
2、根据范围获得一个随机数
function random(range){var max=Math.max(range[0],range[1]);var min=Math.min(range[0],range[1]);var diff=max-min;var number=Math.ceil(Math.random()*diff+min);return number;}
3、使用脚本设置元素的ClassName以及具体的style属性样式
.style['-webkit-transform']='rotate(0deg) scale(1.3)';
阅读全文
0 0
- Js+css3实现图片画廊总结
- 11个非常棒的CSS3实现的图片画廊
- CSS3+JS 实现超炫的散列画廊特效
- jquery实现图片画廊切换
- JS插件开发之LightBox图片画廊
- PHP CSS3 目录直读式Lightbox 画廊图片展示
- Gallery实现图片的画廊展示
- Android 使用HorizontalScrollView 实现图片画廊
- 图片画廊
- 图片画廊
- 图片画廊
- 原生js+css3实现图片自动切换,图片轮播
- 如何使用js实现电影海报画廊特效?
- 无js实现点击图片切换背景css3
- <html5+css3+js>javascript实现图片滚动播放功能
- 支持Lazy loading的图片画廊jQuery插件 - Least.js
- 支持Lazy loading的图片画廊jQuery插件 - Least.js
- Android FancyCoverFlow的使用实现图片画廊形式的呈现
- 修改输入框placeholder文字的样式
- 【STL】栈的实现原理以及应用
- 如何重新编辑排版错乱的PDF文件
- C# Regex类详解
- fzu2231平行四边形数
- Js+css3实现图片画廊总结
- adapter
- 创建并运行Java运行时代码的三种方式
- 笨办法学 Python · 续 练习 43:SQL 管理
- 回顾Linux、Git 之父Linus Torvalds的传奇技术人生
- python _、__和__xx__的区别
- java中接口的用法
- solr6.6定时实时重建索引和增量更新
- 采用管道函数创建有名管道,使用select函数替代使用poll函数实验多路复用