[习作] 代码相册_硬翻页效果探求

枳橘

　　简易代码（含JS）硬翻页相册。该制作为套改练习。
　　此中图片为横幅，正、反向翻页，完全循环。
　　如果不强调图片的长宽比，更换其中的图片组链接即可，其他无须更改。

晓洲

好帖!欣赏!收藏!好好学习!

枳橘

回复 17# 白云悠悠

　　俗话说，办法是懒人想出来的。
　　一锅端，就是一家伙把地址都拿到，然后处理，相对来讲，快点，方便点。
　　能懒则懒，尽量懒。
　　三两句话说不清。不说了。

白云悠悠

　　广告语：没有最好，只有更好。　　如果“懒”也评个水平，那我倒是可以戴戴这顶帽子。　　别看地址多， ...

 

枳橘 发表于 2011-6-8 17:57

 

“一锅端”是什么方法啊？看来“懒”，是需要一点水平的，不然，“懒”也懒不出名堂来哦。

枳橘

很喜欢14楼的那种翻页效果，给原图增加了很多情趣，实在是好。仔细看看，这么一个看似简洁的帖子，要花费作者多少工夫和精力啊。代码的编排不说，光就是那些图片的地址，也是要输入很久的。感谢作者，佩服作者，你是最棒的。
白云悠悠 发表于 2011-6-8 09:14

　　广告语：没有最好，只有更好。
　　如果“懒”也评个水平，那我倒是可以戴戴这顶帽子。
　　别看地址多，其实也不费事，当然不是一个个“复制”“粘贴”的办法。这就是懒的水平了，一锅端。
　　谢谢版主褒奖。

白云悠悠

很喜欢14楼的那种翻页效果，给原图增加了很多情趣，实在是好。仔细看看，这么一个看似简洁的帖子，要花费作者多少工夫和精力啊。代码的编排不说，光就是那些图片的地址，也是要输入很久的。感谢作者，佩服作者，你是最棒的。

枳橘

打开了我们的视野（无论就画册的内容还是对翻页技巧的诠释，同样如此）。谢谢。 独影孤踪 发表于 2011-6-7 12:48

　　谢谢兄台，来了些真格的。看来，有些体会。
　　话不投机半句多。难得难得。

独影孤踪

打开了我们的视野（无论就画册的内容还是对翻页技巧的诠释，同样如此）。谢谢。

枳橘

　

　　帖中图片链接引自本站征集图片时的发帖，与成书后的内容不符。只是玩玩，无大碍吧。
　　幻灯中图片变形，未改变原图状况。若按原图比例制作，又需重新上传，花不来。省了。

　

　

　

　

　

　

　

　

　

　

枳橘

　　此“代码硬翻页相册”，剖析、把玩，煞是过瘾。 基本摸清了制作思路及处理细节。以井蛙的见识，禁不住感慨叫绝。有如细细品味美文、佳句。
　　此作的精要就是实现翻页了。大构思于下。
　　设置两层、左右两部分，四个对象装载图片，叫它们：左上、左下，右上、右下（方便叙述）。
　　以点击右半区域，实现向左翻页为例（横幅图片），步骤于下。
　一、第一步：
　　１、将左下设置1号图（显示左半部分）；
　　２、将左上设置2号图（左半部分），将宽度设置为０（当然看不到了）；
　　３、将右下设置2号图的右半部分（看不到，被右上的内容遮挡了）；
　　４、将右上设置1号图的右半部分（可见）。
　　这时看到的是完整的1号图。
　二、第二步：
　　１、开始将右上的1号图（右半部分）逐步变窄。这样，右下的2号图也逐步显示。
　　２、当右上图至０宽度时，将右上更换为2号图（右半部分），宽度正常。变化极快，又因右下也为2号图，看不出变化。
　　３、启动第三步骤。
　三、第三步：
　　１、左上的2号图逐步变宽，一直到正常宽度，完全显示。逐步挡住了左下的1号图。
　　２、设置过程结束信号。
　　这时，全部过程完成，看到的是完整的2号图。
　　也就是说，显示的是，左上、右上装载、拼合的2号图。至于左下、右下就暂时不必管它了。

　　整个变化的细节、设置，处理方式十分精彩，要表述清楚，需费许多笔墨；又，恐土狗子学洋狗子叫，胡乱言代码，遗笑大方，免了。

枳橘

回复 9# 临风独酌

　　兄台客气。还礼。

临风独酌

下载 (56.43 KB)

2011-4-27 11:05

回复 4# 枳橘

 

 

枳橘

回复 6# 好好学习

　　感谢赏光。
　　不着急，慢慢来。
　　功夫不负有心人，付出了，总会有回报。
　　过期？将文件下载了，收在电脑里，怎么过期？收藏链接，当然有可能。

枳橘

回复 5# 独影孤踪

　　感谢兄台关注、鼓励。

好好学习

我的音画知识还没有达到制作的水平，收下来，以后会有用的。不知会不会过期。

独影孤踪

学习并收藏

枳橘

　　再试一个。
　　红楼梦连环画。
　　这个与前两个略有不同，在第二例基础上，稍作调整，将横幅用于竖幅。两个图片组的链接相同（亦可适用半幅图片制作）。
　　手动正、反顺序翻页，不循环。加翻页计数。
　　加正、反自动翻页，间隔5秒。设置三按钮，供控制自动状态。
　　鼠标进入画面停止自动，离开画面恢复自动。
　　文件内备有注释和说明，供把玩、制作参考。

枳橘

　　此两练习，基本情况差不多。第一例为套改，摸索、消化，第二例有所发挥。
　　第一例适合横幅图片，如风景之类；第二例适合竖幅图片，如书籍式样的情况。
　　这样，比较方便了。如果网上有现成的链接，就不必重新上传，选一个适合的，更换图片链接即可完成。因制作中含JS，最好还是用网页方式（浮动框架iframe）发帖，以免出现不正常的情况。
　　两例的基本思路是一样的，相通的。比如竖幅图片，可以将两张拼成一张，成为横幅图片，用第一例制作。当然，这样就需要重新上传了，没懒可偷。

下载 (2.08 KB)

2011-4-26 00:54

枳橘

　　此制作为上帖相册（横幅）改进效果。
　　图片总数宜为偶数，首尾各加一张补充图片（可视情况处理）。然后将奇、偶数图片分为两组，左边为奇数组图片，右边为偶数组图片。更换图片组即可，其他无须变动。
　　如果强调图片的长宽比，可调整一下"DHTMLBOOK"类对象的相关数据。
　　此中图片宜为竖幅，仿书籍效果。在左右两区域点击，可顺序正、反向翻页，至首、尾端停止，不循环。

电影《红河谷》－背景音乐