[b]背景[/b]: 整个div 线性移动;支持整块缩小放大
在chrome 和firefox 中比较容易实现, 可以直接定义块的CSS属性:-transition, 在js代码中直接修改原始div块的位置或-transform即可。
而在IE中,该属性无效,不得不自己实现该效果。
[b]chrome和firefox实例代码:[/b]
[b]Html代码[/b]
<div class="g_transition" style="z-index: 5;-webkit-transform: matrix(1, 0, 0, 1, 0, 0);left: 265px;top: 0px;">
//根据需要显示的内容
</div>
[b]CSS部分片段:[/b]
.g_transition {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
[b]说明[/b]:当改变div 中的位置或transform时,将出现动画效果。注意:firefox 使用:-moz-前缀,如:-webkit-transform 需要改成:-moz-transform...
在IE中,可以使用时钟来修改位置和缩放比例实现。
效果参见:
http://www.giisoo.com/?v=x&t=shop&s=0&q=%E8%B4%9D%E5%B0%94%E7%9A%AE%E5%85%B7&n=30&v=1&di=-1
在chrome 和firefox 中比较容易实现, 可以直接定义块的CSS属性:-transition, 在js代码中直接修改原始div块的位置或-transform即可。
而在IE中,该属性无效,不得不自己实现该效果。
[b]chrome和firefox实例代码:[/b]
[b]Html代码[/b]
<div class="g_transition" style="z-index: 5;-webkit-transform: matrix(1, 0, 0, 1, 0, 0);left: 265px;top: 0px;">
//根据需要显示的内容
</div>
[b]CSS部分片段:[/b]
.g_transition {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
[b]说明[/b]:当改变div 中的位置或transform时,将出现动画效果。注意:firefox 使用:-moz-前缀,如:-webkit-transform 需要改成:-moz-transform...
在IE中,可以使用时钟来修改位置和缩放比例实现。
效果参见:
http://www.giisoo.com/?v=x&t=shop&s=0&q=%E8%B4%9D%E5%B0%94%E7%9A%AE%E5%85%B7&n=30&v=1&di=-1