var onTweenEnd = function(){ alert("end")};
//将dom的left变换至100px
TweenLite.to(dom, 0.5, {left:100, onComplete:onTweenEnd });
Tags: javascript JS tweenlite
当我在写Elemin主题(一个我最近在设计的WordPress主题)时候,遇到了一个必须面对的问题:我必须要使嵌入的视频可以伸缩。使用max-width:100%和height:auto在HTML5的video标签中有效,但是如果嵌入的代码中含有iframe或者object标签的话就不行了。经过几小时的试验和Google,我终于成功了。如果你也正在创建一个响应设计,这个简单的CSS技巧会派上用场的。调整一下你的浏览器窗口,看看最后的demo吧。
View Demo
可伸缩的HTML5视频(demo)
使用HTML5的video元素,在里面添加max-width:100%,在上面的介绍中提到,如果内嵌的代码中有使用到iframe 或者object标签的话,这个技巧就不生效了。
- video {
- max-width: 100%;
- height: auto;
- }
内嵌iframe 和object标签的可伸缩视频(demo)
这个技巧非常简单。你需要用一个<div>容器把代码包起来,并且把padding-bottom的值设为50%-60%。然后把子元素(内嵌的iframe, object)设为width :100%, height:100%,position :bsolute 。这样就可以强行让内嵌的元素的宽度自动最大化了。
CSS
- .video-container {
- position: relative;
- padding-bottom: 56.25%;
- padding-top: 30px;
- height: 0;
- overflow: hidden;
- }
- .video-container iframe,
- .video-container object,
- .video-container embed {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
HTML
- <div class="video-wrapper">
- <div class="video-container">
- <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
- </div>
- <!-- /video -->
- </div>
- <!-- /video-wrapper -->
兼容性
这个小技巧在大部分的浏览器上都是可以的(测试过的平台:Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone 和 iPad)。
------ 假如你爱上了两个人,选择第二个。因为如果你真爱第一个,就不会去爱其他人。
If you love a girl, it's better to fight for her happiness than to abandon her for the sake of her happiness.
------ 爱一个女孩子,与其为了她的幸福而放弃她,不如留住她,为她的幸福而努力。
程序代码
Flash动画









