代码学习群简易教程（39）

第三十九节 玩转网页小技巧（2）第三十九节 玩转网页小技巧（2）

上一节《教程》中讲解了如何应用代码收藏自己喜欢的更多网页，本节《教程》讲解应用代码修改动画图片。

在网络中流传的动画图片，有些是可以修改的。我们可以将自己喜欢的图片替换到动画图片中，甚至可以将自己的照片替换到动画图片中，修改成为有自己照片的动画图片。

例一：

<DIV align=center><EMBED height=450 type=application/x-shockwave-flash width=450 src=http://dashan.gotoip1.com/sc/zz/xuanzhuanshuijingqiu.swf allownetworking="internal" flashvars="tp=http://gb.cri.cn/mmsource/images/2008/12/04/el081204475.jpg" allowscriptaccess="never" quality="high" invokeurls="false" wmode="transparent"></DIV>

例一的代码是一个圆形的动画图片。红色代码是替换图片地址处。可用你的图片地址替换掉“红色的图片地址”。

提示：要替换其它网站的图片地址，不能替换360图书馆中的图片地址。因为360图书馆设有防盗链，不允许图书馆中的图片应用于其它网站。如果想用你自己的照片，需要上传到其它网站，获取照片的地址欧。

下面所举的例子也是一样的，都不能应用360图书馆中的图片地址。

例二：

<P style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" align=center><EMBED height=500 type=application/x-shockwave-flash width=500 src=http://flash.picturetrail.com/pflicks/m_acrobatcube.swf bgcolor="#FFFFFF" quality="high" loop="false" wmode="transparent" flashvars="img1=http://img9.ph.126.net/c3ZFji_-zBYrsHeq1RZWbw==/2608710084171639409.jpg&amp;img2=http://img6.ph.126.net/g0tfdRKlQDsqvHttGwrmog==/2628413332541384476.jpg&amp;img3=http://img9.ph.126.net/DlbWoZX1fZ-SqhH2xLQUaw==/32369622339003219.jpg &amp;img4=http://img6.ph.126.net/KDE5vSOK9VHcAVT5nM0g0Q==/1567815620295635306.jpg&amp;img5=http://img7.ph.126.net/lWt1NirU2-wN8gUriSAw2Q==/2607302709288089557.jpg&amp;img6=http://img.mf08.net/img/200804/21/aa49.jpg&amp;test=1" allownetworking="internal" allowscriptaccess="never"></P>

例二是一个正方体的动画图片，代码比较复杂一些。红色的代码中，等号后面是图片的地址。图片地址一共有6个。替换的时候，一定要细心，千万别弄错欧！

例三：

<EMBED style="WIDTH: 600px; HEIGHT: 400px" height=264 type=application/x-shockwave-flash width=355 src=http://flash.picturetrail.com/pflicks/slab.swf allownetworking="internal" flashvars="img1=http://tu.58task.com/pics/711120184774ecd624b773119159fcd3.jpg&amp;img2=http://tu.58task.com/pics/83e35fb8457fc6d1a230047939e561f6.jpg&amp;type=2&amp;op=0.jpg&amp;faceopacity=80&amp;backopacity=100&amp;cubecroptofit=1&amp;enlargecroptofit=0&amp;test=1" allowscriptaccess="never" loop="false" invokeurls="false" wmode="transparent">

例三是一个扁形的长方体动画图片。红色的代码是替换图片地址处，一共有两个图片地址。可用你的图片地址替换掉“红色的图片地址”。

例四：

<EMBED style="WIDTH: 590px; HEIGHT: 300px" height=300 type=application/x-shockwave-flash align=middle pluginspage=http://www.macromedia.com/go/getflashplayer width=590 src=http://flash.picturetrail.com/pflicks/l_cube_r.swf allowscriptaccess="never" allownetworking="internal" bgcolor="#ffffff" wmode="transparent" flashvars="logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&amp;ptdim=90.10&amp;ptxy=384.16&amp;img1=http://pic50.picturetrail.com/VOL1639/7393141/14252552/213378963.jpg&amp;img2=http://pic50.picturetrail.com/VOL1639/7393141/14252552/213377142.jpg&amp;img3=http://pic50.picturetrail.com/VOL1639/7393141/14252552/213377993.jpg&amp;img4=http://pic50.picturetrail.com/VOL1639/7393141/14252552/213377991.jpg&amp;img5=http://pic50.picturetrail.com/VOL1639/7393141/14252552/213378256.jpg&amp;img6=http://pic50.picturetrail.com/VOL1639/7393141/14252552/213377998.jpg" quality="high" loop="false">

