发新帖  新投票  回帖 
48444个阅读者,24条回复 | 打印 | 订阅 | 收藏
枳橘吟

发表时间:2011-7-31 01:58

[讨论] 字幕特效不间断滚动图片_无js语言(详解)



枳橘吟 发表在 教程交流 华声论坛 http://bbs.voc.com.cn/forum-163-1.html


本帖助威记录

精灵使 +1
你的帖子可以上新闻联播了
2017-10-06 21:53:54
婷有独钟 +5
非常详细的代码教程,谢谢枳橘吟老师的无私奉献!
2011-07-31 19:18:09
总计:魅力6点 助威2查看所有助威>>
 
枳橘吟

回复时间:2011-7-31 02:07


[本帖最后由 枳橘吟 于 2015-2-18 02:37 编辑]

 
婷有独钟

回复时间:2011-7-31 17:00
谢谢枳橘吟老师热情分享这么好的代码!

上次看到过你发的这个效果,没时间仔细研究,今天要好好学习一下!




----------------------------------------------
曾经沧海难为水,除却巫山不是云。取次花丛懒回顾,半缘修道半缘君。
 
婷有独钟

回复时间:2011-7-31 17:03


[本帖最后由 婷有独钟 于 2011-7-31 17:15 编辑]




----------------------------------------------
曾经沧海难为水,除却巫山不是云。取次花丛懒回顾,半缘修道半缘君。
 
婷有独钟

回复时间:2011-7-31 17:55




----------------------------------------------
曾经沧海难为水,除却巫山不是云。取次花丛懒回顾,半缘修道半缘君。
 
婷有独钟

回复时间:2011-7-31 17:59
枳橘吟老师发明的2楼那个效果非常漂亮!




----------------------------------------------
曾经沧海难为水,除却巫山不是云。取次花丛懒回顾,半缘修道半缘君。
 
婷有独钟

回复时间:2011-7-31 19:16
  我试着换了三张大小相同的图片来看效果

  我发现一点小问题:就是左圆柱的右边和右圆柱的右边都和图像之间有一条缝隙

  按此在新窗口浏览图片
  按此在新窗口浏览图片

  我尝试修改左圆柱left: -1px,好像问题解决了。右圆柱我也修改为left: -1px,发现那条缝隙却跑到了右边

  按此在新窗口浏览图片

  我只好复原left: 0px,设置width: 199px后,我发现问题也解决了。

  我觉得圆柱窄一些好看,想将右圆柱宽度设为和左圆柱宽度一样,发现有些麻烦,要修改很多数据~~

  今天就研究到这里吧,先吃饭去了~~




----------------------------------------------
曾经沧海难为水,除却巫山不是云。取次花丛懒回顾,半缘修道半缘君。
 
婷有独钟

回复时间:2011-7-31 19:18
非常详细的代码教程,谢谢枳橘吟老师的无私奉献!




----------------------------------------------
曾经沧海难为水,除却巫山不是云。取次花丛懒回顾,半缘修道半缘君。
 
枳橘吟

回复时间:2011-7-31 20:51

