標籤：jquery 跳房子 外掛程式 hopscotch
外掛程式描述
跳房子是一個架構,使開發人員可以輕鬆預覽產品並添加到他們的網頁
跳房子接受JSON對象作為輸入,並提供開發人員來控制渲染巡演顯示和管理的遊覽進度的API。使用步驟
要使用跳房子架構上手,只需包括hopscotch.css和hopscotch.js您的網頁上。這將載入跳房子物件到全域的window對象。一、引入檔案
<link href="css/hopscotch-0.1.2.css" rel="stylesheet" type="text/css" ><script src="js/jquery-1.8.0.min.js" type="text/javascript"></script><script src="js/hopscotch-0.1.2.js" type="text/javascript"></script>
<body><h1> 平凡之路</h1><h3 id="header">作詞：樸樹、韓寒 作曲：樸樹</h3><div id="content1"><p>徘徊著的 在路上的</br>你要走嗎</br>易碎的 驕傲著</br>那也曾是我的模樣</br></p></div><div id="content2"><p>沸騰著的 不安著的</br>你要去哪</br>謎一樣的 沉默著的</br>故事你真的在聽嗎</br></p></div><div id="content3"><p>我曾經跨過山和大海 也穿過人山人海</br>我曾經擁有著一切 轉眼都飄散如煙</br>我曾經失落失望失掉所有方向</br>直到看見平凡才是唯一的答案</br></p></div><div id="content4"><p>當你仍然 還在幻想</br>你的明天</br>她會好嗎 還是更爛</br>對我而言是另一天</br></p></div><div id="content5"><p>我曾經毀了我的一切 只想永遠地離開</br>我曾經墮入無邊黑暗 想掙紮無法自拔</br>我曾經象你象他象那野草野花</br>絕望著 渴望著 哭著笑著平凡著</br></p></div><div id="content6"><p>向前走 就這麼走 就算你被給過什麼</br>向前走 就這麼走 就算你被奪走什麼</br>向前走 就這麼走 就算你會錯過什麼</br>向前走 就這麼走 就算你會</br></p></div><div id="content7"><p>我曾經跨過山和大海 也穿過人山人海</br>我曾經擁有著一切 轉眼都飄散如煙</br>我曾經失落失望失掉所有方向</br>直到看見平凡才是唯一的答案</br></p></div><div id="content8"><p>我曾經毀了我的一切 只想永遠地離開</br>我曾經墮入無邊黑暗 想掙紮無法自拔</br>我曾經象你象他象那野草野花</br>絕望著 渴望著 哭著笑著平凡著</br></p></div><div id="content9"><p>我曾經跨過山和大海 也穿過人山人海</br>我曾經問遍整個世界 從來沒得到答案</br>我不過象你象他象那野草野花</br>冥冥中這是我 唯一要走的路啊</br></p></div><div id="content10"><p>時間無言 如此這般</br>明天已在眼前</br>風吹過的 路依然遠</br>你的故事講到了哪</br></p></div></body>
<script type="text/javascript">$(function() {var tour = {id : "hello-hopscotch",steps : [ {title : "介紹",content : "《平凡之路》是電影《後會無期》的主題曲,由樸樹作曲演唱,樸樹、韓寒作詞",target : "header",placement : "bottom"}, {title : "",content : "在《平凡之路》這首歌裡，不僅僅將經曆濃縮成了故事,更是將經曆融化成了一句句歌詞和音符。",target : document.querySelector("#content2"),placement : "bottom"} , {title : "",content : "每個人都能都能從中看到自己，並在聽到這首歌的時候，情不自禁在腦海裡回放過往。",target : document.querySelector("#content3"),placement : "bottom"}, {title : "",content : "《平凡之路》唱出的不僅僅是樸樹、韓寒，甚至是你的、我的、所有人的“經曆”，令人不禁唏噓過往，感歎曾經。",target : document.querySelector("#content5"),placement : "bottom"}]};// Start the tour!hopscotch.startTour(tour);})</script>
項目示範源碼下載：http://download.csdn.net/detail/itmyhome/7718733
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
