jQuery + XML + XSL 相册　

最新推荐文章于 2020-09-09 19:28:34 发布

weixin_30698527

最新推荐文章于 2020-09-09 19:28:34 发布

阅读量220

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mady55/archive/2009/04/24/1442678.html

版权

示例地址如下：

http://files.cnblogs.com/mady55/jQuery+XML+XSL相册.rar

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="myworks.xsl"?>
<works>
<web>
  <pic small="images/2s.jpg" big="images/2b.jpg">Jobeller</pic>
  <pic small="images/2s.jpg" big="images/2b.jpg">1 Enyo</pic>
  <pic small="images/2s.jpg" big="images/1b.jpg">2</pic>
  <pic small="images/2s.jpg" big="images/1b.jpg">3</pic>
  <pic small="images/2s.jpg" big="images/1b.jpg">4</pic>
  <pic small="images/2s.jpg" big="images/1b.jpg">5</pic>
  <pic small="images/2s.jpg" big="images/1b.jpg">6</pic>
  <pic small="images/2s.jpg" big="images/1b.jpg">7</pic>
  <pic small="images/2s.jpg" big="images/1b.jpg">8</pic>
  <pic small="images/2s.jpg" big="images/1b.jpg">8</pic>
</web>
</works>

下面是xsl 文件

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
    <html>
      <head>
        <link rel="Stylesheet" href="css/style.css" type="text/css"/>
        <script type="text/javascript" src="js/unitpngfix.js"></script>
        <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
        <script type="text/javascript">
          var imgSrc = "";
          jQuery(document).ready(function(){

jQuery(".weblist img").click(weblist_Img_Click);
jQuery("#imgBack,#bigback").click(showbigpicHide);

          jQuery(".showbigpic").animate({
          left:"-=746px",
          opacity:"toggle"
          },1);

jQuery("#bigback").load(Img_Load);
});

          function Img_Load(){
          jQuery("#imgLoading").hide();
          jQuery("#bigback").show();
          }

function weblist_Img_Click(e)
{

          imgSrc = jQuery(e.target).parent().attr("href");
          if(jQuery(".showbigpic").is(":visible"))
          {
          showbigpicHide();
          }
          else
          {

          jQuery("#imgLoading").show();
          jQuery("#bigback").hide();
          jQuery("#bigback").attr("src",jQuery(e.target).parent().attr("href"));
          }

showbigpicShow();

return false;
}

          function showbigpicShow()
          {
          jQuery(".showbigpic").animate({
          left:'+=746px',
          opacity:"toggle"
          },500);

}

            <xsl:for-each select="works/web/pic">
              <li>
                <xsl:element name="a">

                  <xsl:attribute name="href">
                    <xsl:value-of select="@big" />
                  </xsl:attribute>

                  <xsl:attribute name="title">
                    <xsl:value-of select="." />
                  </xsl:attribute>

                  <xsl:element name="img">
                    <xsl:attribute name="src">
                      <xsl:value-of select="@small" />
                    </xsl:attribute>
                  </xsl:element>

                </xsl:element>
              </li>
            </xsl:for-each>

</ul>
<p class="clear"></p>

        </div>
      </body>
    </html>
</xsl:template>
</xsl:stylesheet>

转载于:https://www.cnblogs.com/mady55/archive/2009/04/24/1442678.html

weixin_30698527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery + XML + XSL 相册　

示例地址如下：http://files.cnblogs.com/mady55/jQuery+XML+XSL相册.rar<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/xsl" href="myworks.xsl"?><works><web><pic...
复制链接

扫一扫