原帖由 婷有独钟 于 2011-7-31 19:18 发表
非常详细的代码教程,谢谢枳橘吟老师的无私奉献!


  玩上瘾了?谢谢婷版关注,奖励,倾情尝试。
  萌生制作中的想法到实现这个玩意,历时数年。如果用js实现不间断效果,在网上有数不清的资料,不过基本相同。应用js,在发帖上在某些网站无法实现,因此,对免js实现同样的效果便“耿耿于怀”了。
  首帖,应该说清“道理”了。它与原来的做法只是增加了一个“装载图片的容器”。再咯嗦一下:
  1、再打个比方。这个容器好比火车厢,将图片装在里面。
  2、现在,字幕功能针对的就是“容器”了。往返的时间、移动的距离都是针对“容器”;
  3、图片的位置只与“容器”相关,与“字幕功能”无直接关系了;它可以在容器内任意设置位置,不受“字幕功能”的管束。
    还以火车厢比方,就是图片在车厢内怎么放与车厢怎么移动可以分开考虑。

  上面几点可以算作“基本原理”,想清楚了,就可以随心所欲了。
  “容器”宽度很容易算出来:需显示的图片的总宽(不包括增加的)减去“字幕显示窗”的宽度。

  我的制作中,有点乱来,没考虑美观,只是在想问题,解决问题,实现自己的想法(自己出题自己做),验证自己的想法是否经得住各种情况的“考验”。滚轴左小右大即是出于这些原因。就是想试试,不同的情况是否也能“通过”。
  二楼的习作,由三部分组成,基本代码实际上是一样的(不间断滚动)。不同之处:
  1、左、右部分将图片左右反向(整体或单张反向均可),图片的排列顺序也要反过来;
    如果中间部分排序为:1、2、3、4,那么左、右的就应为:4、3、2、1;
  2、在其上增加表格,实现不透明效果,产生“圆柱”效果。
  3、将三个“不间断”效果靠在一起;
  4、以左部分为准,调整中间部分的图片位移,使得在视觉效果上这两部分的图片能“衔接”上;然后,以中间部分为准,调整右部分的图片,使中、右部分的图片效果“衔接”上。当然也可以以中间部分为准,来调整左、右部分的图片位移。因图片位移造成空缺,当然还是按顺序,以其相邻的图片补充。
  这样做,是想“以假乱真”。不过有些自找麻烦。
  图片在定位上应该移动多少、左移还是右移,是可以计算得到的,不是猜或是盲目试出来的(尝试时,取整数为好,免得增加麻烦)。只要领会了首帖中的内容,怎么变也不会迷糊。一楼为单一对象,简单得多;二楼玩花样,而且是不同方向移动,多个对象需要衔接,名堂就多了些。

  你想将“右柱”改小,这很简单。将“左柱”的代码复制、替换“右柱”的代码,然后调整一下“右柱”图片的位移就可以了(如果中间部分的宽度改动了,需改动的地方稍多一点)。



[本帖最后由 枳橘吟 于 2011-8-22 13:58 编辑]

 
枳橘吟

回复时间:2011-7-31 22:09


[本帖最后由 枳橘吟 于 2015-2-18 02:36 编辑]

 
陈仓云野

回复时间:2011-8-1 00:59
这个效果很漂亮!我也要学学。谢谢枳橘吟朋友热情分享!




----------------------------------------------
陈年往事如烟散,沧海一笑天涯远。云漫山间任舒卷,野鹤长鸣万里天。
 
枳橘吟

回复时间:2011-8-1 07:59

原帖由 陈仓云野 于 2011-8-1 00:59 发表
这个效果很漂亮!我也要学学。谢谢枳橘吟朋友热情分享!

  感谢关注、支持。

 
婷有独钟

回复时间:2011-8-2 21:01

原帖由 枳橘吟 于 2011-7-31 20:51 发表

原帖由 婷有独钟 于 2011-7-31 19:18 发表
非常详细的代码教程,谢谢枳橘吟老师的无私奉献!


  玩上瘾了?谢谢婷版关注,奖励,倾情尝试。
  萌生制作中的想法到实现这个玩意,历时数年。如果用js实现不间断效果,在网上有数不清的资料,不过基本相同。应用js,在发帖上在某些网站无法实现,因此,对免js实现同样的效果便“耿耿于怀”了。
  首帖,应该说清“道理”了。它与原来的做法只是增加了一个“装载图片的容器”。再咯嗦一下:
  1、再打个比方。这个容器好比火车箱,将图片装在里面。
  2、现在,字幕功能针对的就是“容器”了。往返的时间、移动的距离都是针对“容器”;
  3、图片的位置只与“容器”相关,与“字幕功能”无直接关系了;它可以在容器内任意设置位置,不受“字幕功能”的管束。
    还以火车箱比方,就是图片在车箱内怎么放与车箱怎么移动可以分开考虑。

  上面几点可以算作“基本原理”,想清楚了,就可以随心所欲了。
  “容器”宽度很容易算出来:需显示的图片的总宽(不包括增加的)减去“字幕显示窗”的宽度。

  我的制作中,有点乱来,没考虑美观,只是在想问题,解决问题,实现自己的想法(自己出题自己做),验证自己的想法是否经得住各种情况的“考验”。滚轴左小右大即是出于这些原因。就是想试试,不同的情况是否也能“通过”。
  二楼的习作,由三部分组成,基本代码实际上是一样的(不间断滚动)。不同之处:
  1、左、右部分将图片左右反向(整体或单张反向均可),图片的排列顺序也要反过来;
    如果中间部分排序为:1、2、3、4,那么左、右的就应为:4、3、2、1;
  2、在其上增加表格,实现不透明效果,产生“圆柱”效果。
  3、将三个“不间断”效果靠在一起;
  4、以左部分为准,调整中间部分的图片位移,使得在视觉效果上这两部分的图片能“衔接”上;然后,以中间部分为准,调整右部分的图片,使中、右部分的图片效果“衔接”上。当然也可以以中间部分为准,来调整左、右部分的图片位移。因图片位移造成空缺,当然还是按顺序,以其相邻的图片补充。
  这样做,是想“以假乱真”。不过有些自找麻烦。
  图片在定位上应该移动多少、左移还是右移,是可以计算得到的,不是猜或是盲目试出来的(尝试时,取整数为好,免得增加麻烦)。只要领会了首帖中的内容,怎么变也不会迷糊。一楼为单一对象,简单得多;二楼玩花样,而且是不同方向移动,多个对象需要衔接,名堂就多了些。

  你想将“右柱”改小,这很简单。将“左柱”的代码复制、替换“右柱”的代码,然后调整一下“右柱”图片的位移就可以了(如果中间部分的宽度改动了,需改动的地方稍多一点)。


