Home Tutorial Jquery jQuery kwicks plug-in for creation of animating image title

 
 

Share on Google+Share on Google+
jQuery kwicks plug-in for creation of animating image title
Posted on: August 14, 2010 at 12:00 AM
Advertisement
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

Advertisement

Related Tags for jQuery kwicks plug-in for creation of animating image title:


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.

Posted on: August 14, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com