例四是一幅“自私”的幻灯片代码。红色代码是替换图片地址处，一共有六个图片地址。它的图片地址，只能够应用它自己网站的图片地址，其它网站的图片地址一般是无效的。更“自私”的是我们还无法登录它的网站，只能够应用修改图片地址序号的方法，寻找有效的图片地址。很是麻烦的，但是，这幅动画图片还是挺美的！

例五：

<embed style="margin: 5px;" height="200" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="500" src="http://www.zqzone.cn/show/fzlhf/swf/show.swf?id=www.zqzone.cn&amp;p1=http://www.zqzone.cn/qqgexing/images/2012-8/2012827184828658.jpg&amp;p2=http://www.zqzone.cn/qqgexing/images/2012-8/2012827184828658.jpg&amp;p3=http://www.zqzone.cn/qqgexing/images/2012-4/2012413163125433.jpg&amp;p4=http://www.zqzone.cn/qqgexing/images/2012-4/2012413163125433.jpg&amp;p5=http://www.zqzone.cn/qqgexing/images/2012-4/2012475592156.jpg&amp;p6=http://www.zqzone.cn/qqgexing/images/2012-4/2012475592156.jpg&amp;.swf" allowNetworking="internal" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent">

例五是一幅QQ中的动画图片，由六个图片组成。用光标指向图片，图片会有变化欧！你可以替换p1、p2、p3、p4、p5、p6等号后面的图片地址。图片地址也应该应用QQ中的图片地址欧！

qq空间的图片地址举例：

http://www.zqzone.cn/article/UploadPic/2012-8/2012830213518201.jpg

http://www.zqzone.cn/article/UploadPic/2012-8/2012830211245328.jpg

http://www.zqzone.cn/qqgexing/images/2012-8/2012830203831244.jpg

http://www.zqzone.cn/qqgexing/images/2012-8/2012830203322197.jpg

http://www.zqzone.cn/qqgexing/images/2012-8/2012830203153759.jpg

http://www.zqzone.cn/qqgexing/images/2012-8/2012828195353810.jpg

你也可以到http://www.zqzone.cn/网站寻找几个图片欧。

例六：

<div style="BACKGROUND-COLOR: rgb(150,150,255); MARGIN-TOP: 0px; MARGIN-LEFT: 0px">

<embed height="500" type="application/x-shockwave-flash" width="910" pluginspage="http://www.macromedia.com/go/getflashplayer" src="//dashan.gotoip1.com/sc/zz/thpdh.swf" allownetworking="internal" flashvars="tp=|100|910|500.05,http://www.ct2018.com/upFiles/Flashsc/Flash_tmsc_07/xdnr_08.swf|86|384.3|157.25,http://www.sj63.com/upload/2013_3_29/20133296265480.swf|100|54.8|209.55,|70|263.25|219.8,http://www.sj63.com/upload/2013_4_3/201343721680.swf|120|-66.85|232.55,undefined|100|0|0,undefined|100|0|0,undefined|100|0|0" allowscriptaccess="never" quality="high" invokeurls="false" wmode="transparent"></div>

例六是由三个动画图片组成的动画图片，效果挺美的！画面中有不少的人物，有步行的，有骑车的，还有飞机在天空中飞翔呢！你可以替换红色的动画图片地址，重新组合为一个新的动画图片。（注意：要替换的地址必须是“动画图片地址”，不能替换为普通图片的地址欧！）

例七：

