dreamweaver网页制作中,怎样实现图片的走马灯效果
发布网友
发布时间：2022-04-25 07:04
共5个回答
懂视网
时间：2022-04-21 09:16
主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一点平面几何知识（计算间距、角度啥的），详细过程如下：
首先设计一下要显示的布局（俯视图），途中垂直的线为辅助线，计算偏移量时需要用的：
红色框框为旋转面（即走马灯效果的结构最终以该面的中点为旋转轴旋转的），六个面也都是基于这个面做的布局，先看红框下面的三个面，左侧的面原本在蓝色线处，通过旋转到达绿色线处，右边同理，中间的面只需要在Z轴方向移动二分之根号三个边长的距离即可，所有的面均通过偏移和旋转的方式达到上图的结构，需要注意的是要保证有图案的面（本例中使用的是文字，思路一致）要向外，比如上面中间的面，在Z轴向外偏移二分之根号三个边长的距离之后还要以中点为圆心旋转180°，所有的面同理易得。在此过程中需要牢记的一点技术是：三维坐标系中，从坐标原点出发，向着坐标轴的正方向看去，逆时针旋转时rotate(X/Y/Z)的值为正数，顺时针旋转时，rotate(X/Y/Z)值为负数。
设置结构：一个3D场景、一个走马灯的旋转面和走马灯的六个面：
1 2 3 4 5 6
设置3D场景：
.wapper{ -webkit-perspective:800; /*观察距离800*/ -webkit-perspective-origin:50% -100%; /*从正前方上方斜向下观察*/ width:400px; height:300px; margin:100px auto;} 设置旋转面：
@-webkit-keyframes rotation{ /*动画过程*/ 0%{-webkit-transform:rotateY(0deg);} 100%{-webkit-transform:rotateY(-360deg);}}.rotate{ -webkit-transform-style:preserve-3d; /*3D变换*/ -webkit-animation: rotation 6s infinite; /*动画名称、时间、循环动画*/ -webkit-animation-timing-function: linear; /*匀速动画*/ -webkit-transform-origin:center; /*沿中间旋转*/ width:100%; height:100%; position:relative; /*相对定位布局*/} 对六个面除了位置之外的通用样式做设置：
.item{ -webkit-transform-origin:center; /*均沿中心旋转*/ width:198px; height:300px; position:absolute; /*绝对定位在旋转面上*/ background:none; text-align:center; line-height:300px;} 分别设置六个面的位置，以一号为例（上面结构图中红框下面左边绿色线标注的面），所有的数值均需要经过几何计算得来：
.itemOne{ left:-50px; -webkit-transform:translateZ(87px) rotateY(-60deg); /*z轴向外移动87px，沿Y轴方向旋转-60°*/ background:#f00;} 在鼠标悬浮在该结构上时动画停止：
.rotate:hover{ -webkit-animation-play-state:paused; /*设置动画状态*/} 本例子只有在webkit内核的浏览器中可以查看效果，如需兼容其他现代浏览器，需添加 -moz- 等前缀，完整代码如下：
Animation Test 1 2 3 4 5 6
热心网友
时间：2022-04-21 06:24
新建 HTML 文档；
修改标题为"跑马灯"
保存为 index.html 文件。
首先，编写跑马灯部分的静态 HTML 代码，把图片排列起来
在 <body> 和 </body> 标签中添加以下代码：
<div>
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
</ul>
</div>
给上一步的 HTML 代码中的 div 标签增加 class 属性，如下：
<div class="con">
编写跑马灯部分的 CSS 样式代码，代码放在 <head> 和 </head> 标签中，如下：
<style type="text/css">
ul{list-style:none; padding:0; margin:0;}
.con{ width:1105px; height:225px; overflow:hidden; border:2px solid #666; margin:10px auto 0 auto; padding:5px 0 0 5px;}
.con ul li{ float:left; margin:0 5px 10px 0;}
.con ul li img{ display:block; width:209px; height:209px; padding:2px; border:1px solid #ccc;}
</style>
引入 JQuery 库
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
引入 Marquee 插件
<script type="text/javascript" src="marquee2.js"></script>
代码放在 </body> 标签前，如图：
给 div 增加 marquee 类
<div class="con marquee">
保存文件，在浏览器中打开，就可以看到图片开始滚动了。
图片默认的滚动方向是“向上滚动”
如果要修改图片滚动的方向，可以给 div 指定 direction 属性，属性值可以取：
up 上
down 下
left 左
right 右
热心网友
时间：2022-04-21 07:42
热心网友
时间：2022-04-21 09:16
定时器效果．．就是可以设定一个时间值．0.1秒，半秒，1秒，随你．然后每隔这个时间做一件什么事．比如．换边框的颜色．
热心网友
时间：2022-04-21 11:08
