Coding&Sharing

今天做的一个网页要实现图片以平行四边形的样子展现出来，但是切图的时候要切成普通的图片，想了很久，最后是通过canvas绘制两个三角形来完成遮罩的效果。最终效果图：提供的素材图片 好了，那么开始实现这种效果了1 . 将页面的结构写好，两个三角形的canvas画布和一张图片<div class="m-img"> <canvas id="m-triangle2" width="

jQuery实现简单的展开伸缩效果展开伸缩效果不论是在电脑上还是在手机端都应用的十分广，那么今天就实现一个这样的效果，首先贴下图展开之前的样子展开之后的样子好了，下面开始写实现过程了1.首先将页面的结构写出来，结构比较简单，就不多说了<div class="m-box"> <div class="m-list"> 点击试一下，会出现什么呢？

tab标签页切换在网页中应用是十分广泛的，尤其是用在登录面板。这篇文章就简单介绍一下该效果的实现过程。首先贴一下效果图，两个选项卡，点击之后可以进行切换下面详细介绍实现的过程1.页面的组织结构：两个选项卡，两块内容。给first-li和first-content添加active类，使页面加载后呈现的效果为第一幅图所示<!--列表切换的选项卡--><div class="tab-header">

最近在研究一个移动端触摸滑动插件Swiper，发现还不错。想做一些移动端轮播效果,tab切换效果的童鞋可以好好的研究一下，蛮方便的。这里把官网地址贴一下，里面有详细的API文档和中文教程：http://www.swiper.com.cn/    今天要实现的效果是基于Swiper的列表切换效果，之前自己写了个列表切换的，只能实现简单的切换，但是比较僵硬，没有什么过渡的效果，今天就重新整理了一份新的。

纯css实现仿ios表单开关看看效果图 html结构如下：<label class="maple-checkbox"> <input type="checkbox" class="ios-switch red bigswitch" checked /> <div><div></div></div> </label>css内容：/*表单开关样式*/.