打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
漂亮的移动风景图(含制作方法)
制作简析:
一、设置一个一行三列的表格。表格的第一个单元格中的内容是移动图片的左画轴及其画轴里的内容;表格的第二个单元格中的内容是中间的移动画面;表格的第三个单元格中的内容是移动图片的右画轴及其画轴里的内容。
二、表格标签中设置了相对定位样式,居左值为0px ,居上值为0px,表格的宽度为910px,高度为430px。
三、第一个单元格中设置了相对定位样式,居左值为1px,居上值为0px,宽度为100px,高度为430px。
第一个单元格中的内容为三个表格,第一个表格是由移动标签控制的一行四列的表格。表格的每个单元格中都放入了一个同一地址的背景图片,其中,第二与第四单元格中的图片是第一与第三单元格中图片的水平翻转图片。
1、第一个单元格中的第一个表格由移动标签控制。移动标签中设置了绝对定位样式:居左值为0px ,居上值为0px。移动屏幕的宽度为100px,高度为430px,移动方向为向右。表格标签中设置了定位样式:居左值为0px ,居上值为0px。宽度为2760px,高度为430px。
2、第二个表格和第三个表格是用渐变滤镜制作的移动图片的左画轴。第二个表格中的内容是左画轴的左半部分。定位样式为绝对定位:居左值为0px ,居上值为-20px。宽度为50px,高度为470px。第三个表格中的内容是左画轴的右半部分。定位样式为绝对定位:居左值为50px ,居上值为-20px。宽度为50px,高度为470px。
四、第二个单元格中的内容是由移动标签控制的一个一行四列的表格。表格的每个单元格中都放入了一个同一地址的背景图片,其中,第二与第四单元格中的图片是第一与第三单元格中图片的水平翻转图片。移动标签中设置了绝对定位样式:居左值为0px ,居上值为0px。移动屏幕的宽度为800px,高度为430px,移动方向为向右。表格中设置了定位样式:居左值为0px ,居上值为0px。宽度为2760px,高度为430px。
五、第三个单元格中的内容与第一个单元格中的内容基本相同。
效果:http://www.360doc.com/content/13/0226/11/4127803_267967565.shtml
————————————————————
说明:
1、要制作此种效果的网页,可以将这篇网页的代码进行修改。可以修改为两种效果:
其一:用你喜欢的图片地址替换我的网页代码中的12处背景图片地址:http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3
其二:我的网页代码中的背景图片地址,中间的四处图片地址,你替换一个图片地址,其余的八处图片地址,你替换另一个图片地址。
2、每个单元格中内容的定位参考点为此单元格的左上角。
3、画轴的高度比画轴中移动图片的高度高40px,并且是上下都高20px(因为画轴的居上值为-20px,而画轴中移动图片的居上值为0px)。
“春天没来”修撰
2013年7月7日于北京
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
移动特效3【美女卷轴】
练习 9 表格标签
移动图片问题
二十二节四
CSS样式更改——列表、表格和轮廓
怎样批量给excel插入图片
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服