Share on Google+Share on Google+

jQuery kwicks plug-in for creation of animating image title

Ads
In this section ,you will learn about using jQuery kwicks plug-in for creating animating Title images.

jQuery kwicks plug-in for creation of animating image title

In this section ,you will learn about using jQuery kwicks plug-in for creating animating Title images. The html page contains the four parts of the Image titles which will animate when mouse is hovered on any of the four parts of the image title.

kwicksSlidingBox.html

<html>
<head>
<title>Kwicks Examples</title>

<link rel="stylesheet" type="text/css" href="kwicksSlidingBox/kwicks.css" />
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="kwicksSlidingBox/jquery.easing.1.3.js" type="text/javascript">
</script>

<script src="kwicksSlidingBox/jquery.kwicks-1.5.1.pack.js"
type="text/javascript">
</script>

<script type="text/javascript">
$().ready(function() {
$('#example1 .kwicks').kwicks({
max: 200,
spacing: 5
});
});
</script>
</head>

<body>
<h1>kwicks sliding Image Title </h1>
<div id="example1">
<ul class="kwicks">

<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
</ul>
</div>

</body>
</html>

 OUTPUT

Initial state :

When you hover on any part :

Download Source Code

Click here to see demo

Advertisements

Ads

Posted on: August 14, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Ads

Advertisement