web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
幻灯片和轮播图
页面网格布局和幻灯片布局切换UI界面设计
分类:
幻灯片和轮播图
日期:
2024-05-14
点击(2)
评论(0)
演 示
免费下载
简介
##### HTML结构 该UI设计将所有元素包裹在一个div#window元素中,用于模拟一个浏览器。div#grid-selector是布局选择按钮。div.thumbs是网格缩略图模式面板,div#carousel是幻灯片模式面板。 ```html
......
......
``` ##### CSS样式 以下的CSS代码用于模拟一个苹果电脑样式的浏览器: ```html #window{ margin:30px auto 0; border-radius:6px; background:#fff; width:675px; height:620px; overflow:hidden; position:relative; } #header{ background:#e3e5e9; height:33px; padding-left:18px; } #header .circle{ background:#9fa2a8; border-radius:50%; float:left; width:12px; height:12px; margin-right:6px; margin-top:11px; } ``` .floating-thumb class是在点击了“查看网格布局”按钮之后被动态添加到窗口中的,它用于显示第一个网格缩略图。在它被添加的同时,还添加了.animate class,用于使用指定的贝兹曲线函数来制作该网格的过渡动画效果。 ```html .floating-thumb{ background: #e3e5e9; width: 155px; height: 60px; border-radius: 4px; float: left; padding-top: 121px; position:absolute; top: 156px; left: 70px; } .floating-thumb.animate{ width:303px; height:80px; margin-top:20px; padding-top: 326px; top: 146px; left: 186px; -webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99); -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99); -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99); -o-transition: all 400ms cubic-bezier(0,.93,.33,.99); transition: all 400mscubic-bezier(0,.93,.33,.99); } ``` 在幻灯片模式中,幻灯片被设置为只显示第一个slide和第二个slide的一半,用户通过点击第二个slide来查看下一个slide,这些功能的事项在js中完成。幻灯片模式的具体CSS代码请参考源文件。 ##### JAVASCRIPT 在jQuery代码中,resetCarousel()函数用于重置幻灯片,是幻灯片位于初始位置(只显示第一个slide和第二个slide的一半)。setCarousel()函数用于处理幻灯片的点击操作。然后分别为网格布局按钮和幻灯片布局按钮绑定鼠标点击事件,进行界面的切换。具体代码请参考源文件。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告