MooTools插件

当前位置:首页>Mootools>MooTools插件>使用Flash插件、Mootools ,XML实现图片的动态切换

使用Flash插件、Mootools ,XML实现图片的动态切换

时间:2015-06-18 09:27来源:网络整理 作者:KKWL 点击:
目前在给一个朋友做一个简单网站。首页要动态切换图片。 我的思路是: 1、前台Flash插件实现。 2、数据获取使用Mootools的Request.JSON,数据格式是JSON格式。(个人比较偏好Mootools,喜欢M

目前在给一个朋友做一个简单网站。首页要动态切换图片。

我的思路是:

1、前台Flash插件实现。

2、数据获取使用Mootools的Request.JSON,数据格式是JSON格式。(个人比较偏好Mootools,喜欢Mootools的simple not dirty)

3、数据存储用XML。原因是1)数据较小,没必要放到数据库里面。2)想学习XML的操作方法。

4、可以维护XML数据

不废话了,上图先。

image

上图使用Flash插件实现的,数据是通过Mootools的Ajax方法获取的。

前台代码:

<script type="text/javascript"> var focus_width=900 var focus_height=569 var text_height=0 var swf_height = focus_height+text_height var pics=""; var links=""; var texts="" var i=0; //通过Mootools的Ajax获取数据 var jsonRequest = new Request.JSON({url: 'getImagesJson.aspx', async:false,//同步调用,因为后面flash插件代码是js输出的,异步调用数据加载不上去 onSuccess: function(PicJson,text){ for(i=0;i<PicJson.length-1;i++) { pics=pics+PicJson[i].src+"|"; texts=texts+PicJson[i].description+"|"; // links=links+PicJson[i].url+"|"; } pics=pics+PicJson[i].src; texts=texts+PicJson[i].description; // links=links+PicJson[i].url; }, onError: function (text, error) { alert(text.value); alert(error.value); }     }); jsonRequest.send();   //在页面输出flash插件代码 document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"str">'"str">'">'); document.write('<param value="sameDomain"><param value="images/focus.swf"><param value="high"><param value="ffffff">'); document.write('<param value="false"><param name=wmode value="opaque">'); document.write('<param value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">'); document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high"str">'"str">'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>'); </script>

Ajax获取数据页面(getImagesJson.aspx)

注意前台只保留:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="getImagesJson.aspx.cs" Inherits="getImagesJson" %>

后台代码:

using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using Newtonsoft.Json; using System.Collections.Generic; using System.Xml;   getImagesJson : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if(!IsPostBack) { string filePath = Server.MapPath("xml/PicShow.xml"); XDocument doc = XDocument.Load(filePath); var item = from p in doc.Root.Elements() orderby int.Parse(p.Element("order").Value) select new { name = p.Element("name").Value, description = p.Element("description").Value, src = p.Element("src").Value, url = p.Element("url").Value, order = p.Element("order").Value }; XmlDocument document = new XmlDocument(); document.Load(filePath); document.SelectSingleNode("pictures"); int i = 0; string strJson = "["; for ( i = 0; i < item.Count()-1;i++ ) { strJson = strJson+"{\"name\":\"" + item.ElementAt(i).name + "\",\"description\":\"" + item.ElementAt(i).description + "\",\"src\":\"UploadFiles/hotPics/" + item.ElementAt(i).src.ToString() + "\",\"url\":\"" + item.ElementAt(i).url + "\"},"; } //strJson = strJson + "{name:'" + item.ElementAt(0).name + "',description:'" + item.ElementAt(0).description + "',src:'" + item.ElementAt(0).src + "',url:'" + item.ElementAt(0).url + "'}}"; strJson = strJson + "{\"name\":\"" + item.ElementAt(i).name + "\",\"description\":\"" + item.ElementAt(i).description + "\",\"src\":\"UploadFiles/hotPics/" + item.ElementAt(i).src.ToString() + "\",\"url\":\"" + item.ElementAt(i).url + "\"}]"; Response.Write(strJson); } } }

其中:PicShow.xml如下:

------分隔线----------------------------