我做的demo在附件里
问题是 每次加载页面效果都是好的,可是一改变浏览器的大小,效果就飞了,麻烦帮忙调一下
回答的时候居然不能上传附件,郁闷。我做了一下,不知道合不合你意。
直接把代码保存成html,放到你的右侧漂浮目录中就行。
[code="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Untitled Document
<br> #contact {<br> width: 189px;<br> position: fixed;<br> top: 200px;<br> right: -157px;<br> }</p> <pre><code> #contact h3 { width: 32px; height: 139px; margin: 0; padding: 0; float: left; background: url('img3-5_1.png') left top no-repeat; text-indent: -9999em; } #contact div { width: 157px; padding: 39px 0 0 0; float: right; background: url('img3-5_2.png') right top no-repeat; } #contact div ul { width: 100%; margin: 0; padding: 0 0 46px 0; background: url('img3-5_4.png') right bottom no-repeat; } #contact div ul li { width: 100%; height: 24px; list-style: none; text-align: center; background: url('img3-5_3.png') left top repeat-y; } #contact div ul li a { color: #000; font: bold 12px/24px "宋体"; text-decoration: none; } </style> <script type="text/javascript"> $(function() { var isShow = false; var isMoving = false; $('#contact').hover(function(e) { var self = $(this); if (!isMoving) { if (!isShow && parseInt(self.css('right')) < 0) { isMoving = true; self.animate({right: '+=157'}, 1000, function() { isShow = true; isMoving = false; }); } } }, function(e) { var self = $(this); if (!isMoving) { if (isShow && parseInt(self.css('right')) == 0) { isMoving = true; self.animate({right: '-=157'}, 1000, function() { isShow = false; isMoving = false; }); } } }); }); </script> </head> <body> <div id="contact"> <h3>联系方式</h3> <div> <ul> <li><a href="#">联系烈火技术</a></li> <li><a href="#">联系烈火技术</a></li> <li><a href="#">联系烈火技术</a></li> <li><a href="#">联系烈火技术</a></li> <li><a href="#">联系烈火技术</a></li> </ul> </div> </div> </body> </code></pre> <p></html><br> [/code]</p>