html页面怎么实现动态加载页面

2024-11-15 17:06:19
推荐回答(1个)
回答(1):

方法:1、直接贴图:在界面上贴一个gif动态等待效果图片,gif图片获取方式:网上找素材,会ps的可以自己制作


2、CSS3/SVG/HTML5 Canvas手动绘制等待效果:

这种效果:网上有很多类似素材,可以根据需要选择,或使用上述技术绘制

下面提供一个CSS3绘制的范例

3、CSS的代码如下:

4、

效果如下图:运行机制很简单,先手动绘制一个静态的图,然后控制对应div进行360度旋转,即可实现



5、使用js等待效果插件(如:spin.js)



6、JS代码如下:

var opts = {

lines: 9,

length: 0,

width: 15,

radius: 20,

corners: 1,

rotate: 0,

direction: 1,

color: '#0101DF',

speed: 1, 

trail: 34,

shadow: false,

hwaccel: false,

className: 'spinner',

zIndex: 2e9,

top: '50%',

left: '50%'

};

var target = document.getElementById('img_wait');

var spinner = new Spinner(opts).spin(target);

7、html代码的引用:

8、打开测试,效果如下