枳橘吟 2008-9-16 04:25

[讨论]尝试用代码制作放大镜效果_无脚本

<center><IFRAME marginWidth=0 marginHeight=0 src="http://image.hnol.net/200504/dysr/html/dmfdj_0809.htm" frameBorder=0 width="620" scrolling=auto height=440></IFRAME></center>

[color=Silver][本帖最后由 枳橘吟 于 2008-9-16 05:52 编辑][/color]

宠儿 2008-9-16 17:25

有意思.代码也简单.

枳橘吟 2008-9-16 19:34

[b][font=楷体_GB2312][size=4]　　谢谢宠儿版主。
　　不知什么原因，代码运行后，这一句“scrollAmount=6”就看不到了（在浏览器上查看代码），改为网页发帖也是这样，下载网页文件，这一句又在里面。
　　因各种因素影响，两个文字移动的速度很难长时间保持始终同步，再加上这个不明原因的“吃”代码的情况，有时会出现乱的情况。[/size][/font][/b]

81153559 2008-9-17 16:09

显示时不对头.

宠儿 2008-9-27 23:46

<DIV style="position:relative; top:0px; left:0px; width:500px; height:200px; overflow: hidden"><?import namespace=v urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace /><v:oval style="position: absolute; top: 50px; left: 100px; width:100px; height:100px;" stroked="t" strokecolor="#FF9966" filled="t" fillcolor="#6666FF" strokeweight="6px" arcsize="0.15"> <v:fill src="http://image.hnol.net/bbs/uface/a/2008-05/30/17/20080530173250741348.jpg" type="frame" opacity="1"/> </v:oval> </DIV>

[color=Silver][本帖最后由 宠儿 于 2008-9-27 23:47 编辑][/color]

宠儿 2008-9-27 23:47

上面是圆形,枳橘吟 研究下用圆来代替.

宠儿 2008-9-27 23:48

[newem2.14]我懒得动

雨露花园 2008-9-28 21:18

<table style="LEFT: 0px; POSITION: relative; TOP: 0px" bordercolor="#137979" height="300" cellspacing="0" cellpadding="0" width="600" bgcolor="#339999" border="2">
    <tbody>
        <tr>
            <td>
            <div style="FONT-SIZE: 50px; LEFT: 143px; WIDTH: 314px; COLOR: #63fc63; FONT-FAMILY: 楷体_GB2312; POSITION: absolute; TOP: 123px; HEIGHT: 54px; TEXT-ALIGN: center">华声音画学堂</div>
            <marquee style="Z-INDEX: 20; LEFT: 45px; WIDTH: 510px; POSITION: absolute; TOP: 100px; HEIGHT: 100px" scrollamount="3" direction="right" behavior="alternate">
            <div style="BORDER-RIGHT: #43a9a9 1px solid; BORDER-TOP: #43a9a9 1px solid; LEFT: 0px; OVERFLOW: hidden; BORDER-LEFT: #43a9a9 1px solid; WIDTH: 100px; BORDER-BOTTOM: #43a9a9 1px solid; POSITION: relative; TOP: 0px; HEIGHT: 100px">
            <table style="Z-INDEX: 10; FILTER: Alpha(opacity=0,finishOpacity=80,style=2); LEFT: -10px; POSITION: absolute; TOP: -10px; BACKGROUND-COLOR: #339999" height="120" width="120">
                <tbody>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
            <marquee style="Z-INDEX: 4; LEFT: -820px; WIDTH: 1740px; POSITION: absolute; TOP: -44px; HEIGHT: 166px" behavior="alternate">
            <div style="FONT-SIZE: 100px; LEFT: 0px; WIDTH: 920px; COLOR: #63fc63; LINE-HEIGHT: 200%; FONT-FAMILY: 楷体_GB2312; POSITION: relative; TOP: 0px; HEIGHT: 199px; BACKGROUND-COLOR: #339999; TEXT-ALIGN: center">华声音画学堂</div>
            </marquee></div>
            </marquee></td>
        </tr>
    </tbody>
</table>

[color=Silver][本帖最后由 雨露花园 于 2008-9-28 21:19 编辑][/color]

枳橘吟 2008-9-29 03:15

[b][font=楷体_GB2312][size=4]谢谢宠版，居然弄出这么一段代码。查了一下，叫什么矢量可标记语言（Vector Markup Language）
看上去与时间代码有点象，没接触过，得“烟酒”一下，不知能不能拿下。
首帖中的玩意，如果用FLASH是很简单的事，在代码中又来利用FLASH就没什么意思了。
玩意中的道理其实很简单，用DIV隐藏框外的内容，然后在框移到某个小字上时，让框内大字的对应部分也正好移到。这就要求两个对象的移动速度要能保持同步，实际上，由于各种原因的干扰，时间稍长就不行了，只能刷新再演示。

你提供的资料我会认真“烟酒”的，有没有能耐拿下就说不好了。也没什么，反正是玩，熟悉一些新东西，也算是学习吧。
再谢宠版支持。[/size][/font][/b]

[color=Silver][本帖最后由 枳橘吟 于 2008-9-29 04:08 编辑][/color]

枳橘吟 2008-9-29 03:20

[size=4][b][font=楷体_GB2312]补充一下。
如果用脚本，我估计应该可以的。但又有点跑题了。我的想法是，能不能用一些最简单的方法来实现某些效果。[/font][/b][/size]

枳橘吟 2008-9-29 23:03

