
HTML5/CSS3
快雪时晴天
IT行业新手,菜鸟,Rookie...等等称谓。浅尝辄止于 Java,OC,HTML5,Hadoop,Python。怀着谦虚谨慎的精神,向各位同行帅哥美女学习。
展开
-
利用html5/css3 动画效果,实现图片果冻抖动效果
需求:实现小图片从一大图片中弹出,到达顶点后发生3次抖动效果。应用技术:html5 + css3遇到问题:抖动结束后,图片会消失。实现过程:1、利用 -webkit-animation: icon09_move 1s; 属性实现动画属性, -webkit-animation-delay: 1.3s; 属性实现延迟属性。通过不同图片的延迟时间的不同,产生“喷溅”视觉效果。2、利原创 2015-02-09 14:05:13 · 9259 阅读 · 2 评论 -
使用 jquery 实现 checkbox “全选/全不选” 效果
需求:使用 jquery 实现 checkbox 的全选与全不选。效果如图: 全选 关键的 jquery 代码:$(function(){ $原创 2016-09-13 15:07:04 · 552 阅读 · 0 评论 -
css+jquery鼠标滑过,显示下拉菜单效果
需求:鼠标滑过菜单项,显示下拉菜单。如图:html代码解析:因为下拉菜单为列表,所以需要使用 标签 待办件 1条 协办件 4条 督办件 3条 CSS解析:#im原创 2016-09-13 15:00:49 · 10081 阅读 · 1 评论 -
非插件,css + jquery 实现tab页效果
需求:通过css+jquery实现tab选项卡切换页面效果,效果如图代码+原理解析: 头像设置 基本资料原创 2016-09-13 14:23:15 · 643 阅读 · 0 评论 -
字体过长时,缩略并用省略号显示
如图,当左侧菜单栏名称过长时,设置 css 样式使多余的字显示为“……”代码:其中 : overflow: hidden表示多余部分隐藏text-overflow:ellipsis表示文字多余部分显示为“……”white-space:nowrap表示多行文字时不换行原创 2016-08-23 11:33:23 · 1037 阅读 · 0 评论 -
控制页面最大最小宽度
需求:设计页面时一般都是“最大化”显示,但是当手动缩小页面时,页面中的节点就会因为窗体容器的缩小而下沉。为了控制这一问题,下面使用 css 来对宽度进行控制。代码中min-width:200px 用来控制最小宽度width:expression_r(document.body.clientWidth max-width:800px 用来控制窗体的最大宽度原创 2016-08-23 10:25:58 · 9088 阅读 · 0 评论 -
JQuery 实现多个checkbox 只选中一个
需求:多个 checkbox 选项,只选中其中的一个代码: check1 check2 check3$(document).ready(function(){ $('#test').find('input[type=checkbox]').bind('click', function(){ $('#test').find('input[type=checkbox]').not原创 2016-08-23 10:15:42 · 16458 阅读 · 1 评论 -
如何让div在整个屏幕中垂直居中
如图,若将中间登录页保持在垂直居中位置css代码操作如下:.container{ width:100%; height:548px; top:50%; position:absolute; margin:-274px 0px 0px 0px;}其中:top 表示距离顶端的距离, margin:-274px 是中间图片高度的一半。这样设置就可以保证整个原创 2016-08-29 16:06:49 · 5646 阅读 · 0 评论 -
关于百度BAE 数据库开发步骤
1、先注册一个百度BAE账号2、建一个项目,再点击“扩展服务”,创建MySql。3、打开MyEclipse,分别建立 jsp页面,servlet层,dao层,DBUtils层,代码如下。3.1 建立 index.jsp 用户名: 密码:原创 2015-02-25 17:54:16 · 723 阅读 · 0 评论 -
利用<div>层 和<img>标签,实现一个图片两个动画效果
需求:令一枚图片先“从左上到右下”放大并“抖动”,再从“右上到左下”一直运动下去。技术:html5 + css3实现:1、通过动画属性,改变图片所在层的大小:#div_cloud{position: relative;-webkit-animation: cloud_infinite_move 2s infinite; }@-webkit-keyframes cloud_i原创 2015-02-09 14:47:44 · 1866 阅读 · 0 评论 -
利用swiper.js 实现 html5 模仿手指滑动切屏效果
上周接到公司新项目,用html5 制作页面开发微信平台广告。原创 2015-02-09 14:03:08 · 7349 阅读 · 0 评论 -
用 js 实现“div的遮罩”效果
需求:点击“排序”按钮,生成div遮罩效果,如图:html代码:两个按钮html代码:遮罩效果 排序 状态: 发文 收文 公文类型: 通知 公告 其中,id=bg 为遮罩背景,id=show 为遮罩显示内容。下面是 cs原创 2016-09-13 15:22:06 · 20531 阅读 · 1 评论