JavaScriptDOM练习之口风琴效果
来源:互联网 发布:电助力自行车 知乎 编辑:程序博客网 时间:2024/04/27 19:45
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; } * { margin: 0; padding: 0; } div { width: 1150px; height: 400px; margin: 50px auto; border: 1px solid red; overflow: hidden; } div li { width: 240px; height: 400px; float: left; } div ul { width: 1300px; } </style></head><body><div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div><script src="common.js"></script><script> var list = document.getElementsByTagName("li"); for (var i = 0; i < list.length; i++) { list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)"; list[i].onmouseover = mouseoverHandle; list[i].onmouseout = mouseoutHandle; } function mouseoverHandle() { for (var j = 0; j < list.length; j++) { animate(list[j], {"width": 100}); } animate(this, {"width": 800}); } function mouseoutHandle() { for (var j = 0; j < list.length; j++) { animate(list[j], {"width": 240}); } } //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是定时器的id element.timeId = setInterval(function () { var flag = true;//默认,假设,全部到达目标 //遍历json对象中的每个属性还有属性对应的目标值 for (var attr in json) { //判断这个属性attr中是不是opacity if (attr == "opacity") { //获取元素的当前的透明度,当前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目标的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex //层级改变就是直接改变这个属性的值 element.style[attr] = json[attr]; } else { //普通的属性 //获取元素这个属性的当前的值 var current = parseInt(getStyle(element, attr)); //当前的属性对应的目标值 var target = json[attr]; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current + "px"; } //是否到达目标 if (current != target) { flag = false; } } if (flag) { //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if (fn) { fn(); } } //测试代码 console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); }, 20); }</script></body></html>
阅读全文
0 0
- JavaScriptDOM练习之口风琴效果
- JavaScriptDOM练习之放大镜效果
- JavaScriptDOM练习之筋斗云效果
- JavaScriptDOM练习之滚动条效果
- JavaScriptDOM练习之百度搜索框
- JavaScriptDOM练习之无缝轮播
- JavaScriptDOM练习之图片跟着鼠标飞
- JavaScriptDOM练习之拖拽案例
- JavaScriptDOM练习之事件绑定与解绑
- javascriptDOM
- javascriptDOM
- JavascriptDOM
- javascriptDom
- JavaScriptDOM对象练习 tab栏切换
- JavaScriptDOM练习之为同一个元素绑定多个不同的事件并指向同一个事件处理函数
- EasyUI布局,窗口,口风琴,文件上传等
- JavaScript小练习效果之多级菜单
- [练习1] js 学习之打字机效果
- 如何在ACM中学习
- java设计模式(十一)——享元模式(Flyweight)
- git简单操作
- 自己搭建Shadowscoks服务器
- Qt————学习记录(三)
- JavaScriptDOM练习之口风琴效果
- TLPI-Chapter 6 进程
- 【实测可用】GPS纠偏算法-Java版
- Golang
- 并发编程 C++11 unique_lock
- php获取文件后缀的9种方法
- JavaScriptDOM练习之筋斗云效果
- QT布局的使用(二)
- Java7 Fork-Join 框架:任务切分,并行处理