注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

江南浪子的博客

“清茶几许、人生百味……”

 
 
 

日志

 
 
关于我

本站文章除注明【原创】外,均来源于网络。文摘辑翠,配图编辑,增加可读性。阳春白雪、下里巴人,雅俗共赏,欢迎朋友们分享。每天都有新精彩,每天都有新期待! 联系方式:13065197070(weixin号同)

网易考拉推荐

【引用】巧用代码给移动长卷美图添加边框的方法及3款实例  

2011-12-13 23:16:26|  分类: 博客代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过 border=0>

效果图一  
巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过 border=0

  效果图二

 

巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过

效果图三 

 

巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过 border=0>

 无边框移动图

 

 巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过

原图

 

巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过

翻转图

 

博文《巧用代码让美图呈现长卷画面效果及实例》发表后,受到许多朋友的喜爱, 但要找到满意的图却不容易。我用这张《百骏图》做个示范,首先将图片在电脑中做翻转处理,在地址栏内1、3、5是一张原图,2、4是反转图,添加后使之形成头头相连及尾尾相连,连接处看不到痕迹,然后添加合适的边框,这样看起来增添了美感和图的气魄。你也选一张图试一试吧。

了解更多昭昭公主的生活状况,请点击右侧图标: 巧用代码给移动长卷美图添加边框的方法及3款实例 - 进退逍遥过 - 进退逍遥过查看昭昭公主的原创文字博客。

 

网友新街口留言“从您的博客上我们学到许多新的知识,如“长卷图画加边框”制作,大家只会用一张照片一个地址,若像你那幅长卷图画,则要将这幅图画反转两个“反转地址”。我的问题是照片反转我们大家还不会,能简单介绍下吗?谢谢!”。为此解释图片反转方法:将网上喜欢的图片保存到电脑中,鼠标双击图片——右键点编辑——在工具栏点“在编辑器中打开”——点“翻转”——点横向箭头——确定即可。20090714补充说明。

 

代码一:

<DIV align=center>
<TABLE style="BORDER-RIGHT: #00ffff 10px ridge; BORDER-TOP: #00ffff 10px ridge; BORDER-LEFT: #00ffff 10px ridge; BORDER-BOTTOM: #00ffff 10px ridge; BACKGROUND-COLOR: #f5fffa" cellSpacing=20>
<TBODY>
<TR>
<TD>
<TABLE height=300 borderColorDark=red width=600 border=3>
<TBODY>
<TR>
<TD>
<P style="TEXT-INDENT: 2em">
<MARQUEE scrollAmount=2 scrollDelay=30 behavior=alternate TURESPEED="true" BORDER="0"><IMG src="http://s12.sinaimg.cn/orignal/5e1a7abfg6e6503d3cd0b&amp;690"><IMG src="http://static9.photo.sina.com.cn/orignal/5e1a7abfg6e6647f9f778&amp;690" border=0><IMG src="http://s12.sinaimg.cn/orignal/5e1a7abfg6e6503d3cd0b&amp;690" border=0><IMG src="http://static9.photo.sina.com.cn/orignal/5e1a7abfg6e6647f9f778&amp;690" border=0><IMG src="http://s12.sinaimg.cn/orignal/5e1a7abfg6e6503d3cd0b&amp;690"> border=0&gt;</MARQUEE></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

代码二:

<DIV style="BORDER-RIGHT: 20pt ridge; BORDER-TOP: 20pt ridge; BORDER-LEFT: 20pt ridge; BORDER-BOTTOM: 20pt ridge; BACKGROUND-COLOR: #993366">
<DIV style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #993366">
<MARQUEE scrollAmount=2 scrollDelay=30 behavior=alternate BORDER="0" TURESPEED="true"><IMG src="http://s12.sinaimg.cn/orignal/5e1a7abfg6e6503d3cd0b&amp;690"><IMG src="http://static9.photo.sina.com.cn/orignal/5e1a7abfg6e6647f9f778&amp;690" border=0><IMG src="http://s12.sinaimg.cn/orignal/5e1a7abfg6e6503d3cd0b&amp;690" border=0><IMG src="http://static9.photo.sina.com.cn/orignal/5e1a7abfg6e6647f9f778&amp;690" border=0><IMG src="http://s12.sinaimg.cn/orignal/5e1a7abfg6e6503d3cd0b&amp;690"> border=0 </MARQUEE></DIV></DIV> 

 

代码三:

<DIV align=center>
<MARQUEE style="BORDER-RIGHT: #3333ff 12px double; BORDER-TOP: #3333ff 12px double; BORDER-LEFT: #3333ff 12px double; BORDER-BOTTOM: #3333ff 12px double" scrollAmount=2 scrollDelay=30 behavior=alternate BORDER="0" border="0" src="http://s12.sinaimg.cn/orignal/5e1a7abfg6e6503d3cd0b&amp;690"><IMG src="http://static9.photo.sina.com.cn/orignal/5e1a7abfg6e6647f9f778&amp;690" border=0><IMG src="http://s12.sinaimg.cn/orignal/5e1a7abfg6e6503d3cd0b&amp;690" border=0><IMG src="http://static9.photo.sina.com.cn/orignal/5e1a7abfg6e6647f9f778&amp;690" border=0><IMG src="http://s12.sinaimg.cn/orignal/5e1a7abfg6e6503d3cd0b&amp;690"></MARQUEE>
<DIV align=center></DIV></DIV></DIV>

 

也可以按照《巧用代码让美图呈现长卷画面效果及实例》的方法,将制作好的移动图片直接插入在下列边框中,边框颜色可以调整。

 

图/文贴入点

边框一

  边框一代码如下:

<DIV align=center>
<TABLE style="BORDER-RIGHT: #ff6666 20px ridge; BORDER-TOP: #ff6666 20px ridge; BORDER-LEFT: #ff6666 20px ridge; BORDER-BOTTOM: #ff6666 20px ridge; BACKGROUND-COLOR: #f5fffa" cellSpacing=20>
<TBODY>
<TR>
<TD>
<TABLE height=300 borderColorDark=red width=620 border=3>
<TBODY>
<TR>
<TD>
<P align=center>图/文贴入点</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P></P></DIV>

 

 

边框二

 

  边框二代码如下:

<DIV style="BORDER-RIGHT: 20pt ridge; BORDER-TOP: 20pt ridge; BORDER-LEFT: 20pt ridge; BORDER-BOTTOM: 20pt ridge; BACKGROUND-COLOR: #993366">
<DIV style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #993366">
 </MARQUEE></DIV></DIV> 

 
文字或图片内容
 边框三
 
  边框三代码如下:
<DIV style="BORDER-RIGHT: #993366 20px double; BORDER-TOP: #993366 20px double; BORDER-LEFT: #993366 20px double; BORDER-BOTTOM: #993366 20px double">文字或图片内容</DIV>
<DIV></DIV> 
  评论这张
 
阅读(310)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018