使用mootools1.3框架怎么实现一个图片滑动效果
本篇文章给大家分享的是有关使用mootools1.3框架怎么实现一个图片滑动效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
创新互联公司专注于响水企业网站建设,响应式网站开发,商城建设。响水网站建设公司,为响水等地区提供建站服务。全流程定制设计，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务
实现原理:
容器采用相对定位,图片采用绝对定位,当鼠标移动到相应的图片上,改变去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如果想直接在本地运行,请引入
以上就是使用mootools1.3框架怎么实现一个图片滑动效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
文章名称：使用mootools1.3框架怎么实现一个图片滑动效果
文章地址：http://www.cdkjz.cn/article/jidiid.html
