以下为模板代码：其中productthumb为图片在数据库中的地址信息；generalid为商品的ID
<?xml version="1.0" encoding="utf-8"?>
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:pe="labelproc" exclude-result-prefixes="pe">
<xsl:output method="html" />
<xsl:param name="shownum" />
<xsl:param name="titlelen" />
<xsl:param name="border" />
<xsl:param name="showeliteolny" />
<xsl:template match="/">
<xsl:if test="count(/NewDataSet/Table)=0" >
<ul>
<li>没有相关内容!</li>
</ul>
</xsl:if>
<ul>
<xsl:for-each select="/NewDataSet/Table">
<li>
<!-- 图片及链接开始 -->
<div class="pe_u_thumb">
<a>
<xsl:attribute name="href">
<xsl:value-of select="pe:GetInfoPath(generalid)" />
</xsl:attribute>
<xsl:element name="img">
<xsl:attribute name="src">
<!-- 判断模型属性输出图片 -->
<xsl:choose>
<xsl:when test="string-length(productthumb)=0">
<xsl:value-of select="pe:UpLoadDir()" />nopic.gif
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="pe:ConvertAbsolutePath(productthumb)"/>
</xsl:otherwise>
</xsl:choose>
<!-- 图片属性 -->
</xsl:attribute>
<xsl:attribute name="border">0</xsl:attribute>
</xsl:element>
</a>
</div>
<!-- 图片及链接结束 -->
<!-- 标题文字及链接开始 -->
<div class="pe_u_thumb_title">
<a>
<xsl:attribute name="href">
<xsl:value-of select="pe:GetInfoPath(generalid)" />
</xsl:attribute>
<xsl:value-of disable-output-escaping="yes" select="title" />
</a>
</div>
<!-- 标题文字及链接结束 -->
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:transform>
拟将放入的JS脚本代码如下：
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
var ts = gg[i];
ts.onclick = function(event){
event = event || window.event;
ei.style.display = "block";
ei.innerHTML = '<img src="' + this.src + '" />';
ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function(){
ei.innerHTML = "";
ei.style.display = "none";
}
}
</script>
脚本的含义是将鼠标点在小图上，可以显示出大图来。希望各位给予帮助和指点，谢谢。
