當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

创建弹出窗口的图片展示

發(fā)布時(shí)間：2023/11/29 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了创建弹出窗口的图片展示小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本帖最后由 oisweb 于 2009-11-24 14:11 編輯

圖片有點(diǎn)大了顯示不是很好自己看著辦吧
1 創(chuàng)建工程設(shè)置頁(yè)面屬性

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
? ???horizontalAlign="center"??verticalAlign="middle" >

2 創(chuàng)建xml文件?讀取圖片

<?xml version="1.0"?>
<gallery>

? ? <movie>
? ? ? ? ? ? <pic>1.jpg</pic>
? ? ? ? ? ? <title>騰焰飛芒</title>
? ? ? ? ? ? <date>騰焰飛芒</date>
? ? </movie>
? ??
? ? <movie>
? ? ? ? ? ? <pic>2.jpg</pic>
? ? ? ? ? ? <title>凌波微步</title>
? ? ? ? ? ? <date>凌波微步</date>
? ? </movie>

? ? <movie>
? ? ? ? ? ? <pic>3.jpg</pic>
? ? ? ? ? ? <title>飛俠失足</title>
? ? ? ? ? ? <date>飛俠失足</date>
? ? </movie>
? ??
? ?? ???<movie>
? ? ? ? ? ? <pic>4.jpg</pic>
? ? ? ? ? ? <title>得失寸心知</title>
? ? ? ? ? ? <date>得失寸心知</date>
? ? </movie>
? ??
? ? <movie>
? ? ? ? ? ? <pic>5.jpg</pic>
? ? ? ? ? ? <title>直沖云霄</title>
? ? ? ? ? ? <date>直沖云霄</date>
? ? </movie>

? ? <movie>
? ? ? ? ? ? <pic>6.jpg</pic>
? ? ? ? ? ? <title>勢(shì)不可擋</title>
? ? ? ? ? ? <date>勢(shì)不可擋</date>
? ? </movie>? ?
? ??
? ???<movie>
? ? ? ? ? ? <pic>7.jpg</pic>
? ? ? ? ? ? <title>鷹擊長(zhǎng)空</title>
? ? ? ? ? ? <date>鷹擊長(zhǎng)空</date>
? ? </movie>
? ??
? ? <movie>
? ? ? ? ? ? <pic>8.jpg</pic>
? ? ? ? ? ? <title>凝神聚氣</title>
? ? ? ? ? ? <date>凝神聚氣</date>
? ? </movie>

? ? <movie>
? ? ? ? ? ? <pic>9.jpg</pic>
? ? ? ? ? ? <title>風(fēng)激電飛</title>
? ? ? ? ? ? <date>風(fēng)激電飛</date>
? ? </movie>? ??
? ??
? ? <movie>
? ? ? ? ? ? <pic>10.jpg</pic>
? ? ? ? ? ? <title>百萬(wàn)噸暴扣</title>
? ? ? ? ? ? <date>百萬(wàn)噸暴扣</date>
? ? </movie>
? ??
? ? <movie>
? ? ? ? ? ? <pic>11.jpg</pic>
? ? ? ? ? ? <title>虎視眈眈</title>
? ? ? ? ? ? <date>虎視眈眈</date>
? ? </movie>

? ? <movie>
? ? ? ? ? ? <pic>12.jpg</pic>
? ? ? ? ? ? <title>一意專(zhuān)心</title>
? ? ? ? ? ? <date>一意專(zhuān)心</date>
? ? </movie>
</gallery>

3 創(chuàng)建圖片文件夾 images 放要展示的圖片
4 加入<mx:HTTPService id="service" url="images.xml" result="serviceHandler(event)"/>
5好開(kāi)始寫(xiě)代碼把先as吧
<mx:Script>
? ?? ???<![CDATA[
? ?? ?? ?? ?import mx.collections.ArrayCollection;
? ?? ?? ?? ?import mx.rpc.events.ResultEvent;

? ?? ?? ?? ?[Bindable]
? ?? ?? ?? ?private var movies:ArrayCollection;

? ?? ?? ?? ?private?function?serviceHandler(event:ResultEvent):void{
? ?? ?? ?? ?? ? movies = event.result.gallery.movie;
? ?? ?? ?? ?}

? ?? ???]]>
</mx:Script>