<DIV align=center><EMBED style="Z-INDEX: 0" height=438 type=application/x-shockwave-flash align=middle pluginspage=http://img702.photo.163.com/cb715/104113936/2368883581.jpg width=680 src=http://flash.picturetrail.com/pflicks/l_panels_r.swf invokeurls="false" loop="false" quality="high" wmode="transparent" allowscriptaccess="never" flashvars="auto=1&amp;wait=3&amp; logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&amp; ptdim=50.10&amp;ptxy=600.16&amp;foldtotal=4&amp;foldangle=10&amp;img1=http://img.ph.126.net/sLLk9CyNFR7wUQ4z8nZzjA==/6597244589006119107.jpg&amp; img2=http://img.ph.126.net/4HfVDkPjrjT5vtHMKYegFA==/6597244589006119109.jpg&amp;img3=http://image11.m1905.cn/uploadfile/2012/0811/20120811015101804.jpg&amp;img4=http://image11.m1905.cn/uploadfile/2012/0811/20120811015102584.jpg&amp; img5=http://image11.m1905.cn/uploadfile/2012/0811/20120811015101922.jpg&amp;img6=http://image11.m1905.cn/uploadfile/2012/0811/20120811015101956.jpg&amp;img7=http://image11.m1905.cn/uploadfile/2012/0811/20120811015101810.jpg&amp;img8=http://image11.m1905.cn/uploadfile/2012/0811/20120811015102139.jpg&amp; img9=http://image11.m1905.cn/uploadfile/2012/0811/20120811015101981.jpg&amp;img10=http://image11.m1905.cn/uploadfile/2012/0811/20120811015101601.jpg&amp;img11=http://image11.m1905.cn/uploadfile/2012/0811/20120811015101439.jpg&amp;img12=http://image11.m1905.cn/uploadfile/2012/0811/20120811015101414.jpg&amp;test=1" allownetworking="internal"></DIV>

例七是由12张美女图片组成的移动动画图片。每次显示四个图片，效果挺美的！你用光标点击哪个美女，哪个美女就弹出来啦；你再点击一下那个美女，呵呵！她又退回去啦！

你可以替换红色的图片地址，重新组合为一个新的动画图片。替换时要细心欧，千万不要误“删除”了周围的代码。当然了，图片的张数是可以增减的。

例八：

<EMBED style="Z-INDEX: 0" height=440 type=application/x-shockwave-flash align=middle pluginspage=http://www.macromedia.com/go/getflashplayer width=550 src=http://flash.picturetrail.com/pflicks/fadezoom_r.swf allownetworking="internal" flashvars="logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&amp; ptdim=50.10&amp;ptxy=284.16&amp;border=0&amp;boxcolor=1&amp;fish=1&amp; heart=0&amp;bird=1&amp;bfly=1&amp;heart2=0&amp;fontsize=14&amp;fontcolor=3&amp; img1=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045181.jpg&amp;img2=http://image11.m1905.cn/uploadfile/2012/0813/20120813033044982.jpg&amp;img3=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045533.jpg&amp;img4=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045417.jpg&amp; img5=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045293.jpg&amp;img6=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045844.jpg&amp;img7=http://image11.m1905.cn/uploadfile/2012/0813/20120813033044951.jpg&amp;img8=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045414.jpg&amp; img9=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045651.jpg&amp;img10=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045395.jpg&amp;img11=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045583.jpg&amp;img12=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045445.jpg&amp;img13=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045739.jpg&amp;test=1" allowscriptaccess="never" wmode="transparent" quality="high" loop="false" invokeurls="false">

例八是由13张图片交替展示的动画图片。动画图片中除了人物以外，还有飞翔的蝴蝶、小鸟，游动的小鱼儿呢！你可以替换红色的图片地址，重新组合为一个新的动画图片。替换时要细心欧，千万不要误“删除”了周围的代码。当然了，图片的张数是随你增减的。

例九：

<EMBED style="Z-INDEX: 0" height=300 type=application/x-shockwave-flash pluginspage=http://img702.photo.163.com/cb715/104113936/2368883581.jpg width=480 src=http://flash.picturetrail.com/pflicks/slowslide.swf wmode="transparent" invokeurls="false" quality="high" loop="false" allowscriptaccess="never" flashvars="

img1=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045181.jpg&amp;img2=http://image11.m1905.cn/uploadfile/2012/0813/20120813033044982.jpg&amp;img3=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045533.jpg&amp;img4=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045417.jpg&amp; img5=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045293.jpg&amp;img6=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045844.jpg&amp;img7=http://image11.m1905.cn/uploadfile/2012/0813/20120813033044951.jpg&amp;img8=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045414.jpg&amp; img9=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045651.jpg&amp;img10=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045395.jpg&amp;img11=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045583.jpg&amp;img12=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045445.jpg&amp;img13=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045739.jpg&amp;test=1" allownetworking="internal">

