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

新高山流水博客

网内存知己,天涯若比邻!选择大于努力,机会大于选择!成功在于项目!友你友我友天下

 
 
 

日志

 
 
关于我

大家好,我是新高山流水。开始玩博百度发现有很多与我同名人都在玩博,男女都有,为与众多的同名博客区分,我更名为”高山流水”。没想到区区6000字的中国字库太少了,叫啥都有重名的。这个“高山流水”的名字又是一大堆!为了区分他们我想来想去,“四海之内皆兄弟也”,古人都已定义往来都是朋友。今天的网络网及全球每个角落,能认识全天下的朋友实在 是一种荣幸,真得感谢比尔盖茨创建了网络!没必要太狭隘吧?这样就第三次更名为“新高山流水”。欢迎全天下的朋友都来光顾本人博客,没茶没酒没招待,就只有蚂蚁般的文字恭候各位了!

网易考拉推荐

【转载】图片移动代码  

2012-06-27 09:59:29|  分类: 博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自我心永恒《图片移动代码》

图片移动代码集锦新编

         首先你把你准备好的图片点击日志功能菜单上的插图 如何让图片动起来 - Good fun - Good fun博客按钮,上传到日志(你相册或者其他允许外链的网站图片,不上传直接获取图片地址亦可)。

 就像下面这张素材:

如何让图片动起来 - Good fun - Good fun博客

        为什么上传图片到日志呢?图片只有上传到网络,才能有图片地址,上传的图片的地址获取如下: 

如何让图片动起来 - Good fun - Good fun博客

 接下来看一个图片滚动效果:

 

 

<CENTER>
<MARQUEE height=300 width=600 align="center" scrolldely="50"  >
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=400 background=http://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.gif align=center height=300>
<TBODY><TR><TD></TD></TR></TBODY></TABLE></MARQUEE></CENTER>

       这是基本滚动代码,是向左滚动的,那么如果想设置滚动的方向,那么就只要在代码第一个“MARQUEE”后面添加一个滚动的方向属性即可:

        滚动属性 
        向上(direction=up) 向下(direction=down) 向左(direction=left) 向右(direction=right) 
        behavior=scroll 一圈一圈绕着走   behavior=slide 只走一次   behavior=alternate 来回

 

       下面我们就复制其中一个属性,例如向上滚动(direction=up),那么我们复制“direction=up”粘帖到代码中,得代码如下:

<CENTER>
<MARQUEE  direction=up  height=300 width=600 align="center" scrolldely="50"  >
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=400 background=http://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.gif align=center height=300>
<TBODY><TR><TD></TD></TR></TBODY></TABLE></MARQUEE></CENTER>

效果如下:

 

 

       看到这个效果你会发现,在向上滚动的时候,看到整个图片显示的时间比较短,那是因为滚动区域的高度是和图片一样的(都是300),所以我们要改一下height后面的数值(注意,这里有两个height=300,我们要改滚动区域的高度数值,红色那个,所有竖着走的都得改),我们改成height=500,这里我们横着不走,所以把宽度的滚动区域不用600了,改成和图片大小一样400好了,改好后代码如下:

 <CENTER>
<MARQUEE  direction=up  height=500 width=400 align="center" scrolldely="50"  >
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=400 background=http://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.gif align=center height=300>
<TBODY><TR><TD></TD></TR></TBODY></TABLE></MARQUEE></CENTER>

效果如下: 

 

 

 

          好了,各个属性可以根据你自己的需要,添加更换即可!这里就不一一说了,滚动的速度等,你也可以自己设置!

左右来回走代码:

<CENTER>
<MARQUEE   behavior=alternate    height=300 width=600 align="center" scrolldely="50"  >
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=400 background=http://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.gif align=center height=300>
<TBODY><TR><TD></TD></TR></TBODY></TABLE></MARQUEE></CENTER>

左右来回走效果如下:

 

 

 上下来回走代码如下:

<CENTER>
<MARQUEE  direction=up behavior=alternate    height=500 width=400 align="center" scrolldely="50"  >
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=400 background=http://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.gif align=center height=300>
<TBODY><TR><TD></TD></TR></TBODY></TABLE></MARQUEE></CENTER>

 

上下来回走效果:

 

 

下面我们来讲一下移动羽化图片代码:

<CENTER>
<MARQUEE height=300 behavior=alternate width=600 scrolldely="50" align="center">
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=400 align=center height=300>
<TBODY>
<TR>
<TD><IMG style="FILTER: alpha(opacity=100,style=2)" src="
http://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.gif" width=400 height=300> </TD></TR></TBODY></TABLE></MARQUEE></CENTER>

 

 

上面代码效果如下:

 

如何让图片动起来 - Good fun - Good fun博客

 

          这是一个左右来回走动加圆形羽化的效果,你可以更改各个属性来设置你喜欢的效果,Goodfun这里就不一一细说了!

 下面讲一下,移动图片加链接的代码:

<CENTER>
<MARQUEE height=300 behavior=alternate width=600 scrolldely="50" align="center">
<TABLE border=0 cellSpacing=0 borderColor=#999999 cellPadding=0 width=400 align=center height=300>
<TBODY>
<TR>
<TD>  <A href="
http://kaixinhaoren99.blog.163.com" target=_blank>   <IMG style="FILTER: alpha(opacity=100,style=2)" src="http://img.ph.126.net/QOD9u0ltaXh6t0g78P1eHw==/1532068298236805092.gif" width=400 height=300>  </A> </TD></TR></TBODY></TABLE></MARQUEE></CENTER>

 

    代码说明:

       仔细看上面的代码跟刚才那个圆形左右来回移动图片代码就多了红色的文字,这个就是链接的属性!斜体红色字就是点击图片后去到的网页地址,换成你自己的链接地址!“target=-blank”是指打开你设置的链接网页的时候是另开窗口(即不关闭当前网页),删除它,就是本窗口打开链接(即关闭当前的网页)

效果如下(效果和不加链接一下,只是这里你点击移动图片就去到了我的博客首页: http://kaixinhaoren99.blog.163.com

 

如何让图片动起来 - Good fun - Good fun博客

 

       关于滚动方向,羽化形状等设置同上!不再重复!自己去慢慢尝试,有问题给我留下评论交流!今天就先到这里,有时间再和大家交流多张图片并着或者上下并着滚动,在上面加flash及让图片在图片上或者flash,视频上滚动的代码!

博客技巧 原创空间 音画网站  图片素材 精品音画  在线工具  在线书籍 代码复制
 美女诱人 PS教程 休闲游戏   QQ技巧 透明swf PPT技巧  友情链接 u5教程
CAD教程  上传网站 音播放器 日志边框 机械加工 flash教程 经典图库 返回首页

我要啦免费统计

  评论这张
 
阅读(44)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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