分享一个很好看的Jquery侧边栏滚动在线咨询样式

摘要一个很好看的Jquery侧边栏滚动在线咨询样式,很实用,方便拓展。QQ、微信(点击可弹出二维码扫一扫)、电话,你想看到的都有。底部代码直接下载。

Jquery侧边栏滚动在线咨询样式

一个很好看的Jquery侧边栏滚动在线咨询样式,很实用,方便拓展。QQ、微信(点击可弹出二维码扫一扫)、电话,你想看到的都有。底部代码直接下载。闲话少说,直接上代码。

html代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  6. <title>分享一个很好看侧边栏在线咨询</title>
  7. <script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
  8. <script src="js/scroll.js"></script>
  9. <style>
  10. *{margin:0;padding:0}
  11. </style>
  12. </head>
  13. <body>
  14. <p style="height:3000px;text-align:center;padding-top:192px;">分享一个很好看侧边栏在线咨询</p>
  15. </body>
  16. </html>

JS代码 scroll.js

  1. document.write('<style>');
  2. document.write('.mysideBar {position: absolute;z-index: 99999;left:10px;top: 190px;width: 72px;}');
  3. document.write('.mysideBar li {width:72px;height: 75px;overflow: hidden;}');
  4. document.write('.mysideBar a {display: block;height: 73px;overflow: hidden;cursor: pointer;}');
  5. document.write('.ewmLayer {text-align: center;background:url(images/ewmBg.png) repeat scroll 0 0;display: none;height: 403px;left: 50%;margin-left: -190px;margin-top: -200px;overflow: hidden; position: fixed;text-align: center;top: 50%;width: 375px;z-index: 88888}');
  6. document.write('.ewmLayer h2{color: #fff;font: 20px "微软雅黑";font-weight: 400;height: 55px;line-height: 55px;overflow: hidden;position: relative;margin: 0px;}');
  7. document.write('.ewmLayer .close {background:url(images/close.png) no-repeat scroll center center;display: block; height: 40px;overflow: hidden;position: absolute;right: 0;top: 0;width: 40px;z-index: 999999;}');
  8. document.write('.ewmLayer p{color: #fff;font: 20px "微软雅黑";text-align: center;line-height: 24px;padding-top:12px;}');
  9. document.write('</style>');
  10. document.write('<div class="mysideBar" id="myscroll">');
  11. document.write('<ul>');
  12. document.write('<li><a rel="external nofollow" href="#" target="_blank"><img src="images/nimg36_4.png" /></a></li>');
  13. document.write('<li class="wenswttel_a"><a rel="external nofollow" href="#" target="_blank"><img src="images/nimg36_3.png" /></a></li>');
  14. document.write('<li><a rel="external nofollow" href="#" target="_blank"><img src="images/swt-1-QQ.png" /></a></li>');
  15. document.write('<li><a rel="external nofollow" href="#" target="_blank"><img src="images/nimg36_1.png" /></a></li>');
  16. document.write(' <li class="showweixin"><a rel="nofollow" javascript:void(0);><img src="images/nimg36_2.png" /></a></li>');
  17. document.write(' </ul>');
  18. document.write('</div>');
  19. document.write('<div class="ewmLayer">');
  20. document.write('<h2>微信二维码<a class="close" href="javascript:;"></a></h2>');
  21. document.write('<div><img alt="" src="images/ewm_c.jpg"></div>');
  22. document.write('<p>扫一扫,尽享“美国·美孕”资讯盛宴</p>');
  23. document.write('</div>');
  24. window.onload = function() {
  25.     var myscroll = document.getElementById("myscroll");
  26. /* myscroll.onmouseover = function(){
  27.              startrun(myscroll,0,"right")
  28.              }
  29.              myscroll.onmouseout = function(){
  30.              startrun(myscroll,-100,"right")
  31.              }*/
  32.     window.onscroll = window.onresize = function() {
  33.         var scrtop = document.documentElement.scrollTop || document.body.scrollTop;
  34.         var height = document.documentElement.clientHeight || document.body.clientHeight;
  35.         var top = scrtop + (height - myscroll.offsetHeight) / 2;
  36.         top = parseInt(top);
  37.         startrun(myscroll, top, "top")
  38.     }
  39. }
  40. var timer = null;
  41. function startrun(obj, target, direction) {
  42.     clearInterval(timer);
  43.     timer = setInterval(function() {
  44.         var speed = 0;
  45.         if (direction == "right") {
  46.             speed = (target - obj.offsetLeft) / 8;
  47.             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  48.             if (obj.offsetLeft == target) {
  49.                 clearInterval(timer);
  50.             } else {
  51.                 obj.style.right = obj.offsetLeft + speed + "px";
  52.             }
  53.         }
  54.         if (direction == "top") {
  55.             speed = (target - obj.offsetTop) / 8;
  56.             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  57.             if (obj.offsetTop == target) {
  58.                 clearInterval(timer);
  59.             } else {
  60.                 obj.style.top = obj.offsetTop + speed + "px";
  61.             }
  62.         }
  63.     }, 30)
  64. };
  65. $(function() {
  66.     $('.showweixin').click(function() {
  67.         $('.ewmLayer').show();
  68.     })
  69.     $('.ewmLayer').find('.close').click(function() {
  70.         $('.ewmLayer').hide();
  71.     })
  72. });

小拼SEM博客文件下载

博客主机

给我留言

图片 表情