例九是由13张图片交替展示的动画图片。13张美女图片自右向左缓缓移动着，也挺不错的。图片的外围，有一个灰色的方框，还有播放与暂停的按钮。用光标指向图片，图片停止移动，光标离开图片，图片又继续移动啦。

你可以替换红色的图片地址，重新组合为一个新的动画图片。替换时要细心欧，千万不要误“删除”了周围的代码。当然了，图片的张数也是可以随你增减的。

例十：

<EMBED style="Z-INDEX: 0" height=420 type=application/x-shockwave-flash align=middle pluginspage=http://www.macromedia.com/go/getflashplayer width=500 src=http://flash.picturetrail.com/pflicks/magnifier_r.swf invokeurls="false" quality="high" loop="false" wmode="transparent" allowscriptaccess="never" flashvars="logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&amp; ptdim=50.10&amp;ptxy=400.16&amp;auto=1&amp;magOn=1&amp;wait=2&amp;img1=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045181.jpg&amp;img2=http://image11.m1905.cn/uploadfile/2012/0813/20120813033044982.jpg&amp;img3=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045533.jpg&amp;img4=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045417.jpg&amp; img5=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045293.jpg&amp;img6=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045844.jpg&amp;img7=http://image11.m1905.cn/uploadfile/2012/0813/20120813033044951.jpg&amp;img8=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045414.jpg&amp; img9=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045651.jpg&amp;img10=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045395.jpg&amp;img11=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045583.jpg&amp;img12=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045445.jpg&amp;test=1" allownetworking="internal">

例十是由12张美女图片组成的动画图片。12张图片依次显示，堆叠在一起。把光标指向图片，就会显示出放大镜，你可以应用放大镜观察美女的各个部位欧！

你可以替换红色的图片地址，重新组合为一个新的动画图片。替换时要细心欧，千万不要误“删除”了周围的代码。图片的张数也是可以随意增减的。

例十一：

<EMBED style="Z-INDEX: 0" height=450 type='application/x-shockwave-flashBGCOLOR="#FFFFFF"' align=middle pluginspage=http://www.macromedia.com/go/getflashplayer width=600 src=http://flash.picturetrail.com/pflicks/fadezoom_r.swf invokeurls="false" loop="false" quality="high" wmode="transparent" allowscriptaccess="never" flashvars="logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&amp; ptdim=50.10&amp;ptxy=284.16&amp;border=0&amp;boxcolor=4&amp;fish=0&amp;heart=0&amp; bird=0&amp;bfly=1&amp;heart2=0&amp;fontsize=24&amp;fontcolor=2&amp; sparkle=http://flash.picturetrail.com/pflicks/glitter/sparkle4.swf&amp;img1=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045181.jpg&amp;img2=http://image11.m1905.cn/uploadfile/2012/0813/20120813033044982.jpg&amp;img3=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045533.jpg&amp;img4=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045417.jpg&amp; img5=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045293.jpg&amp;img6=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045844.jpg&amp;img7=http://image11.m1905.cn/uploadfile/2012/0813/20120813033044951.jpg&amp;img8=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045414.jpg&amp; img9=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045651.jpg&amp;img10=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045395.jpg&amp;img11=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045583.jpg&amp;img12=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045445.jpg&amp;img13=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045739.jpg&amp;test=1" allownetworking="internal">

例十一是由12张图片组成的动画图片。12张图片依次显示，逐渐增大，然后慢慢消失。还有美丽的蝴蝶在飞翔呢！用光标指向图片，图片就静止不动啦，光标离开图片，图片继续增大，然后慢慢消失。

你可以替换红色的图片地址，重新组合为一个新的动画图片。替换时要细心欧，千万不要误“删除”了周围的代码。图片的张数也是可以随意增减的。

例十二：

<EMBED style="Z-INDEX: 0" height=338 type=application/x-shockwave-flash align=middle pluginspage=http://img702.photo.163.com/cb715/104113936/2368883581.jpg width=600 src=http://flash.picturetrail.com/pflicks/l_panels_r.swf invokeurls="false" quality="high" loop="false" wmode="transparent" allowscriptaccess="never" flashvars="auto=1&amp;wait=3&amp; logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf&amp;ptdim=50.10&amp;ptxy=600.16&amp; foldtotal=4&amp;

