网页步骤引导

网页步骤引导

// html <div id="test" style="width: 100px; height: 50px; background: red;"></div> <div id="test2" style="position: absolute; top: 400px; left: 300px; width: 100px; height: 50px; background: blue;"></div> <div id="test3" style="position: absolute; top: 200px; left: 600px; width: 100px; height: 50px; background: yellow;"></div> <div id="test4" style="position: absolute; top: 200px; left: 900px; width: 100px; height: 50px; background: green;"></div> <input id="test5" type="text" style="position: absolute; top: 124px; left: 300px; width: 200px; height: 30px; border: 1px solid #eee; outline: none;" /> //js var MyGuild = Guide({ steps: [ document.querySelector('#test5'), document.querySelector('#test'), document.querySelector('#test2'), document.querySelector('#test3'), document.querySelector('#test4') ], messages: [ '第一步：输入框', '第二步：红色', '第三步：蓝色', '第四步：黄色', '第五步：绿色' ] }); MyGuild.beginStep();