js实现图片联动效果-创新互联
一.实现理论基础:
站在用户的角度思考问题,与客户深入沟通,找到安溪网站设计与安溪网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站设计、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖安溪地区。(1)使用定时器setInterval(),完成动画效果;
(2)使用json传值,实现多个属性同时动画效果(比如:宽度,高度,透明度等可以一起进行动画效果);
(3)使用回调函数,实现链式动画(就是宽度值增大到目的值,然后继续宽度值减小的变化);
(4)使用目标值减去初始值除以一个值(比如10),得到每次变化的增量,可以使得动画效果从初始值到目标值有个过度的过程,以不同的增量进行变化,而不是瞬间完成。
speed=(json[attr]-curr)/10
(5)使用一个标志位flag,来控制当所有的动画效果都已经完成才清除此次动画效果的定时器,否则继续进行定时器的操作,完成动画效果。
二.Html框架
很简单,就一个父容器,包裹着几张图片。
三.js实现
window.onload = function () { var list = document.getElementById('list'); var listI = list.getElementsByTagName('img'); //给每一张图片添加事件绑定 for (var i = 0; i < listI.length; i++) { listI[i].addEventListener("mouseover", function () { change(this); }, false); } //鼠标移出list区域,图片回到初始时的宽度200 list.addEventListener("mouseout", function () { for (var i = 0; i < list.children.length; i++) { startMove(list.children[i], { "width": "200", "opacity": "70" }, 50); } }, false); //当鼠标移过图片时,让焦点没在其他图片上的图片宽度变为100px,透明度变为0.7,而鼠标移动到的那张图片宽度变为600 function change(obj) { var children = obj.parentNode.children; //为了获得其他img的兄弟节点 for (var j = 0; j < children.length; j++) { if (obj != children[j]) { startMove(children[j], { "width": "100", "opacity": "70" }, 50, startMove(obj, { "width": "600", "opacity": "100" }, 50)); } }; } } //进行js运动效果的函数 function startMove(obj, json, interval, fn) { clearInterval(obj.timer); //该对象每次开始动画,都先停止掉正在进行的计数器,以免发生计数器运动速度会不断增快的效果。 var flag; //用来表示所有运动是否到达目标值 //开启定时器,每隔Interval时间段执行相应动作 obj.timer = setInterval(function () { flag = true; //进入定时器时,现将flag设置为所有的属性都已达到目标值 //获取传过来的Json值(需要变化的属性,因为要同时执行多属性,所以这里使用了json传值)。 for (var attr in json) { var curr = 0;//用来获得当下的属性值 //判断所传递的属性是否为透明度 if (attr == 'opacity') { //如果是透明度,则获取该对象此刻的透明度值 curr = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { //否则,获取该属性的当下其他属性值 curr = parseInt(getStyle(obj, attr)); } //进行运动的速度处理 var speed = 0; speed = (json[attr] - curr) / 10; //每次速度变化的增量,每次实时的获得,可以达到变速运动 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //速度增量大于0,向上取整,速度增量小于0,向下取整 if (curr != json[attr]) { //当随着属性值还不等于要达到的目标值,就将flag设置为false; flag = false; } //进行运动变化 if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (curr + speed) + ")"; obj.style.opacity = (curr + speed) / 100; } else { obj.style[attr] = curr + speed + 'px'; } } if (flag) { //如果flag值为true,说明传来的属性值,都已经变化到目标值,就可以清除计数器, //同时在检查是否有回调函数传入,若有就继续执行回调函数。 clearInterval(obj.timer); if (fn) { fn(); } } }, interval); } //获得样式函数 function getStyle(element, attr) { var value; if (typeof window.getComputedStyle != 'undefined') { //非IE下获得属性的方法 value = window.getComputedStyle(element, null)[attr]; } else if (typeof element.currentStyle != 'undefined') { //IE下获得属性的方法 value = element.currentStyle[attr]; } return value; }
四,效果图
当鼠标移入图片内,移入的该张图片进行宽度增加,透明度增加,其他几张宽度稍微变小一点,如图:
这样,整个过程的滑动就实现了图片的联动效果,看起来很漂亮。
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
当前题目:js实现图片联动效果-创新互联
文章位置:http://scyanting.com/article/gpoih.html