基于mootools1.3框架下的图片滑动
MooTools是一个简洁，模块化，面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。
成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：做网站、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的陆良网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
效果预览如下:
实现原理:
容器采用相对定位,图片采用绝对定位,当鼠标移动到相应的图片上,改变去left属性,用tween实现动画效果.
代码分析:写一个picSlider类实现代码封装
-
-
-
-
-
-
CSS样式
- #container{width:459px; height:200px; backgroundcolor: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[i].setStyle("left",i*this.aveWidth);
- } },
- start:function(){
- for(var i=0;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
- 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();
如果想直接在本地运行,请引入
这个脚本必须在