[b][font=楷体_GB2312][size=4]宠版这里先交作业，还是用的滤镜。vml代码以后慢慢再学习。[/size][/font][/b]

<center><IFRAME marginWidth=0 marginHeight=0 src="http://image.hnol.net/200504/dysr/html/dmfdj_080929.htm" frameBorder=0 width="600" scrolling=auto height=300></IFRAME>

枳橘吟 2008-9-30 01:46

<center><div style="overflow:hidden; position: relative; left: 0; top: 0; width: 600px; height: 300px; background-color:#339999;"><div style="FILTER: chroma(color=#ff0000); position: absolute; left: 0px; top: 0px; z-index:10; width: 600px; height: 300px; background-color:#339999;"><img style="position: absolute; left: 143px; top: 116px;" src="http://blog.chelder.com.cn/UploadFiles/2008-8/829497688.jpg" width="314" height="68" name="_1"><marquee behavior="alternate" scrollamount="3" scrolldelay="0" style="position: absolute; left: 98; top: 90; z-index:20; height:120px; width:406px" direction="right"><div style="position: relative; left: 0; top: 0; width: 120px; height: 120px;"><img style="position:absolute; left:0; top:0; z-index:0" src="http://2008.hnzqw.com/UploadFile/2008-9/20089292395859642.gif" width="120" height="120"></div></marquee></div><marquee behavior="alternate" scrollamount="3" scrolldelay="0" style="position: absolute; z-index: 1; left: -143; top:85; height:130px; width=886"><img src="http://blog.chelder.com.cn/UploadFiles/2008-8/829497688.jpg" width="600" height="130" name="_1"></marquee></div></center>

相与出尘 2008-10-2 15:40

真神奇，可以这样展示代码的效果，更神奇～谢谢枳橘先生～

枳橘吟 2008-10-2 23:58

[b][font=楷体_GB2312][size=4]　　谢谢相与出尘朋友。这些纯脆做点练习，制帖不会用吧。神奇更谈不上，都是最基础的东西，胡乱用罢了。
　　下面的东西制作方法也一样，还是用的chroma滤镜和字幕效果。设置不同，效果有点不同。[/size][/font][/b]
<br><center><div style="LEFT: 0px; OVERFLOW: hidden; WIDTH: 740px; POSITION: relative; TOP: 0px; HEIGHT: 560px"><marquee style="LEFT: -10px; POSITION: absolute; TOP: -50px" scrollamount="20" scrolldelay="3000" direction="right" behavior="alternate" width="820" height="650"><img src="http://2008.hnzqw.com/UploadFile/2008-10/200810123201949606.jpg"></marquee><div style="Z-INDEX: 10; FILTER: chroma(color=#ff0000); LEFT: -10px; WIDTH: 840px; POSITION: absolute; TOP: -50px; HEIGHT: 650px; BACKGROUND-COLOR: #009999"><img style="LEFT: 0px; POSITION: absolute; TOP: 0px;Z-INDEX: 20;" src="http://2008.hnzqw.com/UploadFile/2008-10/200810123195950375.gif" width=840 height=650><marquee style="LEFT: 0px; POSITION: absolute; TOP: 50px;Z-INDEX: 0;" scrollamount="1" scrolldelay="1" direction="right" behavior="alternate" width="740" height="600"><img src="http://2008.hnzqw.com/UploadFile/2008-10/200810223264140073.jpg" width=980 height=600></marquee></div></div></center>

枳橘吟 2008-10-3 01:40

[b][font=楷体_GB2312][size=4]这个帖子里，都是用字幕效果在做文章。这个幻灯效果还马马虎虎吧。[/size][/font][/b]

<center><div style="overflow:hidden; position: relative; left: 0; top: 0; width: 640; height: 405; border: 8px solid #009999"><marquee behavior="alternate" direction="up" scrollamount="424" scrolldelay="4000" style="position: absolute; left: 0; top: -3410; width: 640; height: 7225"><table cellspacing="0" cellpadding="0" width="640" height="3825"><tr><td background="http://image.hnol.net/200504/dysr/html-time/01.jpg" height="425"></td></tr><tr><td background="http://image.hnol.net/200504/dysr/html-time/02.jpg" height="425"></td></tr><tr><td background="http://image.hnol.net/200504/dysr/html-time/03.jpg" height="425"></td></tr><tr><td background="http://image.hnol.net/200504/dysr/html-time/04.jpg" height="425"></td></tr><tr><td background="http://image.hnol.net/200504/dysr/html-time/05.jpg" height="425"></td></tr><tr><td background="http://image.hnol.net/200504/dysr/html-time/06.jpg" height="425"></td></tr><tr><td background="http://image.hnol.net/200504/dysr/html-time/07.jpg" height="425"></td></tr><tr><td background="http://image.hnol.net/200504/dysr/html-time/08.jpg" height="425"></td></tr><tr><td background="http://image.hnol.net/200504/dysr/html-time/09.jpg" height="425"></td></tr></table></marquee></div></center>

[color=Silver][本帖最后由 枳橘吟 于 2008-10-3 02:16 编辑][/color]

宠儿 2008-10-8 10:42

圆的做出来了,挺好看的

枳橘吟 2008-10-9 01:35

[b][font=楷体_GB2312][size=3]谢谢宠版关注支持。只是vml代码一时还拿不下呢。[/size][/font][/b]

页: [1]

Powered by 华声论坛