img1=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045181.jpg&amp;img2=http://image11.m1905.cn/uploadfile/2012/0813/20120813033044982.jpg&amp;img3=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045533.jpg&amp;img4=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045417.jpg&amp; img5=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045293.jpg&amp;img6=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045844.jpg&amp;img7=http://image11.m1905.cn/uploadfile/2012/0813/20120813033044951.jpg&amp;img8=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045414.jpg&amp; img9=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045651.jpg&amp;img10=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045395.jpg&amp;img11=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045583.jpg&amp;img12=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045445.jpg&amp;img13=http://image11.m1905.cn/uploadfile/2012/0813/20120813033045739.jpg&amp;test=1" allownetworking="internal">

例十二是由13张图片组成的动画图片。13张图片连续不断地向右移动。用鼠标箭头点击哪张图片，哪张图片就会放大；再点击这张图片，图片回复原状，继续移动。

你可以替换红色的图片地址，重新组合为一个新的动画图片。替换时要细心欧，千万不要误“删除”了周围的代码。图片的张数也是可以随意增减的。

例十三：

<EMBED height=700 type=application/x-shockwave-flash width=860 src=http://dashan.gotoip1.com/tpll/tpxc01.swf allowNetworking="internal" flashvars="tp=http://img7.ph.126.net/RGSOZ0EdhVY83CsbkM5aqg==/2629820707424767687.jpg|http://img7.ph.126.net/ujVXQevHyqivTUU3LArL0Q==/1163617553738964387.jpg|http://img4.ph.126.net/K01U5jwLA7Kr3HTZtTjbNA==/602074975201206124.jpg|http://img6.ph.126.net/CtKrzT6daAu_7IAr7aZlLw==/2514978916926825016.jpg|http://img7.ph.126.net/wUTKTyeSRpfS-K_OMifgcw==/2630946607331619627.jpg|http://img8.ph.126.net/KLCc27RmK_qce8d-2ld3NA==/1167558203412908768.jpg|http://img5.ph.126.net/zZOTQxl20klcfqtlxSWctQ==/3074832645604319485.jpg|http://img9.ph.126.net/wL2LRqdfINX36oP25uibHw==/2391974352104264769.jpg|http://img8.ph.126.net/yzUvHCVAurzlIDLTILZpYg==/1333628439672201278.jpg|http://img0.ph.126.net/Ljf_1YtNADwzwigbIU0lBQ==/3117898317041050370.jpg|http://img9.ph.126.net/ZYP6_wn3BJnxWJrubdRFIQ==/2579999636546987999.jpg|http://img1.ph.126.net/7Qdte4WGsGsmzFv7BathaQ==/47569271081214161.jpg|http://img1.ph.126.net/qM_t1foOhmRrW5pPPlmUdA==/2549318864085524621.jpg|http://img1.ph.126.net/xiQk--ivL13ZhHHuA2phNA==/2580281111523698731.jpg|http://img7.ph.126.net/pkFUjMWJPTC_2jYmY9r4ng==/572520102646584637.jpg|http://img7.ph.126.net/1gfj0HdFI0Tw85E8Vh-D4g==/1051309038031415087.jpg|http://img9.ph.126.net/oejAmynhuMXVYHq8ETf8Wg==/2796735368614191899.jpg|http://img3.ph.126.net/H0gItzBeR9dz2Uoj8t6t5Q==/2740440373272062713.jpg|http://img9.ph.126.net/IaNqk00EfzxgJPhY1C3eBg==/2818690416797623839.jpg&amp;cc=860*700&amp;qhfs=1" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent">

例十三是自动切换的幻灯图片。红色的代码是图片的地址，图片的数量可以增减，每两个图片地址之间要用一条竖线隔开。你可以把代码中的图片地址替换为你喜欢的图片地址欧！

作业：

本节的作业为实际操作练习。你喜欢哪几个动画的形式，就在网络中寻找一些你喜欢的图片，替换图片地址，制作几篇网页玩儿吧。

如果你还想弄清楚代码中每个属性、属值的意义，就到“百度”中搜索一下吧。

“春天没来”编撰

2014年10月20日于北京