我一直在试图为一组照片构建简单的传送带效果。使用PrototypeJS使用效果库很容易,但我在理解如何使用CSS3来实现这一点时遇到问题。基于CSS3的任何方向的传送带无论顺序
我已经制定了一些解决方案,但他们只有在HTML中的照片顺序也是您计划导航的顺序时才有效。这里情况不同。
不论照片的顺序的:
- 为了能够使用基于CSS3规则(平移X /过渡等),以从视图动画移除活动图像的
- 替换为它任何其他图像,如在下拉菜单中选择
- 他们俩都在相同的方向,如由下拉菜单确定
- 它们都并排 出现侧0
例如:
- 第一张照片是 '活性' 和鉴于
- 我选择 “从左向右” 格式他菜单
- 我选择““作为照片编号
- 我点击”转“
- 作为类的“照片”的第一DIV移动到右侧,第3 DIV位于其左侧(的类“相片”),并且也正在同步移动到右侧
一些考虑:
- @webkit优选的,但无论
- 布局,位置等的CSS是故意不存在的,以便不妨碍任何溶液
- 我用PrototypeJS为简单起见,你也可以做到,或者没有图书馆所有,但不的jQuery(对不起)
示例标记立足理念&建议围绕
我想这里有完整的HTML/CSS /示例页面的JS,但在部分预览过程中保持渲染,所以以防万一它被链接在这里:
http://www.gimee.org/question.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Question</title>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<style>
#demo {
float: left;
width: 520px;
height: 100%;
overflow: hidden;
}
#container {
width: 3000px;
}
.photo {
float: left;
: 500px;
padding: 10px;
}
#controls {
float: left;
}
</style>
</head>
<body>
<div id="demo">
<div id="container">
<div class="active photo">
<img src="http://farm2.static.flickr.com/1161/4727417148_ed8d691aa3.jpg">
</div>
<div class="photo">
<img src="http://farm2.static.flickr.com/1013/4730980370_75cceea5be.jpg">
</div>
<div class="photo">
<img src="http://farm2.static.flickr.com/1401/4606449779_1bc79e6078.jpg">
</div>
<div class="photo">
<img src="http://farm5.static.flickr.com/4053/4690748949_db09007187.jpg">
</div>
</div>
</div>
<div id="controls">
<p>Direction:</p>
<select id="direction">
<option value="right">from Left to Right</option>
<option value="left">from Right to Left</option>
</select>
<p>Photo Number:</p>
<select id="photoNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<p><a href="#" id="go">Go</a></p>
</div>
<script>
var Demo = {
run: function() {
console.log('Init');
Event.observe('go', 'click', this.go.bind(this));
},
go: function(e) {
var direction = $('direction').value;
var photoNum = $('photoNumber').value - 1;
console.log('direction:', direction, 'photoNum:', photoNum);
var container = $('container');
var photoCurrent = container.select('.active')[0];
var photoNext = container.select('.photo')[photoNum];
if (photoCurrent != photoNext) {
if (direction=="right") {
/*
Move the two photos, appearing side-by-side, from Left to Right
so that the 'Next' photo appears to push the 'Current' photo out
*/
console.log('from Left to Right');
} else {
/*
Move the two photos, appearing side-by-side, from Right to Left
so that the 'Next' photo appears to push the 'Current' photo out
*/
console.log('from Right to Left');
}
} else {
console.log("Do nothing since you're asking for the currently active photo");
}
}
};
Demo.run();
</script>
</body>
</html>
耻辱没有jQuery - 对于阅读此内容的任何人来说,JQuery UI Tools可以在大约20秒内完成此操作。 http://flowplayer.org/tools/demos/scrollable/index.html – aronchick 2010-06-27 03:22:56
没有jQuery的原因主要是因为(a)我不想依赖库,但可以使用PrototypeJS(如果必须的话)(b)我真的很想了解解决方案,而不是将其隐藏在库中 – donohoe 2010-06-27 14:25:58