6 讀取xml數(shù)據(jù)?我們需要呼叫httpservice

頭頂加入send()方法
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
? ???horizontalAlign="center"??verticalAlign="middle"
? ???creationComplete="service.send()" >

7 縮略圖展示我們用TileList組件?

<mx:TileList id="moviesList" dataProvider="{movies}"
? ?? ???direction="horizontal"
? ?? ???width="800" height="450" rowHeight="150" columnWidth="200">
? ?? ???<mx:itemRenderer>
? ?? ?? ?? ?<mx:Component>
? ?? ?? ?? ?? ? <mx:VBox horizontalAlign="center" verticalAlign="middle">
? ?? ?? ?? ?? ?? ???<mx:Image source="images/thumbs/{data.pic}"/>
? ?? ?? ?? ?? ?? ???<mxabel text="{data.date}" />
? ?? ?? ?? ?? ? </mx:VBox>
? ?? ?? ?? ?</mx:Component>
? ?? ???</mx:itemRenderer>
? ? </mx:TileList>

8 有了縮略圖我們要最終顯示大圖片我們建一個(gè)自定義組件mx:TitleWindow
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
? ? ? ? layout="vertical" width="400" height="520"
? ? ? ? horizontalAlign="center"
? ? ? ? showCloseButton="true"
? ? ? ? close="closeWindow(event);" >

