09 2015 档案

网页常动态效果--评分
摘要：用变量score记录点击索引，当鼠标离开时用score代替index完成效果HTML: ... 阅读全文
posted @ 2015-09-24 11:45 十三君
网页常用动态效果--淘宝竖条广告
摘要：布局：.box>ol+ulol和ul均整体左浮动，box清浮CSS： 1 .box{ 2 width:250px; 3 height:250px; 4 position: rela... 阅读全文
posted @ 2015-09-24 10:42 十三君
网页常用动态效果--多表单验证
摘要：1 jQuery(document).ready(function($) { 2 var arr = ['tel','email','qq','weichat']; 3 $('input').each(function(index, ... 阅读全文
posted @ 2015-09-24 10:11 十三君
CSS3动画之旋转魔方盒
摘要：步骤：1.大盒子里盛放六个子盒子代表立方体的6个面；2.子盒子开启3d效果 transform-style:preserve-3d;3.上下面沿X轴旋转90度，一个上移盒子一半高，一个下移盒子一半高 translateZ:数值;4.左右面沿Y轴旋转90度，一个左移盒子一半宽，一个右移盒子一半宽；5.... 阅读全文
posted @ 2015-09-21 23:07 十三君
CSS3动画之透视
摘要：若在x,y轴rotate90度，其实是线，不显示，按近大远小的透视关系可用 perspective:数值 开启透视；默认以中间线为旋转基线，可以用transform-origin来设置旋转基线在z轴上的平移（translateZ）实际上，负值是越来越小，正值越来越大 d... 阅读全文
posted @ 2015-09-21 22:32 十三君
CSS3动画之百度钱包
摘要：百度钱包的步骤：1.建一个盒子，里面放两个盒子，代表正反面，两个盒子叠一起，正面层次高2.当鼠标Hover时，正面盒子从0deg->-180deg,反面盒子从-180deg->0deg3.正反面盒子都设置背面隐藏backface-visibilityHTML结构：div.box>div.z+div.... 阅读全文
posted @ 2015-09-21 22:06 十三君
CSS3动画之无缝滚动
摘要：与js的无缝滚动类似，整个承载图片的盒子移动，克隆一组图片放置最后，当一组图片播放结束后将盒子定位在有一组图片宽度的左侧HTML结构： ... 阅读全文
posted @ 2015-09-21 21:15 十三君
网页常用动态效果--网易轮播图
摘要：与小米轮播图类似，多了下角标进度条，同时加了切换效果HTML代码： 网页常用动态效果---网易轮播图 网页常用动... 阅读全文
posted @ 2015-09-20 22:45 十三君
网页常用动态效果--优酷轮播图
摘要：优酷轮播图的不同之处在于用克隆在最后插入新的节点图片，因而在轮播时角标位的判断是关键HTML代码： ... 阅读全文
posted @ 2015-09-20 21:04 十三君
放大镜效果之js
摘要：HTML代码：div.box>div#left+div#buttom+div#rightdiv#left>imgdiv#buttom>div.small>imgCSS代码： .box{ position: relative; } #le... 阅读全文
posted @ 2015-09-19 12:16 十三君
网页常用动态效果--放大镜
摘要：HTML代码：div.box>span+divCSS代码：box相对定位，span在box内绝对定位，div绝对定位超出其自身宽.box{ width:350px; height:350px; background: url(imag... 阅读全文
posted @ 2015-09-18 17:52 十三君
网页常用动态效果--拖拽
摘要：拖拽的关键在于事件源及坐标位网页中的基本拖拽：1.设定是否激活拖拽的标识flag;2.当拖拽点按下时，在window范围内的移动；3.拖拽区域不能超过窗口，加判断HTML: body>divCSS代码： JQ代码：指定在有效范围内的拖拽： 1.拖拽的三个事件，拖拽点鼠标按下，移动范围内的鼠... 阅读全文
posted @ 2015-09-18 14:21 十三君
网页常用动态效果--小米官网轮播图
摘要：关键在于层级关系HTML代码：div.box>ul+ol+span*2(ul层级1，ol层级2，span层级3)ul>li*5>img（注意可以将首个li的z-index定为10）ol>li*5CSS代码： .box{ width:992px; ... 阅读全文
posted @ 2015-09-18 10:53 十三君
网页常用动态效果--回到顶部
摘要：关键将提示回到顶部的盒子固定定位在页面右下角，隐藏状态，当滚动坐标值大于了首屏高度后显示html代码： ... 阅读全文
posted @ 2015-09-16 19:02 十三君
网页常用动态效果--悬浮广告
摘要：关键在于动态获取滚动坐标值测试滚动事件$(window).scroll(function(){ console.log($(window).scrolltop());})获取三个高度：窗口高度，盒子高度以及滚动坐标值，将广告盒子设置为绝对定位，当鼠标滚动时，其top值为滚动坐标值+窗口高度/2-盒... 阅读全文
posted @ 2015-09-16 18:44 十三君
网页常用动态效果--模态框
摘要：模态框的关键在于盒子定位，一个盒子遮住网页部分，此盒子绝对定位，宽高100%,实际高度为document高度；一个盒子为实际弹出框，固定定位在屏幕中央。html代码： 弹框 ... 阅读全文
posted @ 2015-09-16 17:31 十三君
网页常用动态效果--客服广告
摘要：关键在于设定开关标识，父盒子固定定位，按钮盒子绝对定位超出父盒子部分html代码： CSS代码： div{ width:131px; height:311px; ... 阅读全文
posted @ 2015-09-16 17:10 十三君