分类: 时尚潮流类爱美心皆有之 |
大家可能都看到了我博客右面那个竖着滚动的图片,够炫的吧! 好多博友们都在问我这个特效的源代码是什么?其实很简单的! 就是利用网页定位代码来实现的! 以前精武门主也曾为大家介绍过网页定位代码的好处与使用方法! 只是很多博友们都不是很用心的去深入了解这个网页定位代码! 以至于看到了很多新鲜的东西(网页特效)而感到惊奇! 完全没必要,真的!只要大家稍微的用心一些,这些所谓的新鲜东西(网页特效)就会变得一文不值! 主要就是要学会活学活用! 网页定位代码是个很好的源代码! 只要大家了解了网页定位代码的好处之后, 就会发现,它可以实现好多意想不到的特殊效果! 下面的这个利用网页定位代码来实现的定位滚动图片的特效就是一个例子! |
1*把滚动图片放在横幅上面: (此代码为精武门主自行修改而成,新浪博客独家提供。转载请注明出处) |
<DIV style="RIGHT: 0px; WIDTH: 600px; POSITION: absolute;
TOP: 0px; HEIGHT: 90px"> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD> <P align=center><SPAN style="FONT-SIZE: 0px"> <MARQUEE width=1010> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> <IMG src="这里链接图片URL地址"></IMG> </MARQUEE></SPAN></P></TD></TR></TBODY></TABLE><A href="http://blog.sina.com.cn/m/kongfu" target=_blank>kongfu</A></DIV> |
2*把滚动图片放在网页左右两边: (此代码为精武门主自行修改而成,新浪博客独家提供。转载请注明出处) |
<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium
none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT:
expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-155);
BORDER-LEFT: medium none; WIDTH: 228px; BORDER-BOTTOM: medium none;
POSITION: absolute; ; TOP:
expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-580);
HEIGHT: 265px; TEXT-ALIGN: center"> <TABLE cellSpacing=0 cellPadding=0 align=center border=0> <TBODY> <TR> <TD> <DIV> <P align=center><SPAN style="FONT-SIZE: 13px"> <MARQUEE direction=up width=120 height=600> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV> <DIV align=center><IMG src="这里链接图片URL地址"></DIV></MARQUEE></SPAN><FONT color=#00cc00 size=7> </FONT><FONT color=#00cc00 size=6></FONT><FONT color=#00cc00 size=7></FONT></P></DIV></TD></TR></TBODY></TABLE><A href=http://blog.sina.com.cn/m/binghe2008 target=_blank>binghe2008</A></DIV> |
代码说明: |
(document.body.clientWidth)-155);
(-1045为左侧滚动) 表示被定位物体的左右位置,负数值越大距离左侧越远(可自行调节) (document.body.clientHeight)-580); 表示被定位物体的上下位置,负数值越大距离下方越远(可自行调节) scrollAmount=1 direction=是滚动的方向,up=上,down=下,left=左,right=右, size=3是滚动字字体的大小。都可以自定义设置 |
此代码为精武门主在新浪博客独家首发.转载请注明出处. |
前一篇:FLASH效果+边框
后一篇:新浪音乐播放器