制作移动闪动边框的代码及应用实例3款

 

 效果图一 

 

 

  效果图二 

 

 

  效果图三

 

 

 

动态边框素材一

 

动态边框素材二

动态边框素材三

 

 

图片素材一

 

图片素材二

 

图片素材三

图片素材四

 

图片素材五

 

图片素材六

 

图片素材七

 

图片素材八

 

图片素材九

 图片素材十

 

 

 

注   释

 请与博文《制作上下水晶效果的边框代码【移动画廊】》对比效果，本代码添加了上下反向移动闪动边框，使整体效果更加充满动感。我用人物、花卉和风景图片设计三款不同风格和色彩的效果图供朋友们参考。红色是闪动上边框移动代码，绿色是中间移动图代码，蓝色是闪动下边框移动代码。为了便于朋友们使用，我特意设计以图片高度确定大小的代码，无论您用什么规格的图片，都会按高度比例自动调节宽度，建议使用横版图片为好。若需放大图片，只需调整高度参数即可。发挥您的智慧，创作出更美的佳作。

特别说明：图片选用网络素材。

 

点击图片看昭昭 

公主的文字博客

  

 

 

效果图一代码

<TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=3 bgColor=#000000 border=0>
<TBODY>
<TR>
<TD style="FILTER: progid:DximageTransform.Microsoft.Gradient(startColorstr='#ff0000', endColorstr='#640000', gradientType='0')" height=60> </TD></TR>
<TR>
<TD height=6>
<MARQUEE style="WIDTH: 100%" scrollAmount=2 scrollDelay=30 behavior=alternate height=13><IMG height=13 src="http://s12.sinaimg.cn/middle/5e1a7abfg891d4cb267fb&690" border=0><IMG height=13 src="http://s12.sinaimg.cn/middle/5e1a7abfg891d4cb267fb&690" border=0><IMG height=13 src="http://s12.sinaimg.cn/middle/5e1a7abfg891d4cb267fb&690" border=0><IMG height=13 src="http://s12.sinaimg.cn/middle/5e1a7abfg891d4cb267fb&690" border=0></MARQUEE></TD></TR>
<TR>
<TD height=300>
<MARQUEE style="WIDTH: 100%" scrollAmount=2 scrollDelay=30 behavior=alternate height=300><IMG height=300 src="http://s5.sinaimg.cn/orignal/5e1a7abfg891e2f12a834&690" border=0> <IMG height=300 src="http://s2.sinaimg.cn/orignal/5e1a7abfg891ddd8197e1&690" border=0> <IMG height=300 src="http://s2.sinaimg.cn/orignal/5e1a7abfg891ddd350621&690" border=0> <IMG height=300 src="http://s14.sinaimg.cn/middle/5e1a7abfg891ddd25b61d&690" border=0></MARQUEE></TD></TR>
<TR>
<TD height=6>
<MARQUEE style="WIDTH: 100%" scrollAmount=2 scrollDelay=30 direction=right behavior=alternate height=13><IMG height=13 src="http://s12.sinaimg.cn/middle/5e1a7abfg891d4cb267fb&690" border=0><IMG height=13 src="http://s12.sinaimg.cn/middle/5e1a7abfg891d4cb267fb&690" border=0><IMG height=13 src="http://s12.sinaimg.cn/middle/5e1a7abfg891d4cb267fb&690" border=0><IMG height=13 src="http://s12.sinaimg.cn/middle/5e1a7abfg891d4cb267fb&690" border=0></MARQUEE></TD></TR>
<TR>
<TD style="FILTER: progid:DximageTransform.Microsoft.Gradient(startColorstr='#640000', endColorstr='#ff0000', gradientType='0')" height=60> </TD></TR></TBODY></TABLE>

 

  

效果图二代码

<TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=3 bgColor=#000000 border=0>
<TBODY>
<TR>
<TD style="FILTER: progid:DximageTransform.Microsoft.Gradient(startColorstr='#00ff00', endColorstr='#006400', gradientType='0')" height=60> </TD></TR>
<TR>
<TD height=8>
<MARQUEE style="WIDTH: 100%" scrollAmount=2 scrollDelay=30 behavior=alternate height=8><IMG height=8 src="http://s7.sinaimg.cn/middle/5e1a7abfg891d4cb1ed46&690" border=0><IMG height=8 src="http://s7.sinaimg.cn/middle/5e1a7abfg891d4cb1ed46&690" border=0><IMG height=8 src="http://s7.sinaimg.cn/middle/5e1a7abfg891d4cb1ed46&690" border=0><IMG height=8 src="http://s7.sinaimg.cn/middle/5e1a7abfg891d4cb1ed46&690" border=0></MARQUEE></TD></TR>
<TR>
<TD height=300>
<MARQUEE style="WIDTH: 100%" scrollAmount=2 scrollDelay=30 behavior=alternate height=300><IMG height=300 src="http://s5.sinaimg.cn/orignal/5f33966cg741a745f2544&690" border=0> <IMG height=300 src="http://s11.sinaimg.cn/orignal/5f33966cg741a751674ea&690" border=0> <IMG height=300 src="http://s2.sinaimg.cn/orignal/5f33966cg8908b808c6f1&690" border=0> <IMG height=300 src="http://s15.sinaimg.cn/orignal/5f33966cg741a752a3c6e&690" border=0></MARQUEE></TD></TR>
<TR>
<TD height=8>
<MARQUEE style="WIDTH: 100%" scrollAmount=2 scrollDelay=30 direction=right behavior=alternate height=8><IMG height=8 src="http://s7.sinaimg.cn/middle/5e1a7abfg891d4cb1ed46&690" border=0><IMG height=8 src="http://s7.sinaimg.cn/middle/5e1a7abfg891d4cb1ed46&690" border=0><IMG height=8 src="http://s7.sinaimg.cn/middle/5e1a7abfg891d4cb1ed46&690" border=0><IMG height=8 src="http://s7.sinaimg.cn/middle/5e1a7abfg891d4cb1ed46&690" border=0></MARQUEE></TD></TR>
<TR>
<TD style="FILTER: progid:DximageTransform.Microsoft.Gradient(startColorstr='#006400', endColorstr='#00ff00', gradientType='0')" height=60> </TD></TR></TBODY></TABLE>

 

  

效果图三代码

<TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=3 bgColor=#000000 border=0>
<TBODY>
<TR>
<TD style="FILTER: progid:DximageTransform.Microsoft.Gradient(startColorstr='#0000ff', endColorstr='#000064', gradientType='0')" height=60> </TD></TR>
<TR>
<TD height=6>
<MARQUEE style="WIDTH: 100%" scrollAmount=2 scrollDelay=30 behavior=alternate height=10><IMG height=10 src="http://s1.sinaimg.cn/middle/5e1a7abfg891d4cad0680&690" border=0><IMG height=10 src="http://s1.sinaimg.cn/middle/5e1a7abfg891d4cad0680&690" border=0><IMG height=10 src="http://s1.sinaimg.cn/middle/5e1a7abfg891d4cad0680&690" border=0><IMG height=10 src="http://s1.sinaimg.cn/middle/5e1a7abfg891d4cad0680&690" border=0></MARQUEE></TD></TR>
<TR>
<TD height=300>
<MARQUEE style="WIDTH: 100%" scrollAmount=2 scrollDelay=30 behavior=alternate height=300><IMG height=300 src="http://s5.sinaimg.cn/orignal/5e1a7abfg700af14d0f54&690" border=0><IMG height=300 src="http://s13.sinaimg.cn/orignal/5e1a7abfg700af14d383c&690" border=0></MARQUEE></TD></TR>
<TR>
<TD height=6>
<MARQUEE style="WIDTH: 100%" scrollAmount=2 scrollDelay=30 direction=right behavior=alternate height=10><IMG height=10 src="http://s1.sinaimg.cn/middle/5e1a7abfg891d4cad0680&690" border=0><IMG height=10 src="http://s1.sinaimg.cn/middle/5e1a7abfg891d4cad0680&690" border=0><IMG height=10 src="http://s1.sinaimg.cn/middle/5e1a7abfg891d4cad0680&690" border=0><IMG height=10 src="http://s1.sinaimg.cn/middle/5e1a7abfg891d4cad0680&690" border=0></MARQUEE></TD></TR>
<TR>
<TD style="FILTER: progid:DximageTransform.Microsoft.Gradient(startColorstr='#000064', endColorstr='#0000ff', gradientType='0')" height=60> </TD></TR></TBODY></TABLE>