因此说,你的问题有一定的歧义的。
css3还有一种方法可以实现滚动。就是使用过度效果(transition),他也可以实现滚动的效果。而且,个人感觉比较符合你的意思。
其具体的做法是,给超链接滑过状态一个图片属性,如:
li a img {margin-top:0px}
li a:hover img {margin-top:-20px}
li a img {-webkit-transition: margin-top 0.5s}/*注意这里的hack,照顾多个浏览器*/
这样,鼠标滑上图片,图片就会动画向上滑动20像素,鼠标离开,又滑下来。
再扯下严格意义的【动态滚动的图片】,一般的解释是一组图片可以在某个区域内动画滑动。注意是一组。css通常不具有处理多组图片(也有css模拟动画帧的效果的)的效果。动态滚动图片常见的有2种,一种是可控制的滚动列表,一种是自动无限循环滚动。通常用来作为滚动新闻、组图或相册(风采)使用。
可以的
js创建img,指定位置:
var image = createElement("image")image.src = "位置"
image.id = "img"
2.
(1) 使用CSS接口:
interface CSS{
#img {zoom: 2}
}
setTimeout(function() {
interface CSS
{
#img {zoom: 1}
}}(), 5)
(2) 属性操作:
$('img').zoom = 2setTimeout(function() {$('img').zoom = 1}(), 5)
可知js即可让图片动起来(刚才的实例为放大缩小)
下面是一个例子,具体的需要你自己慢慢学习。
<!DOCTYPE html><html>
<head>
<style>
div
{
width:100px
height:100px
background:red
position:relative
animation:myfirst 5s linear 2s infinite alternate
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate
}
@keyframes myfirst
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
</style>
</head>
<body>
<p>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>