织梦系统后台二次开发功能:先放一张修改好的效果图给大家看一下,便用起来超方便,超赞的。
具体操作步骤:
找到织梦的根目录 include/dialog 目录下的文件,select_images.php 用DW打开进行编辑。
第一步:找到style 标签 修改 style样式为 如下:
目的是为了引入JS悬浮代码和调整悬浮层的样式代码。
<style> .linerow {border-bottom: 1px solid #CBD8AC;} .bb {width: 100px; height: 100px; position: absolute; z-index: 3; display: none;} .napisdiv {position: fixed; z-index: 3; display: none; margin-left: 12%; margin-top: 12%;} .napisdiv img {max-width: 260px;} </style> <script src="js/jquery.min.js"></script>
再</head>标签上面加了一个鼠标跟随功能,显示图片的JS ,以确保图片始终跟随鼠标显示。
使用 jquery.min.js 文件,可以从下面路径自行下载,或直接引用,建议还是下载到本地服务器使用,没有网络时也可以正常使用。
第二部:搜索 //End Loop 这个词,再 ?>下面加上如下JS代码,位置一定要放在这里,控制显示缩略图。
//End Loop $dh->close(); ?> <script type="text/javascript"> $('.bb').hide(); $('.zz').mousemove(function(e){ $('.bb').eq($(this).index()).show().css({ "top": e.pageY+20, "left": e.pageX+20 }).siblings("div").hide(); }); $('.zz').mouseleave(function(){ $('.bb').hide(); }); </script>
第三部:现在要修改的就是图片路径URL 文字的主要标签代码, 修改代码如下,直接复制替换就好(修改或代替原码2处)。
第1处,大约在211行左右,$line = " <tr> 下面,第2处,大约在237行左右,也是放在 $line = " <tr> 下面。
<td align='center' class='linerow' bgcolor='#F9FBF0'> <a href="#" onMouseOver="ChangeImage('$reurl');"><img src='img/picviewnone.gif' width='16' height='16' border='0' align=absmiddle></a> </td> <td class='linerow' bgcolor='#F9FBF0'> <ul class='zz'><a href=# onclick="ReturnImg('$reurl');" $lstyle><img src=img/jpg.gif border=0 width=16 height=16 align=absmiddle>$file</a></ul> </td>
如此,大功告成!主要是修改了 UL标签的class 类,来明确鼠标再哪里划过会显示出缩略图层。全宝鑫技术人员二次开发和改善的功能,希望对正在浏览的您有帮助!