1) Html结构
<div class="card">
<div class="face front">
<!--能自定义内容,不限于文本,图片等各种html元素-->
<div class="t1">--关注精益编程--</div>
</div>
<div class="face back">
<a href="https://www.leanboot.com" target="_blank" title="精益编程"><img src="./static/n1.jpg" /></a>
</div>
</div>
- 定义card的卡片内容区域,能根据实际情况,给card固定的长宽样式
- .face定义两个区域,使用front与back定义前面背面区域
- 两个区域都能灵活定义html元素
2)style样式
- 请详细查看resource.css中的:插件本身样式
3)js代码
function flip() {
var i = 0;
var cardFlip = $(".card");
var timer = setInterval(function(){
cardFlip.eq(i).toggleClass('card-flipped');
i++;
if(i == cardFlip.length){
i=0;
}
}, 2000);//2s翻动一次牌子
}
- 主要运用了js中的循环定时setInterval()函数,进行定时调用
- jquery的数组.eq()来绑定特定元素,并使用toggleClass()切换class的添加与移除
jquery还是挺好用的,用于动态网页或者纯静态网页中,是一个不错的选择,毕竟针对这些公网站点来说,还是依赖seo生存的,所以并不是现在的超多前后端分离的就是好,任何一种的成熟的框架的选择,都有弊与利,需要结合应用场景来选择!精益资源每一个源码都是经过考验与整理,请放心使用
精益编程之精益资源,3D效果动态白云,canvas制作白云,使用网页3D图像渲染技术框架webGL与Three.js