(一)图片滑动组件 js+HTML5+css3
2015-02-05 16:37
375 查看
以前一直是做后台开发,后来转前端开发,也只是对对UI 设计后的图片进行代码化,对效果进行机械性能的搬动,俨然一个代码的搬运工,最近我准备深入的研究移动前端开发,希望自己不再是代码的搬运工,加油,谢谢大家。
图片滚动组件静态界面之:
部分css总结:
居中(优先级由高到底)
1.
3. ul li 显示一排的时候,不用 float 而是 用
-webkit-translate3d(0,0,0);
position:absolute;
图片滚动组件静态界面之:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <meta name="apple-touch-fullscreen" content="YES" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <title>无标题文档</title> <style> body{ margin:0px; padding:0px; overflow::hidden; background:#333; height:100%; position:absolute; } #canvas{ height:100%; width:100%; overflow:hidden; } ul,ul{ list-style-type:none; margin:0px; padding:0px; overflow:hidden; } li{ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; } </style> </head> <body> <div id="canvas"> <ul> <li style="height:568px;-webkit-translate3d(0,0,0);position:absolute;"> <img width="320px" src="a/imgs/1.jpg"/> </li> <li style="height:568px;-webkit-translate3d(320px,0,0);position:absolute;"> <img width="320px" src="a/imgs/2.jpg"/> </li> <li style="height:568px;-webkit-translate3d(0,0,0);position:absolute;"> <img width="320px" src="a/imgs/3.jpg"/> </li> </ul> </div> </body> </html>
部分css总结:
居中(优先级由高到底)
1.
li{ display:table-cell; vertical-align:middle; }
2.
li{ line-height:568px; vertical-align:middle; } li img{ vertical-align:middle; }
3. ul li 显示一排的时候,不用 float 而是 用
-webkit-translate3d(0,0,0);
position:absolute;
相关文章推荐
- JavaScript html js图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻
- HTML中通过js对File组件进行图片预览
- html5+css3+js开发APP实例教程2 -- 图片/图标列表
- [js开源组件开发]js轮播图片支持手机滑动切换
- 微信小程序image组件binderror使用例子(对应html、js中的onerror) ,图片失效显示默认图片
- ASP.NET[HTML控件]无组件无刷新的图片上传方式
- jsoup 获得html页面所有的连接和图片,js,css等
- 发布一个JS图片阅览组件
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例
- Asp.net 组件开发中web资源文件(图片、js)的调用问题
- 图片上传功能(html+js)
- Js获取HTML中所有图片地址
- js图片滑动
- html5+css3+js开发APP实例教程1 -- 文字列表
- 用HTML5/CSS3/JS开发Android/IOS应用框架大全
- 非常惊艳的Css3的桌面上散落的相片效果,以及单击放大图片的LightBox效果(独立Js非jQuery)的实现原理
- JS图片滑动
- JavaScript html js图片切割系统,裁剪,图片处理
- 滑动图片展示效果(js+css)
- 可左右滑动 js 图片产品 展示 代码 验证可用