摘要： 效果图: 阅读全文

摘要： 效果图显示3秒,透明度从1到0实现原理:z-index属性,opacity属性,jquery动画1.定义css 1 /*** 悬浮提示 ***/ 2 .tips { 3 position: absolute; 4 font-size: 12px; 5 background: black; 6 z-index: 2; 7 overflow: hidden; 8 filter: alpha(opacity=50); 9 ... 阅读全文

摘要： 接上篇,上面讲了仿android gallery实现左右滑动,本篇实现仿android listview上下滑动效果图:实现原理:核心利用DIV的overflow: hidden; 和scrollTop和scrollheight完成. 可参照上篇 阅读全文

摘要： 效果图:随着手指在移动设备上滑动,DIV也随着滚动.想看效果,可以download代码,用手机来测试.(在目前的移动设备上,内部块元素是不支持滚动条的!)实现原理:核心利用DIV的overflow: hidden; 和scrollleft和scrollwidth完成.实现步骤:1. 画页面.首先获取body可视区域的宽,然后减去div控件的左右margin值,再除以3,取四舍五入后的值相关代码:var bodyWidth = $("body").width();var testWidth = Math.round((bodyWidth - 20) / 3);2. 每一个日期 阅读全文

摘要： 接上篇效果图:实现关键:css3中border-radius(画圆),animation(动画),linear-gradient(线性渐变)实现步骤:(注意先将DIV在页面中布局好,第一个DIV在最外面,第二个DIV在第一个里面,第三个DIV在最里面,一定要控件好相互间的间距)1. 定义3个DIV(全部绝对定位)1 <div></div>2 <div></div>3 <div></div>2.定义body和DIV的样式1 body {2 background-color: rgb(173,173,173);3 }4 ... 阅读全文

摘要： 接上篇:效果图:实现关键:理解border-radiuscss3代码1 border-top-right-radius:10px;//右上角2 border-bottom-right-radius:20px;//右下角3 border-top-left-radius:30px;//左上角4 border-bottom-left-radius:40px;//左下角border-radius还区分了水平和垂直半径css3代码:1 border-radius: 15px 5px 25px 5px ... 阅读全文

摘要： 效果图:实现关键: 普通DIV+css3的box-shadow属性相关代码:box-shadow: 1px 1px 1px rgba(0, 0, 0, .29),1px 1px 1px rgba(255, 255, 255, .44) inset;(chrome,safari加上-webkit前缀,firefox加上-moz前缀,opera加上-o前缀)box-shadow使用解释:开发步骤:1.首先定义一个div1 <div>2 <div></div>3 <div></div>4 </div>2.定义css样式 1 bo 阅读全文