10 2013 档案
摘要：如图一：页面刷新时候的效果是这样的如图二：图片过五秒会自动轮转一次，当鼠标移动到小广告图时候，其他广告图出校灰色效果，这样效果是一个很简单的效果制作成的最后，javascript的代码分享为：$(function(){$(".mScm-right").hover(function(){},function(){$(this).find("i").css({filter:"alpha(opacity=0)",opacity:"0"});}); $(".mScm-right li").hover(f
阅读全文
摘要：首先，如图一：当打开页面是，产品出现了淡入淡出切换轮播状态，当鼠标点击左边的小图时，就会切换出相对应的大图，当鼠标移开的时候，这个轮播就会停止自动轮播，只有人工手动才能进行切换；是一个不错的体验！如图二：当页面打开时，大广告图会五秒向左切换轮播，当鼠标点击到左右两边的上一页，下一页按钮时，大图会随着切换到下一张图片，当点击下面的小图时，才会出现小图所在的大图位置，当鼠标移开之后，大图就不会继续轮播切换了，只有当鼠标点击时候才会继续切换！这个插件效果是多变的，其中，Javascript的代码如下$(function() { $("#top-slider").bxSlider(
阅读全文
摘要：W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”下面我们同样从其最语法和属性值开始一步一步来学习transition的具体使用语法:transition:[ || || || [,[ || || || ]]*transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transi...
阅读全文
摘要：今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。
阅读全文
