这里有新鲜出炉的精品教程,程序狗速度看过来!
它提供了一个比普通 js 更面向对象的 documentAPI。
它为 web 开发者提供了一个跨浏览器 js 解决方案。在处理 js、CSS、html 时候。
MooTools 是一个简洁,模块化,面向对象的开源 JavaScript web 应用框架。
容器采用相对定位, 图片采用绝对定位, 当鼠标移动到相应的图片上, 改变去 left 属性, 用 tween 实现动画效果.
效果预览如下:
实现原理:
容器采用相对定位, 图片采用绝对定位, 当鼠标移动到相应的图片上, 改变去 left 属性, 用 tween 实现动画效果.
代码分析: 写一个 picSlider 类实现代码封装
- <div id="container">
- <img src="http://files.phperz.com/file_images/article/201104/r_song1.jpg"
- alt="" />
- <img src="http://files.phperz.com/file_images/article/201104/r_song2.jpg"
- alt="" />
- <img src="http://files.phperz.com/file_images/article/201104/r_song3.jpg"
- alt="" />
- <img src="http://files.phperz.com/file_images/article/201104/r_song4.jpg"
- alt="" />
- <img src="http://files.phperz.com/file_images/article/201104/r_song5.jpg"
- alt="" />
- </div>
CSS 样式
- #container {
- width: 459px;
- height: 200px;
- background - color: Black;
- position: relative;
- overflow: hidden;
- }#container img {
- position: absolute;
- width: 360px;
- height: 300px;
- display: block;
- top: 0;
- width: 280px;
- height: 200px;
- }
JS:picSlider 类
- var picSlider = new Class({
- Implements: Options,
- options: {
- container: "container",
- imgsWidth: 0.6,
- },
- initialize: function(options) {
- this.setOptions(options);
- this.container = $(this.options.container);
- this.triggers = this.container.getElementsByTagName("img");
- this.containerWidth = this.container.getSize().x; //get container's width
- this.imgWidth = this.containerWidth * this.options.imgsWidth;
- this.aveWidth = this.containerWidth / this.triggers.length;
- this.newAveWidth = (this.containerWidth - this.imgWidth) / (this.triggers.length - 1);
- this.setImgsInit(); //初始化图片展示
- this.start();
- },
- setImgsInit: function() {
- for (var i = 0; i < this.triggers.length; i++) {
- this.triggers[i].setStyle("left", i * this.aveWidth);
- }
- },
- start: function() {
- for (var i = 0; i < this.triggers.length; i++) {
- this.triggers[i].set("tween", {
- property: "left",
- duration: 300,
- fps: 80
- }); //为每个元素设置动画参数
- this.triggers[i].addEvent("mouseover", this.slider.bindWithEvent(this, [i])); //绑定slider函数
- }
- },
- slider: function(e, at) {
- e.stop();
- for (var i = 1; i < this.triggers.length; i++) {
- if (i <= at) {
- this.triggers[i].get("tween").start(i * this.newAveWidth);
- } else {
- this.triggers[i].get("tween").start(this.imgWidth + (i - 1) * this.newAveWidth);
- }
- }
- }
- });
- new picSlider();
如果想直接在本地运行, 请引入
这个脚本必须在
来源: http://www.phperz.com/article/17/0721/283173.html