Home>

This is a jQuery-like sliding window that mimics the homepage of Microsoft.After the mouse is over,The window will grow to the left,After the mouse is removed, the original state is restored.Found on the official Microsoft website,Looking at the code,I think it's easy to buckle down,Don't dare to enjoy it alone.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery mimics the homepage of a mouse-sensitive sliding window</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.box {width:100px;height:100px;position:absolute;right:0;color:#fff;}
.box1 {top:100px;background:#000;}
.box2 {top:250px;background:#333;}
.box3 {top:400px;background:#666;}
.box4 {top:550px;background:#999;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
</head>
<body>
<div>application</div>
<div>Download</div>
<div>windows phone</div>
<div>office</div>
<script type="text/javascript">
$(". box"). each (function () {
 $(this) .hover (function () {
  $(this) .stop (). animate ({width:"150"}, 1000);
 }, function () {
  $(this) .stop (). animate ({width:"100"}, 1000);
 });
});
</script>
</body>
</html>
  • Previous jQuery round trip city and date query examples explain
  • Next How to configure multiple domain names under WampServer