非常感谢枳橘吟老师!您的热情、耐心、无私令我非常感佩!

因为一些原因,我可能较长时间不能上网了,也不能再跟您学习代码知识了~~

能在华声认识像您这样风格高尚,乐于奉献的良师益友,是我极大的荣幸!
衷心的祝福您:健康、快乐、幸福、平安!




----------------------------------------------
曾经沧海难为水,除却巫山不是云。取次花丛懒回顾,半缘修道半缘君。
 
枳橘吟

回复时间:2011-8-2 22:12

原帖由 婷有独钟 于 2011-8-2 21:01 发表
非常感谢枳橘吟老师!您的热情、耐心、无私令我非常感佩!
因为一些原因,我可能较长时间不能上网了,也不能再跟您学习代码知识了~~
能在华声认识像您这样风格高尚,乐于奉献的良师益友,是我极大的荣幸!
衷心的祝福您:健康、快乐、幸福、平安!


  大年夜吃年饭,尽是好话。谢谢婷版褒奖。
  不要说跟我学什么,交流一下罢了。
  忙正事要紧。闲暇时、需要时再交流。
  也祝愿你,诸事安好、顺利。

 
维度视觉设计

回复时间:2011-8-20 21:01
卡不懂

 
成绩思寒

回复时间:2011-8-21 16:25
枳橘吟真代码高手,期望你更多特效代码出现。




----------------------------------------------
三十年后,如果世界上还有坚持这个词,希望它属于我;三十年后,如果世界上还有感动这个词,希望它属于你。
 
枳橘吟

回复时间:2011-8-22 14:04

原帖由 成绩思寒 于 2011-8-21 16:25 发表
枳橘吟真代码高手,期望你更多特效代码出现。

  感谢关注和鼓励。不言高手、低手,只是玩玩。
  也感谢 维度视觉设计 朋友赏光。

 
寻1个终点

回复时间:2012-2-11 11:22
学习了

 
枳橘吟

回复时间:2012-2-14 04:09

原帖由 寻1个终点 于 2012-2-11 11:22 发表
学习了

感谢朋友关注。

 
梦回轻狂

回复时间:2013-3-15 12:00
枳老辛苦了,问好。

非常细致的原理分析,巧妙使用了人体的视觉暂留效应和错觉,简单实用的图片回环滚动展示方法!




----------------------------------------------

  能跑的不如能吃的,能吃的不如能睡的;睡觉是头等大事,吃饭是二等大事,运动是三等大事,其余的都是小事。


  中医认为药物和食物是同源的,自古就秉持“寓医于食”的防病治病理念。《黄帝内经》云:“大毒治病十去其六;常毒治病十去其七,小毒治病十去其八,无毒治病十去其九”,“先进厨房,后进药房”的说法在民间更是广为流传。

  食园有路心作引,厨海无涯汗推舟……

 
发新帖 新投票
 回帖
查看积分策略说明快速回复主题
你的用户名: 密码:   免费注册(只要30秒)


启用 Html 代码
使用个人签名
(请您文明上网理性发言!并遵守相关规定
   



Processed in 0.041085 s, 8 q - 无图精简版,sitemap,