山东大学项目实训一——骨刻文项目web端主页的实现
参照上一版项目的UI,完成了第一版骨刻文项目的web端主页,主页主要包含的内容有滑动页设计、骨刻文背景介绍、骨刻文论文、学术动态等内容。后续可能会再加上骨刻文分布的地图(echart实现),再美化一下ui。
下面主要介绍主页的几个相对亮点的技术实现
一、滑动展示页的设计
上一版ui中的滑动展示页是这样的: 可以看出它有个很大的缺点就是在图片的边缘有边框,其实也就是图片大小和滑动页大小没有适配,这个问题其实很好解决。我使用的是swiper插件,在swiper插件中,放入的图片会自动适配滑动页的大小。下面我将附上我的思路和解决代码。
我做的效果如下: 可以看出它除了图片可以占满整张滑动页以外,它还增加了一个3d旋转效果。具体实现代码如下:
html
共有 0 条评论