现在的位置:首页>网站SEO>正文

Jquery侧边栏滚动在线咨询样式支持微信和微播

2016年08月13日 ⁄ 共 4807字 暂无评论

一个很好看的Jquery侧边栏滚动在线咨询样式,很实用,方便拓展,当然,这里部落需要补充一下,这个肯定支持QQ、微信(点击可弹出二维码扫一扫),电话,你想看到的都有,另外,还会显示微播等相关的内容.不过,您需要进行相应的修改才能拿过去使用,当然,其实要修改的地方也不多,毕竟有现成的js了.

首先来看一下效果,如下图:

Jquery侧边栏滚动在线咨询样式支持微信和微播

需要这个功能的朋友,可以去部落的百度网盘上下载源代码,下载地址是:由此直达.提取码:d262

当然,还是一起来看看代码:

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,是引用外部的,您可以放到指定的其它地方,比如存到七牛,这个js的内容可以直接下载:由此直达.

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.     windowwindow.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.             speedspeed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  48.             if (obj.offsetLeft == target) {
  49.                 clearInterval(timer);
  50.             } else {
  51.                 objobj.style.right = obj.offsetLeft + speed + "px";
  52.             }
  53.         }
  54.         if (direction == "top") {
  55.             speed = (target - obj.offsetTop) / 8;
  56.             speedspeed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  57.             if (obj.offsetTop == target) {
  58.                 clearInterval(timer);
  59.             } else {
  60.                 objobj.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. });

 

在免费部落的网站中,与互联网金融骗局相关的话题还有:

1.给wordpress博客添加有事你Q我在线QQ联络功能

2..wordpress博客添加一键加入QQ群功能

 

小结

文章中的方法来源自网络,由免费部落整理发布.

对于一般的个人站,这个其实没有多少意义,部落曾经也很想做一个这样的功能,但后来一想,确实用不上,但如果是企业站,或者您的网站上有收费内容的话,可以试着做一下这个功能.

给我留言