这是工作时客户的某个要求做的一个动感jquery右边浮动商务通样式，做完后，感觉可能以后可能还会用得到，而且似乎其它网站也有类似的功能，这里就贴出来，也许某个网友也会用到，避免他也写那么多代码。本文中的jquery调用的是百度的cnd加速库。
电脑技术网注：作者这里引用的是百度cnd加速库的jquery2.1.4版本的，如果你使用的是低版本的话，可能会引起卡顿的情况。
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>动感jquery右边浮动商务通</title>
- <script type='text/javascript' src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js '></script>
- <style>
- @charset "utf-8";/* CSS Document */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: top;background: transparent;font-style: normal}
- h1, h2, h3, h4, h5, strong, b{font-size: inherit;font-weight: normal;}
- ol, ul, li{list-style: none;}
- a{color: #5c5c5c}
- a:link, a:visited{text-decoration: none;}
- .swt_right{display: none;width: 131px;height: 334px;position: fixed;right: -84px;top: 200px;_position: absolute; _top:expression(eval(document.documentElement.scrollTop+200));z-index: 900000;}
- .swt_right ul{}
- .swt_right li{width: 131px;height: 50px;right: 0px;position: absolute;}
- .swt_right a{width: 131px;}
- .swt_right1{top: 0px;}
- .swt_right1 a{height: 49px;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) no-repeat;}
- .swt_right1 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) no-repeat;}
- .swt_right2{top: 59px;}
- .swt_right2 a{height: 49px;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) 0px -49px no-repeat;}
- .swt_right2 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) 0px -49px no-repeat;}
- .swt_right3{top: 118px;}
- .swt_right3 a{height: 100%;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) 0px -98px no-repeat;}
- .swt_right3 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) 0px -98px no-repeat;}
- .swt_right4{top: 177px}
- .swt_right4 a{height: 49px;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) 0px -147px no-repeat;}
- .swt_right4 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) 0px -147px no-repeat;}
- .swt_right5{top: 236px;}
- .swt_right5 a{height: 49px;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) 0px -196px no-repeat;}
- .swt_right5 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) 0px -196px no-repeat;}
- .swt_right6{top: 295px;}
- .swt_right6 a{height: 49px;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) 0px -245px no-repeat;}
- .swt_right6 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) 0px -245px no-repeat;}
- </style>
- </head>
- <body>
- <h1 style="font:400 50px/2em '微软雅黑'; text-align:center;margin:20% ">电脑技术网 www.pc515.com</h1>
- <ul class="swt_right" id="swt_right" style="display: block;">
- <li class="swt_right1"><a></a></li>
- <li class="swt_right2"><a></a></li>
- <li class="swt_right3"><a></a></li>
- <li class="swt_right4"><a></a></li>
- <li class="swt_right5"><a></a></li>
- <li class="swt_right6"><a href="#"></a></li>
- </ul>
- <script>
- if(document.getElementById('swt_right')){
- $("#swt_right li").hover(function(){
- $(this).children("a").addClass("swt-hover");
- $(this).stop().animate({right:"84px"},200);
- },function(){
- $(this).animate({right:"0px"},200,function(){
- $(this).stop().children("a").removeClass("swt-hover");
- });
- });
- }
- </script>
- <p style="height:999px"></p>
- </body>
- </html>
- <script src="http://www.pc515.com/js/ui.js"></script>
