利用射流研究…生成一个界面友好的等待效果，使用jquery插件spin.js，文章末尾有下载地址，下图是生成的效果截图，代码调用很简单。

% @ page语言=' Java ' ContentType=' text/html；charset=UTF-8 '页面编码=' UTF-8 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 ' style type=' text/CSS ' body { font-family : Helvetica，Arial，sans-serif；font-size : 12px} #预览1 {左侧浮动： }相对位置：背景色： # 000;颜色：黑色；宽度： 220 px高度： 220 px边距： 20px边框-半径： 20px} #预览2 {左侧浮动：相对位置：背景色： # 000;颜色：黑色；宽度： 220 px高度： 220 px边距： 20px边框-半径： 20px}/style脚本src=' http : jquery。量滴js '/script script src=' http : spin。js '/script script src=' http : jquery。旋转。js '/script脚本类型=' text/JavaScript '//对样式#预览一进行配置var opts1={线条： 12,//要绘制的线条数长度： 0,//每条线条的长度宽度： 11,//线条粗细半径： 40,//内圆的半径刻度： 1.0,//缩放微调器边角的整体大小： 0 0,//圆度(0.1)颜色： '#efefef '，//#rgb或#rrggbb不透明度： 1/4,//线条的不透明度旋转： 0,//旋转偏移方向： 1,//顺时针方向1:-1:逆时针方向速度： 1,//每秒回合数小道： 100，//余辉百分比fps : 20，//使用setTimeout() zIndex时每秒帧数33330 //垂直居中左： '50% ',//水平居中阴影： false，//是否渲染阴影hwaccel : false，//是否使用硬件加速（可能有问题)位置： '绝对//元素定位}；//对样式#预览2进行配置var opts2={线条： 18,//要绘制的线条数长度： 0,//每条线条的长度宽度： 11,//线条粗细半径： 40,//内圆的半径刻度： 1.0,//缩放微调器边角的整体大小： 0 0,//圆度(0.1)颜色： '红色，//#rgb或#rrggbb不透明度： 1/4,//线条的不透明度旋转： 0,//旋转偏移方向： 1,//顺时针方向1:-逆时针方向1:速度： 1,//每秒回合数小道： 100，//余辉百分比fps : 20，//使用setTimeout() zIndex时每秒帧数： 20 //垂直居中左： '50% ',//水平居中阴影： false，//是否渲染阴影hwaccel : false，//是否使用硬件加速（可能有问题)位置： '绝对//元素定位}；/脚本标题在此插入标题/title/head body div id=' preview 1 ' class=' preview '/div div id=' preview 2 ' class=' preview '/div/body script type=' text/JavaScript ' $(' # preview 1 ').自旋(opts 1)；$('#preview2 ').自旋(opts 2)；/script/html插件下载地址

https://github.com/fgnass/spin.js/

http://spin.js.org/

以上所述是小编给大家介绍的利用spin.js生成等待效果(js等待效果),希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！