? ? ? ? <mx:Script>
? ? ? ? ? ? ? ? <![CDATA[

? ? ? ? ? ? ? ? ? ? ? ? import mx.events.CloseEvent;
? ? ? ? ? ? ? ? ? ? ? ? import mx.managers.PopUpManager;

? ? ? ? ? ? ? ? ? ? ? ? [Bindable]
? ? ? ? ? ? ? ? ? ? ? ? public var sourceImage:String;

? ? ? ? ? ? ? ? ? ? ? ? private function closeWindow(e:CloseEvent):void {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PopUpManager.removePopUp(this);
? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ]]>
? ? ? ? </mx:Script>

? ? ? ? <mx:Image source="{sourceImage}"/>

</mx:TitleWindow>
9 同時(shí)為使彈出窗口更加得心應(yīng)手，我們希望能夠關(guān)閉它，只是上按一下。為此，我們要派出一個(gè)click事件偵聽(tīng)CloseEvent。
<mx:TileList id="moviesList" dataProvider="{movies}"
? ?? ???direction="horizontal"
? ?? ???width="800" height="450" rowHeight="150" columnWidth="200"
? ?? ???click="launchPopUp(event)">
10 返回主文件增加點(diǎn)擊事件
<mx:TileList id="moviesList" dataProvider="{movies}"
? ?? ???direction="horizontal"
? ?? ???width="800" height="450" rowHeight="150" columnWidth="200"
? ?? ???click="launchPopUp(event)">

11 增加

private function launchPopUp(e:MouseEvent):void {
? ?? ???if(moviesList.selectedItem){
? ?? ?? ?? ???var win : Window = new Window();
? ?? ?? ?? ???win.sourceImage = "images/"+moviesList.selectedItem.pic;
? ?? ?? ?? ???win.title =??moviesList.selectedItem.title;
? ?? ?? ?? ???PopUpManager.addPopUp(win,this,true);
? ?? ?? ?? ???PopUpManager.centerPopUp(win);
? ?? ???}
}

12 ok ！具體看最終代碼吧圖片文件夾內(nèi)容自己加吧給出三個(gè)文件

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"?
? ???horizontalAlign="center"??verticalAlign="middle"
? ???creationComplete="service.send()" viewSourceURL="srcview/index.html">
? ??
? ? <mx:Style>? ?
? ? ? ? ? ? global{
? ? ? ???? ? ? ? ? ? ? ? modalTransparency : .8;
? ? ? ? ? ? ? ? ? ? ? ? modalTransparencyColor : #000000;
? ? ? ???? ? ? ? }? ??
? ? ? ???? ? ? ? Application{
? ? ? ???? ? ? ???? ? ? ? backgroundGradientColors: #ffffff, #ffffff;
? ?? ? ? ? ? ? ? ? ? ? ? ? backgroundGradientAlphas: 1, 1;
? ? ? ???? ? ? ? }?
? ?? ???TileList{
? ?? ?? ?? ?selectionColor:??#717070;
? ?? ?? ?? ?rollOverColor: #CCCCCC;
? ?? ?? ?? ?borderStyle : none;
? ?? ???}
? ?? ???TitleWindow{
? ? ? ???? ? ? ? ? ? ? ? borderColor : #C1C1C1;
? ? ? ???? ? ? ? ? ? ? ? borderAlpha : .8;
? ? ? ???? ? ? ? ? ? ? ? fontSize : 14;
? ? ? ???? ? ? ? ? ? ? ? fontFamily :Georgia;
? ? ? ???? ? ? ? ? ? ? ? fontWeight : bold ;
? ? ? ???? ? ? ? ? ? ? ? color : #FFFFFF;
? ? ? ???? ? ? ? }
? ? ? ???? ? ? ? Label{
? ? ? ???? ? ? ? ? ? ? ? color : #000000;
? ? ? ???? ? ? ? ? ? ? ? fontStyle : italic;?
? ? ? ???? ? ? ? }
? ? </mx:Style>
? ??
? ? <mx:Script>
? ?? ???<![CDATA[
? ?? ?? ?? ?import mx.collections.ArrayCollection;
? ?? ?? ?? ?import mx.rpc.events.ResultEvent;
? ?? ?? ?? ?import mx.managers.PopUpManager;
? ?? ?? ?? ?
? ?? ?? ?? ?[Bindable]
? ?? ?? ?? ?private var movies:ArrayCollection;
? ?? ?? ?? ?
? ?? ?? ?? ?private function serviceHandler(event:ResultEvent):void{
? ?? ?? ?? ?? ? movies = event.result.gallery.movie;
? ?? ?? ?? ?}
? ?? ?? ?? ?
? ?? ?? ?? ?private function launchPopUp(e:MouseEvent):void {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(moviesList.selectedItem){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var win : Window = new Window();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? win.sourceImage = "images/"+moviesList.selectedItem.pic;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? win.title =??moviesList.selectedItem.title;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PopUpManager.addPopUp(win,this,true);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PopUpManager.centerPopUp(win);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ?? ?? ?? ?
? ?? ???]]>
? ? </mx:Script>

? ? <mx:HTTPService id="service" url="images.xml" result="serviceHandler(event)"/>
? ? <mx:TileList id="moviesList" dataProvider="{movies}"?
? ?? ???direction="horizontal"
? ?? ???width="100%" height="100%" rowHeight="250" columnWidth="200"
? ?? ???click="launchPopUp(event)">
? ?? ???<mx:itemRenderer>
? ?? ?? ?? ?<mx:Component>
? ?? ?? ?? ?? ? <mx:VBox horizontalAlign="center" verticalAlign="middle">
? ?? ?? ?? ?? ?? ???<mx:Image source="images/thumbs/{data.pic}"/>
? ?? ?? ?? ?? ?? ???<mxabel text="{data.date}" />
? ?? ?? ?? ?? ? </mx:VBox>
? ?? ?? ?? ?</mx:Component>
? ?? ???</mx:itemRenderer>
? ? </mx:TileList>
? ?
</mx:Application>

images.xml

<?xml version="1.0"?>
<gallery>

? ? <movie>
? ? ? ? ? ? <pic>1.jpg</pic>
? ? ? ? ? ? <title>騰焰飛芒</title>
? ? ? ? ? ? <date>騰焰飛芒</date>
? ? </movie>
? ??
? ? <movie>
? ? ? ? ? ? <pic>2.jpg</pic>
? ? ? ? ? ? <title>凌波微步</title>
? ? ? ? ? ? <date>凌波微步</date>
? ? </movie>

? ? <movie>
? ? ? ? ? ? <pic>3.jpg</pic>
? ? ? ? ? ? <title>飛俠失足</title>
? ? ? ? ? ? <date>飛俠失足</date>
? ? </movie>
? ??
? ?? ???<movie>
? ? ? ? ? ? <pic>4.jpg</pic>
? ? ? ? ? ? <title>得失寸心知</title>
? ? ? ? ? ? <date>得失寸心知</date>
? ? </movie>
? ??
? ? <movie>
? ? ? ? ? ? <pic>5.jpg</pic>
? ? ? ? ? ? <title>直沖云霄</title>
? ? ? ? ? ? <date>直沖云霄</date>
? ? </movie>

? ? <movie>
? ? ? ? ? ? <pic>6.jpg</pic>
? ? ? ? ? ? <title>勢(shì)不可擋</title>
? ? ? ? ? ? <date>勢(shì)不可擋</date>
? ? </movie>? ?
? ??
? ???<movie>
? ? ? ? ? ? <pic>7.jpg</pic>
? ? ? ? ? ? <title>鷹擊長(zhǎng)空</title>
? ? ? ? ? ? <date>鷹擊長(zhǎng)空</date>
? ? </movie>
? ??
? ? <movie>
? ? ? ? ? ? <pic>8.jpg</pic>
? ? ? ? ? ? <title>凝神聚氣</title>
? ? ? ? ? ? <date>凝神聚氣</date>
? ? </movie>

? ? <movie>
? ? ? ? ? ? <pic>9.jpg</pic>
? ? ? ? ? ? <title>風(fēng)激電飛</title>
? ? ? ? ? ? <date>風(fēng)激電飛</date>
? ? </movie>? ??
? ??
? ? <movie>
? ? ? ? ? ? <pic>10.jpg</pic>
? ? ? ? ? ? <title>百萬(wàn)噸暴扣</title>
? ? ? ? ? ? <date>百萬(wàn)噸暴扣</date>
? ? </movie>
? ??
? ? <movie>
? ? ? ? ? ? <pic>11.jpg</pic>
? ? ? ? ? ? <title>虎視眈眈</title>
? ? ? ? ? ? <date>虎視眈眈</date>
? ? </movie>

? ? <movie>
? ? ? ? ? ? <pic>12.jpg</pic>
? ? ? ? ? ? <title>一意專(zhuān)心</title>
? ? ? ? ? ? <date>一意專(zhuān)心</date>
? ? </movie>
</gallery>

Window.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"?
? ? ? ? layout="absolute" width="100%" height="100%"
? ? ? ? horizontalAlign="left"
? ? ? ? showCloseButton="true"
? ? ? ? close="closeWindow(event);"?
? ? ? ? click="dispatchEvent(new CloseEvent(CloseEvent.CLOSE));">
? ? ? ??
? ? ? ? <mx:Script>
? ? ? ? ? ? ? ? <![CDATA[
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? import mx.events.CloseEvent;
? ? ? ? ? ? ? ? ? ? ? ? import mx.managers.PopUpManager;
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? [Bindable]
? ? ? ? ? ? ? ? ? ? ? ? public var sourceImage:String;
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? private function closeWindow(e:CloseEvent):void {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PopUpManager.removePopUp(this);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ]]>
? ? ? ? </mx:Script>
? ? ? ??
? ? ? ? <mx:Image source="{sourceImage}"/>
? ? ? ??
</mx:TitleWindow>

轉(zhuǎn)載于:https://www.cnblogs.com/programmer-wind/archive/2012/02/22/2919554.html

總結(jié)

以上是生活随笔為你收集整理的创建弹出窗口的图片展示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：使用Delphi7构建工商银行电子口令密
下一篇： Silverlight实用窍门系列：56