新建一个区块,最好放至于页脚。
注意以下红色的地方,改成你自己的模版名字。
最后把js和css文件放置于你的模版下面,注意路径是否正确。
<!--右侧悬浮菜单开始--> <!-- online qq start --> <link href="/sites/all/themes/impact_theme/css/online.css" rel="stylesheet" type="text/css" /> <div id="online_qq_layer"> <div id="online_qq_tab"> <div class="online_icon"> <a title="" id="floatShow" style="display: block;" href="javascript:void(0);"> </a> <a title="" id="floatHide" style="display: none;" href="javascript:void(0);"> </a> </div><!--online_icon end--> </div> <div id="onlineService"> <div class="online_windows overz"> <div class="online_w_top"></div><!--online_w_top end--> <div class="online_w_c overz"> <div class="online_bar expand" id="onlineSort1"> <h2><a onclick="changeOnline(1)">在线QQ客服</a></h2> <div class="online_content overz" id="onlineType1"> <ul class="overz"> <li><a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&sid=123456789&o=www.drupalchina.cn&q=7', '_blank', 'height=544,width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" class="qq_icon">企业QQ交谈</a></li> <li>企业QQ: <a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&sid=123456789&o=www.drupalchina.cn&q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">123456789</a></li> </ul> </div><!--online_content end--> </div><!--online_bar end--> <div class="online_bar collapse" id="onlineSort2"> <h2><a onclick="changeOnline(2)">www.drupalchina.cn</a></h2> <div class="online_content overz" id="onlineType2"> <ul class="overz"> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> </ul> </div> </div><!--online_bar end--> <div class="online_bar collapse" id="onlineSort3"> <h2><a onclick="changeOnline(3)">ys.drupalchina.cn</a></h2> <div class="online_content overz" id="onlineType3"> <ul class="overz"> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> </ul> </div> </div><!--online_bar end--> <div class="online_bar collapse" id="onlineSort4"> <h2><a onclick="changeOnline(4)">龙马是好人</a></h2> <div class="online_content overz" id="onlineType4"> <ul class="overz"> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> </ul> </div> </div><!--online_bar end--> <div class="online_bar collapse" id="onlineSort5"> <h2><a onclick="changeOnline(5)">网站推广</a></h2> <div class="online_content overz" id="onlineType5"> <ul class="overz"> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> <li><a href="http://www.drupalchina.cn">drupal中国</a></li> </ul> </div> </div><!--online_bar end--> <div class="online_bar collapse" id="onlineSort6"> <h2><a onclick="changeOnline(6)">龙马请喝酒(IDC)</a></h2> <div class="online_content overz" id="onlineType6"> <ul class="overz"> <li><a class="qqlink" href="javascript:void(0);" onclick="javascript:window.open('tencent://message/?uin=123456789&Site=http://www.drupalchina.cn&Menu=yes;', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');"><img src="/sites/all/themes/impact_theme/img/qqs_1.gif" border="0">123456789</a></li> </ul> <ul class="overz"> <li><a class="qqlink" href="javascript:void(0);" onclick="javascript:window.open('tencent://message/?uin=123456789&Site=http://www.drupalchina.cn&Menu=yes;', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');"><img src="/sites/all/themes/impact_theme/img/qqs_1.gif" border="0">123456789</a></li> </ul> </div> </div><!--online_bar end--> </div><!--online_w_c end--> <div class="online_w_bottom"></div><!--online_w_bottom end--> </div><!--online_windows end--> </div> </div> <!--JS代码开始--> <script type="text/javascript" src="/sites/all/themes/impact_theme/js/jquery-1.8.3.min.js"></script> <!--JS代码结束--> <script> function changeOnline(num) { if (isNaN(num) && num == "") return; for (var i = 1; i <=6 ; i++) { if (i == num) { document.getElementById("onlineSort" + i).className = "online_bar expand"; document.getElementById("onlineType" + i).style.display = "block"; } else { document.getElementById("onlineSort" + i).className = "online_bar collapse"; document.getElementById("onlineType" + i).style.display = "none"; } } } $(document).ready(function(){ $("#floatShow").bind("mousemove",function(){ $('#onlineService').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#onlineService').show(); });$('#floatShow').attr ('style','display:none');$('#floatHide').attr('style','display:block'); }); $("#online_qq_layer").bind("mouseleave",function(){ $('#onlineService').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#onlineService').hide(); });$('#floatShow').attr ('style','display:block');$('#floatHide').attr('style','display:none'); }); //$(window).scroll(function(){ //$('#online_qq_layer').stop().animate({top:$(document).scrollTop() + $("#online_qq_layer").height()}, 100) //}); }); </script> <!-- online qq end --> <!--右侧悬浮菜单结束-->
Drupal 版本
有一个小问题请教一下
代码用了之后会有这样一种情况,就是在鼠标快速划过图标后,整个块会反复出来,收回好几次,这是怎么回事?
(无主题)