主页 > 程序开发 > JS特效 > 动感jquery右边浮动商务通样式

动感jquery右边浮动商务通样式

更新时间:2015-08-18 13:16  来源:电脑技术网  作者:电脑技术网  查看评论
文章目录索引
文章简介
动感jquery右边浮动商务通样式代码
动感jquery右边浮动商务通样式演示地址

文章简介

这是工作时客户的某个要求做的一个动感jquery右边浮动商务通样式,做完后,感觉可能以后可能还会用得到,而且似乎其它网站也有类似的功能,这里就贴出来,也许某个网友也会用到,避免他也写那么多代码。本文中的jquery调用的是百度的cnd加速库。

动感jquery右边浮动商务通样式代码

电脑技术网注:作者这里引用的是百度cnd加速库的jquery2.1.4版本的,如果你使用的是低版本的话,可能会引起卡顿的情况。

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>动感jquery右边浮动商务通</title> 
  6. <script type='text/javascript' src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js '></script> 
  7. <style> 
  8. @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} 
  9. h1, h2, h3, h4, h5, strong, b{font-size: inherit;font-weight: normal;} 
  10. ol, ul, li{list-style: none;} 
  11. a{color: #5c5c5c} 
  12. a:link, a:visited{text-decoration: none;} 
  13. .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;} 
  14. .swt_right ul{} 
  15. .swt_right li{width: 131px;height: 50px;right: 0px;position: absolute;} 
  16. .swt_right a{width: 131px;} 
  17. .swt_right1{top: 0px;} 
  18. .swt_right1 a{height: 49px;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) no-repeat;} 
  19. .swt_right1 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) no-repeat;} 
  20. .swt_right2{top: 59px;} 
  21. .swt_right2 a{height: 49px;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) 0px -49px no-repeat;} 
  22. .swt_right2 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) 0px -49px no-repeat;} 
  23. .swt_right3{top: 118px;} 
  24. .swt_right3 a{height: 100%;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) 0px -98px no-repeat;} 
  25. .swt_right3 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) 0px -98px no-repeat;} 
  26. .swt_right4{top: 177px} 
  27. .swt_right4 a{height: 49px;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) 0px -147px no-repeat;} 
  28. .swt_right4 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) 0px -147px no-repeat;} 
  29. .swt_right5{top: 236px;} 
  30. .swt_right5 a{height: 49px;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) 0px -196px no-repeat;} 
  31. .swt_right5 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) 0px -196px no-repeat;} 
  32. .swt_right6{top: 295px;} 
  33. .swt_right6 a{height: 49px;display: block;background: url(http://www.pc515.com/demo/52/swt-right-pic1.jpg) 0px -245px no-repeat;} 
  34. .swt_right6 .swt-hover{height: 49px;background: url(http://www.pc515.com/demo/52/swt-right-pic2.jpg) 0px -245px no-repeat;} 
  35. </style> 
  36. </head> 
  37. <body> 
  38. <h1 style="font:400 50px/2em '微软雅黑'; text-align:center;margin:20% ">电脑技术网 www.pc515.com</h1> 
  39. <ul class="swt_right" id="swt_right" style="display: block;"> 
  40.   <li class="swt_right1"><a></a></li> 
  41.   <li class="swt_right2"><a></a></li> 
  42.   <li class="swt_right3"><a></a></li> 
  43.   <li class="swt_right4"><a></a></li> 
  44.   <li class="swt_right5"><a></a></li> 
  45.   <li class="swt_right6"><a href="#"></a></li> 
  46. </ul> 
  47. <script> 
  48. if(document.getElementById('swt_right')){ 
  49.     $("#swt_right li").hover(function(){ 
  50.         $(this).children("a").addClass("swt-hover"); 
  51.         $(this).stop().animate({right:"84px"},200); 
  52.      
  53.     },function(){ 
  54.         $(this).animate({right:"0px"},200,function(){ 
  55.             $(this).stop().children("a").removeClass("swt-hover"); 
  56.         }); 
  57.     }); 
  58. </script> 
  59. <p style="height:999px"></p> 
  60. </body> 
  61. </html> 
  62. <script src="http://www.pc515.com/js/ui.js"></script> 

有关商务通 | 的文章推荐