Discuz! onmouseover="showMenu()"悬浮菜单函数使用教程

首先看一下图示：

就像上面两张图中的悬浮提示信息，带有漂亮的箭头。

接下来我们分步骤的来讲解！

一、触发该浮动Tip的JS函数：showMenu()

static\js\common.js文件872行，就是这个函数的定义。这段函数你看不懂没关系，会使用就行了，下面我们来讲解如何使用。

二、showMenu()的使用方法：

上面降到的这个函数定义的JS文件，它在DZ的核心JS中，所以我们使用的时候不必重新载入文件，因为系统已经早帮你加载过了，所以直接使用就可以，但是前提条件是必须在DZ系统中，嫌斗旦比如DZ的任何页面模版文件中，插件、单页的模版文件中等等（点击查看怎么制作Discuz!单页），超出DZ系统意外，就不能使用了。

首先，得明确，这个效果必须由两部分组成：

1、显示层（直接在模版中显示的内容，鼠标移动上去后触发该浮动层）；

2、隐藏悬浮层（这个默认是隐藏的，不显示的，只有鼠标放在显示层上，才会触发显示）。

所以，我们分别建立两个组成部分。

效果如下图芹扰：

当鼠标放在文字上时，悬浮层激活，显示出来。

需要注意的是：

上面讲的是函数的基础功能，下面我们开始细化讲解，将悬浮美化，带箭头。

三、带箭头的悬浮Tip

看上面图片效果，也许d出层的位置和箭头的位置并不是我们理想的位置，可以调节 <div id="test_menu" class="tip tip_4" style="display: none">和 <div class="tip_horn"></div>这两个层的CSS样式，左边加入距离就可以微调，比如：

看上面图片，悬浮d出的位置是不是向左微移了一点，这里的margin-left:-100px就是说向左移动100像素

同理，箭头要向右移动，如下： <div class="tip_horn" style="margin-left:110px"></div>

如上图销锋，箭头已经右移了110个像素。

另外，如果要修改d出浮动层的宽度，高度，也可以在那个区域加入CSS，定义宽度，高度值。

控制幻灯片js文件是static/js/ common_extra.js 标题灰条透明度是 .slideshow span.title{background:rgba(0,0,0,0.3)}把里面的0.3该成1就是不透明,0.3前面的0,0,0 表示黑顷悔色雀友正(rgb表示告饥的)

common.js跟普通的js包含文件早春并没有其他不一样,主要是一些javascript经常要用到的函数,也定义了一些包括浏览器兼容,cookie *** 作,字符串函数扩展,图片 *** 作等脚本,都是比较简单的函数扩展,直接看代码比较容易理解有编程基础的应该清楚程序头文件的作用,他就相当于javascript的一个头文件,为了具有更广泛的通用性,一般不调用其他文件,因此这个文件也可以直接用于其他页面js的扩展调用其尺睁燃中的函数大多是为了基于代陵虚码重用的目的方便在页面中调用,每次版本更新对这个文件的修改除了某些函数算法的优化,还要应对程序的扩展而对函数调用接口的更新,跟程序头文件的 *** 作方式类似.

---