华声在线
华声论坛
辣眼
老照片
大视界
美女
自拍
摄影
娱乐
搞笑
音乐
小说
户外
长沙网
RSS
手机和ipad版
游客:
登录
免费注册
栏目列表
搜索
领红包
自选风格
版主推荐
社区功能
审核投诉
帮助
VIP申请
华声论坛
→
音画学堂区
→
教程交流
→
[讨论] 字幕特效不间断滚动图片_无js语言(详解)
25
1/2
1
2
下一页»
会员登录
用户名
UID
30秒 立即注册
密码
忘记密码
有效期
一年
一月
一天
不保存
登录帮助
帖子主题:
[讨论] 字幕特效不间断滚动图片_无js语言(详解)
共
51073
个阅读者,
24
条回复 |
打印
|
订阅
|
收藏
枳橘吟
发表时间:2011-7-31 01:58
[讨论] 字幕特效不间断滚动图片_无js语言(详解)
枳橘吟 发表在
教程交流
华声论坛 http://bbs.voc.com.cn/forum-163-1.html
分享到:
微信
QQ好友和群
QQ空间
新浪微博
>
本帖助威记录
精灵使
+1
你的帖子可以上新闻联播了
2017-10-06 21:53:54
婷有独钟
+5
非常详细的代码教程,谢谢枳橘吟老师的无私奉献!
2011-07-31 19:18:09
总计:魅力
6
点 助威
2
次
查看所有助威>>
精彩推荐
两会全国人大发布会回应了这些问题
踏上新征程 再创新伟业
委员建议:为空巢青年提供婚恋咨询服务
将幼儿园纳入义务教育 你赞成吗
“违背祖训”的“神医”为何这么多
饭店包间装摄像头 是服务还是监控?
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
枳老辛苦了,问好。
非常细致的原理分析,巧妙使用了人体的视觉暂留效应和错觉,简单实用的图片回环滚动展示方法!
----------------------------------------------
能跑的不如能吃的,能吃的不如能睡的;睡觉是头等大事,吃饭是二等大事,运动是三等大事,其余的都是小事。
中医认为药物和食物是同源的,自古就秉持“寓医于食”的防病治病理念。《黄帝内经》云:“大毒治病十去其六;常毒治病十去其七,小毒治病十去其八,无毒治病十去其九”,“先进厨房,后进药房”的说法在民间更是广为流传。
食园有路心作引,厨海无涯汗推舟……
25
1/2
1
2
下一页»
预览帖子
2007-10-30 09:01
快速回复主题
你的用户名:
密码:
免费注册(只要30秒)
启用 Html 代码
使用个人签名
(请您文明上网理性发言!并遵守
相关规定
)
控制面板首页
修改头像
编辑个人资料-修改密码
我的权限
论坛状态
Processed in 0.019402 s, 8 q
-
sitemap
,