<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>波浪效果</title> <style type="text/css"> body{padding: 0;margin: 0;} .wrap{width: 100%;position: relative;overflow: hidden;height: 492px;background: #08a;} #banner_bolang_bg_1 { width: 997px; height: 85px; background: url("http://img.gzui.net/imgs/wave1.png") repeat-x; position: absolute; top: 408px; width: 400%; left: -236px; z-index: 2; } #banner_bolang_bg_2 { width: 1009px; height: 100px; background: url("http://img.gzui.net/imgs/wave2.png") repeat-x; position: absolute; top: 392px; width: 400%; left: 0px; z-index: 1; } </style> </head> <body> <div class="wrap"> <div id="banner_bolang_bg_1"></div> <div id="banner_bolang_bg_2"></div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> function waveloop1(){ jQuery("#banner_bolang_bg_1").css({"left":"-236px"}).animate({"left":"-1233px"},25000,'linear',waveloop1); } function waveloop2(){ jQuery("#banner_bolang_bg_2").css({"left":"0px"}).animate({"left":"-1009px"},60000,'linear',waveloop2); } waveloop1(); waveloop2(); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 波浪效果 喜欢 (0)or分享 (0)
