ecshop 2.7.2 商品放大镜 求救！！！

a511900703 2011-06-21 05:08:31
在网上找了很多关于着方面的资料。但是没效果，按照官方论坛上面别人说的一步一步做，也还是不行，把别人做好了的模板下载下来，直接运行就没问题，但是把goods.dwt页以及相关文件复制到我的本地项目就不行了（完全没有放大镜的效果，其余的正常）。谁能教教我该咋弄！万分感激。

我弄了一个纯js的放大镜 放到模板上面也没用，是配置问题，还是其余的什么原因。

想知道该怎么解决！！解决立马给分。
...全文
1026 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
石家庄用友 2012-03-01
  • 打赏
  • 举报
 回复
我的除了产品缩略图第一个不管事，别的还行，这是什么原因啊
a511900703 2011-06-22
  • 打赏
  • 举报
 回复
这个是我在网上找的 放大镜效果的 js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>放大镜 - 妙味课堂 - www.miaov.com</title>
<style type="text/css">
#div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }
#div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; }
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 315px; width:350px; height:350px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }
</style>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aTmp=[];
var i=0;

for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aTmp.push(aEle[i]);
}
}

return aTmp;
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oMark=getByClass(oDiv, 'mark')[0];
var oFloat=getByClass(oDiv, 'float_layer')[0];
var oBig=getByClass(oDiv, 'big_pic')[0];
var oSmall=getByClass(oDiv, 'small_pic')[0];
var oImg=oBig.getElementsByTagName('img')[0];

oMark.onmouseover=function ()
{
oFloat.style.display='block';
oBig.style.display='block';
};

oMark.onmouseout=function ()
{
oFloat.style.display='none';
oBig.style.display='none';
};

oMark.onmousemove=function (ev)
{
var oEvent=ev||event;

var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;

if(l<0)
{
l=0;
}
else if(l>oMark.offsetWidth-oFloat.offsetWidth)
{
l=oMark.offsetWidth-oFloat.offsetWidth;
}

if(t<0)
{
t=0;
}
else if(t>oMark.offsetHeight-oFloat.offsetHeight)
{
t=oMark.offsetHeight-oFloat.offsetHeight;
}

oFloat.style.left=l+'px';
oFloat.style.top=t+'px';

var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);

oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
};
};
</script>
</head>
<body>
<div id="div1">
<div class="small_pic">
<span class="mark"></span>
<span class="float_layer"></span>
<img src="http://localhost:8081/gouwu/images/201106/goods_img/53_G_1307403957403.jpg" alt="妙味课堂 - 放大镜图片一" longdesc="http://www.miaov.com" width="200" heigth="200" />
</div>
<div class="big_pic">
<img src="http://localhost:8081/gouwu/images/201106/goods_img/53_G_1307403957403.jpg" alt="妙味课堂 - 放大镜图片二" longdesc="http://www.miaov.com" />
</div>
</div>
</body>
</html>


这个是我goods.dwt 模板页调用
<style type="text/css">
#div1 { width: 248px; height: 310px; padding: 5px; border: 1px solid #ccc; position: relative; }
#div1 .small_pic { width: 248px; height: 310px; background: #eee; position: relative; }
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 315px; width:350px; height:350px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }
</style>
<script type="text/javascript" language="javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aTmp=[];
var i=0;

for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aTmp.push(aEle[i]);
}
}

return aTmp;
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oMark=getByClass(oDiv, 'mark')[0];
var oFloat=getByClass(oDiv, 'float_layer')[0];
var oBig=getByClass(oDiv, 'big_pic')[0];
var oSmall=getByClass(oDiv, 'small_pic')[0];
var oImg=oBig.getElementsByTagName('img')[0];

oMark.onmouseover=function ()
{
oFloat.style.display='block';
oBig.style.display='block';
};

oMark.onmouseout=function ()
{
oFloat.style.display='none';
oBig.style.display='none';
};

oMark.onmousemove=function (ev)
{
var oEvent=ev||event;

var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;

if(l<0)
{
l=0;
}
else if(l>oMark.offsetWidth-oFloat.offsetWidth)
{
l=oMark.offsetWidth-oFloat.offsetWidth;
}

if(t<0)
{
t=0;
}
else if(t>oMark.offsetHeight-oFloat.offsetHeight)
{
t=oMark.offsetHeight-oFloat.offsetHeight;
}

oFloat.style.left=l+'px';
oFloat.style.top=t+'px';

var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);

oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
};
};
</script>

<!--其中调用放大镜的一段代码-->
<!-- {if $pictures}-->
<div id="div1">
<div class="small_pic">
<span class="mark"></span>
<span class="float_layer"></span>
<img src="{$goods.goods_img}" width="248" height="310"/>
</div>
<div class="big_pic">
<img src="{$goods.goods_img}"/>
</div>
</div>
<!-- {/if}-->


帮帮忙啊，各位！
okgoood 2011-06-22
  • 打赏
  • 举报
 回复
xuzuning 2011-06-22
  • 打赏
  • 举报
 回复
js 中有冲突或标记的 id 不对
没有代码，也不好说什么
a511900703 2011-06-22
  • 打赏
  • 举报
 回复
不能沉啊，顶一个！
xuzuning 2011-06-22
  • 打赏
  • 举报
 回复
把 goods.dwt 当做网页执行，没有发现错误
与上面的“放大镜”效果一样，这证明代码并无错误

你可能在多处使用了“调用放大镜的一段代码”
a511900703 2011-06-21
  • 打赏
  • 举报
 回复
不能沉啊，顶一个！
a511900703 2011-06-21
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 phpnewnew 的回复:]
网上不少Jquery的应该可以用的吧？JS我不清楚.
[/Quote]

先谢谢了。

不是说 jquery 跟 ecshop的 josn 冲突么，我怕麻烦就没找jquery的，在论坛上面看他们演示的放大镜，我照着一步一步做也不行，实在是快崩溃了。后来我就自己找了一个 纯js特效做的放大镜效果，也不行，实在不知道该咋整了啊。 模板是公司美工自己做的。郁闷啊
黄袍披身 2011-06-21
  • 打赏
  • 举报
 回复
网上不少Jquery的应该可以用的吧？JS我不清楚.
ecshop2.7.2数据字典
ecshop 数据字典 ecshop2.7.2数据字典
ecshop2.7.2使用手册ppt版
ecshop2.7.2使用手册，ppt版本的
Vue.js 2.6 核心技术第五季：经典电商项目ECShop实战课程
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链...
时尚起义ecshop2.7.2模板免费下载
时尚起义ecshop2.7.2模板免费下载想要列多模板更多东西请点击我的会员名，你可以看到更多的东西哦，包你喜欢
ecshop 2.7.2数据字典
ecshop 2.7.2 数据字典比较完善的数据字典
基础编程

21,886

社区成员

140,364

社区内容

发帖
与我相关
我的任务
社区描述
从PHP安装配置，PHP入门，PHP基础到PHP应用
社区管理员
  • 基础编程社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章