科讯CMS图片浏览和空间相册不兼容火狐的终级解决教程-领先建站CMS提供服务商我们专注于CMS建站产品的研发

13932 查看	33 回复

主题：科讯CMS图片浏览和空间相册不兼容火狐的终级解决教程 [收藏主题] 本贴被认定为精华

转到：

xyjyjlcy 当前离线

59 主题	0 广播	3 粉丝

级别:学前班

用户积分:259 分
登录次数:43 次
注册时间:2011/12/28
最后登录:2016/11/21

xyjyjlcy 发表于：2012/3/30 17:22:00 | 只看该作者查看该作者主题楼主

做线上考试培训就选#科汛网校

一、存在问题：

使用科讯测试时发现，图片新闻的浏览，还有会员空间相册等，在IE下正常，但是火狐下不正常，表现为图片新闻在火狐下不能切换，也不出左右提示光标，在会员中心的相册中，也同样存在此类问题。

二、问题分析：

存在以上问题一般为JS的代码不兼容火狐造成的，通过代码分析，主要有两个文件需要修改，一个是位于\Config\Picturelabel.xml文件，这是一个标签文件，主要用于图片标签的调用和浏览。另外一个文件是位于\KS_Cls\Kesion.SpaceApp.asp文件，是空间主类文件，空间相册修改位于此文件中。

三、修改兼容火狐的方法：（共三部分，代码相同，\Config\Picturelabel.xml两段，\KS_Cls\Kesion.SpaceApp.asp文件一段）

打开\Config\Picturelabel.xml文件，共有两段内容需要修改，以其中一段内容为例：

找到以下代码：

复制代码

function upNext(bigimg){
var lefturl = '{$PrevUrl}';
var righturl = '{$NextUrl}';
var imgurl = righturl;
var width = bigimg.width;
var height = bigimg.height;
bigimg.onmousemove=function(){
if(event.offsetX<width/2){//event.offsetX是出现问题的主要原因，因为火狐不支持这个属性
bigimg.style.cursor = 'url({$GetSiteUrl}images/default/arr_left.cur),auto';
imgurl = lefturl;
}else{
bigimg.style.cursor = 'url({$GetSiteUrl}images/default/arr_right.cur),auto';
imgurl = righturl;
}
}
bigimg.onmouseup=function(){
top.location=imgurl;
}
}

修改为：

复制代码

function upNext(bigimg){
var lefturl = '{$PrevUrl}';
var righturl = '{$NextUrl}';
var imgurl = righturl;
//var width = bigimg.width;
//var height = bigimg.height;
//bigimg.onmousemove=function(){
//if(event.offsetX<width/2){
//兼容火狐修改开始，上面的4行不兼容，没有用，关闭掉
bigimg.onmousemove=function(e){
var e=window.event || e,
posX=(e.offsetX==undefined) ? getOffset(e).offsetX : e.offsetX ;//通过别的方法获得,关键所在
if(posX<bigimg.width/2){
//兼容火狐修改结束，到这里修改主函数就完成了，还需要其它的过程来获得event.offsetX相同的结果
//event.offsetX只在IE支持，其它浏览器不支持，它是获得当前对象的鼠标左右移动的距离。
//火狐中没有这个函数，但是需要左右光标提示切换，就需要通过别的方式获得如event.offsetX同样的结果
//但是很麻烦的问题出现了，火狐等浏览器的event.layerX是不支持相对距离的，它是从网页最左边算起的，
//于是想到了办法，就是利用一个绝对定位的标签来规定好起点，接着看后面的绿字部分
bigimg.style.cursor = 'url({$GetSiteUrl}images/default/arr_left.cur),auto';
imgurl = lefturl;
}else{
bigimg.style.cursor = 'url({$GetSiteUrl}images/default/arr_right.cur),auto';
imgurl = righturl;
}
}
bigimg.onmouseup=function(){
top.location=imgurl;
}
}

找到代码：

复制代码

<div class="defaultimagesrc"><Img
onload="javascript:resizepic(this)" onmouseover="upNext(this)"
src="{$DefaultImageSrc}" border="0"></div>

修改为：

复制代码

<style type="text/css">
.ruler{position:relative;} /*设置一个绝对定位CSS，在下面的IMG中调用*/
</style>
<div class="defaultimagesrc"><Img class="ruler" onload="javascript:resizepic(this)" onmouseover="upNext(this)" src="{$DefaultImageSrc}" border="0"></div>

到这里，这个函数的修改就结束了，但在大家应该注意到，在这个新的兼容过程调用中，用到了一个新的函数getOffset(e)它的代码是什么呢？

本文提供了另需要的函数源代码如下：（同时提供了科讯源文件修复下载，不会改的可以下载文件覆盖）

复制代码

<script type='text/javascript'>
//兼容火狐加入开始，这是一段万能代码，以后大家用于其它方面
function getOffset(e)
{
var target = e.target;
if (target.offsetLeft == undefined)
{
target = target.parentNode;
}
var pageCoord = getPageCoord(target);
var eventCoord =
{ //计算鼠标位置（触发元素与窗口的距离）
x: window.pageXOffset + e.clientX,
y: window.pageYOffset + e.clientY
};
var offset =
{
offsetX: eventCoord.x - pageCoord.x,
offsetY: eventCoord.y - pageCoord.y
};
return offset;
}
function getPageCoord(element) //计算从触发到root间所有元素的offsetLeft值之和。
{
var coord = {x: 0, y: 0};
while (element)
{
coord.x += element.offsetLeft;
coord.y += element.offsetTop;
element = element.offsetParent;
}
return coord;
}
//兼容火狐加入结束
</script>

修改好的文件下载：（通过以上代码，完全可以自己动手修改就可以了，懒人可以下载下面的链接）

以下内容只有回复后才可以浏览,请先登录！

做官网就用科汛智能建站系统!

支持(0) |

反对(0)

顶端

底部

xyjyjlcy 当前离线

59 主题	0 广播	3 粉丝

级别:学前班

用户积分:259 分
登录次数:43 次
注册时间:2011/12/28
最后登录:2016/11/21

xyjyjlcy 发表于：2012/3/30 17:44:00 | 只看该作者查看该作者主题沙发

做线上考试培训就选#科汛网校

对了，刚想起来科讯是有两种文件类型的，上面发布的下载是国标码的，对于使用UTF-8编辑的朋友，自己转一下就行了，也可以使用记事本打开你原来对应的UTF-8文件，再把以上下载的文件内容粘贴到里面保存就可以了，这样就格式就自动变为你的UTF-8编辑了。如此简单，所以就不重复发了。
本修改对应的版本为科讯CMS V8.03免费版，商业版的用户不要使用使用下载文件覆盖，因Kesion.SpaceApp.asp文件数据库操作存在差别，需要手动修改加入以上代码。

做新职业技能培训平台就选#科汛网校

支持(0) |

反对(0)

顶端

底部