Home > Developer > Web Develop
JQuery house jumping plug-in hopscotch, jqueryhopscotch
Plug-in description
House jumping is a framework that allows developers to Easily preview products and add them to their web pages.
The house jump accepts JSON objects as input, and provides APIs for developers to control rendering tour display and Management of tour progress.Procedure
To use the jump frame, you only need to package hopscotch.css and hopscotch. js On Your webpage. This will load the house jump object to the global window object.1. Import files
<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>
3. Define and start browsing in js<Script type = "text/javascript"> $ (function () {var tour = {id: "hello-hopscotch", steps: [{title: "", content: "The Road to ordinary" is the theme song of the movie "The Future of Life". It is sung by Pu Shu, and translated by Pu Shu and Han. ", target:" header ", placement:" bottom "}, {title: "", content: "In the song" The Road to ordinary ", not only the experience is condensed into a story, but also the experience is melted into the lyrics and notes of a sentence. ", Target: document. querySelector ("# content2"), placement: "bottom" },{ title: "", content: "Everyone can see themselves and hear this song, you can't help playing back the past in your mind. ", Target: document. querySelector ("# content3"), placement: "bottom" },{ title: "", content: "The Road to ordinary" is not just about park tree, Han, even your, my, and everyone's "experiences" can't help but sigh the past. ", Target: document. querySelector (" # content5 "), placement:" bottom "}]}; // Start the tour! Hopscotch. startTour (tour) ;}) </script>
Effect:
Project demo source code download: http://download.csdn.net/detail/itmyhome/7718733
What is the difference between jquery and jquery plug-ins?JQuery is a framework of js and a common function of encapsulated js.
The jQuery plug-in is obviously an extension function based on jQuery. That is to say, the functions you often use are encapsulated by interfaces provided by jQuery, and become jQuery-based plug-ins.
That is to say, the jQuery plug-in is an extension of the jQuery library!
How to add the jQuery pluginOn the official jQuery website
<Script src = "./js/juery. js" type = "text/javascript"> </script>
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
