这篇文章主要介绍了 javascript 运动效果, 结合实例形式总结分析 JavaScript 实现放大缩小、滑动淡入、滚动等效果的方法, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例总结了 javascript 运动效果实现与用法。分享给大家供大家参考,具体如下:
一、图片放大缩小效果:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 图片放大缩小
- </title>
- <style>
- *{ margin:0; padding:0; list-style:none;} #ulList{ margin:50px;} #ulList
- li{ margin:10px; width:100px; height:100px; float:left; background:#ddd;
- border:1px solid black;}
- </style>
- <script>
- window.onload = function() {
- var oUl = document.getElementById('ulList');
- var aLi = oUl.getElementsByTagName('li');
- var zIndex = 2;
- //布局转换
- for (var i = 0; i < aLi.length; i++) {
- aLi[i].style.left = aLi[i].offsetLeft + 'px';
- aLi[i].style.top = aLi[i].offsetTop + 'px';
- }
- for (var i = 0; i < aLi.length; i++) {
- aLi[i].style.position = 'absolute';
- aLi[i].style.margin = '0';
- }
- for (var i = 0; i < aLi.length; i++) {
- aLi[i].onmouseover = function() {
- this.style.zIndex = zIndex++;
- startMove(this, {
- width: 200,
- height: 200,
- marginLeft: -50,
- marginTop: -50
- });
- };
- aLi[i].onmouseout = function() {
- startMove(this, {
- width: 100,
- height: 100,
- marginLeft: 0,
- marginTop: 0
- });
- };
- }
- };
- function getStyle(obj, attr) {
- if (obj.currentStyle) {
- return obj.currentStyle[attr];
- } else {
- return getComputedStyle(obj, false)[attr];
- }
- }
- function startMove(obj, json, fn) {
- clearInterval(obj.timer);
- obj.timer = setInterval(function() {
- var bStop = true;
- for (var attr in json) {
- var iCur = 0;
- if (attr == 'opacity') {
- iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
- } else {
- iCur = parseInt(getStyle(obj, attr));
- }
- var iSpeed = (json[attr] - iCur) / 8;
- iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
- if (iCur != json[attr]) {
- bStop = false;
- }
- if (attr == 'opacity') {
- obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
- obj.style.opacity = (iCur + iSpeed) / 100;
- } else {
- obj.style[attr] = iCur + iSpeed + 'px';
- }
- }
- if (bStop) {
- clearInterval(obj.timer);
- if (fn) {
- fn();
- }
- }
- },
- 30)
- }
- </script>
- </head>
- <body>
- <ul id="ulList">
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- </ul>
- </body>
- </html>
二、信息滑动淡入加载显示效果:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 无标题文档
- </title>
- <style>
- #msgBox{ width:500px; margin:0 auto; padding:5px;} .msgList{ filter:alpha(opacity=0);
- opacity:0; font-size:12px; line-height:1.6; border-bottom:1px solid #ddd;}
- .box{ float:left;}
- </style>
- <script>
- window.onload = function() {
- var oTxt = document.getElementById('txt1');
- var oBtn = document.getElementById('btn1');
- var oBox = document.getElementById('msgBox');
- oBtn.onclick = function() {
- var oMsg = document.createElement('div');
- var aDiv = oBox.getElementsByTagName('div');
- oMsg.className = 'msgList';
- oMsg.innerHTML = oTxt.value;
- oTxt.value = '';
- if (aDiv.length == 0) {
- oBox.appendChild(oMsg);
- } else {
- oBox.insertBefore(oMsg, aDiv[0]);
- }
- var iH = oMsg.offsetHeight;
- oMsg.style.height = 0;
- startMove(oMsg, {
- height: iH
- },
- function() {
- startMove(oMsg, {
- opacity: 100
- });
- });
- };
- };
- function getStyle(obj, attr) {
- if (obj.currentStyle) {
- return obj.currentStyle;
- } else {
- return getComputedStyle(obj, false)[attr];
- }
- }
- function startMove(obj, json, fn) {
- clearInterval(obj.timer);
- obj.timer = setInterval(function() {
- var bStop = true;
- for (var attr in json) {
- var iCur = 0;
- if (attr == 'opacity') {
- iCur = Math.round((parseFloat(getStyle(obj, attr)) * 100));
- } else {
- iCur = parseInt(getStyle(obj, attr));
- }
- var iSpeed = (json[attr] - iCur) / 8;
- iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
- if (iCur != json[attr]) {
- bStop = false;
- }
- if (attr == 'opacity') {
- obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
- obj.style.opacity = (iCur + iSpeed) / 100;
- } else {
- obj.style[attr] = iCur + iSpeed + 'px';
- }
- }
- if (bStop) {
- clearInterval(obj.timer);
- if (fn) {
- fn();
- }
- }
- },
- 30);
- }
- </script>
- </head>
- <body>
- <div class="box">
- <textarea id="txt1" cols="40" rows="10">
- </textarea>
- <br />
- <input id="btn1" type="button" value="提交信息" />
- </div>
- <div id="msgBox">
- </div>
- </body>
- </html>
三、无缝滚动效果:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 无标题文档
- </title>
- <style>
- *{ margin:0; padding:0; list-style:none;} #div1{ width:480px; height:120px;
- margin:50px auto; border:1px solid black; position:relative; overflow:hidden;}
- #div1 li{ float:left; padding:10px;} #div1 li img{ display:block;} #div1
- ul{ position:absolute;}
- </style>
- <script>
- window.onload = function() {
- var oDiv = document.getElementById('div1');
- var oUl = oDiv.getElementsByTagName('ul')[0];
- var aLi = oUl.getElementsByTagName('li');
- var aBtn = document.getElementsByTagName('input');
- var iSpeed = -3;
- var timer = null;
- oUl.innerHTML += oUl.innerHTML;
- oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
- timer = setInterval(move, 30);
- aBtn[0].onclick = function() {
- iSpeed = -3;
- };
- aBtn[1].onclick = function() {
- iSpeed = 3;
- };
- oDiv.onmouseover = function() {
- clearInterval(timer);
- };
- oDiv.onmouseout = function() {
- timer = setInterval(move, 30);
- };
- function move() {
- if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
- oUl.style.left = '0px';
- } else if (oUl.offsetLeft > 0) {
- oUl.style.left = -oUl.offsetWidth / 2 + 'px';
- }
- oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
- }
- };
- </script>
- </head>
- <body>
- <input type="button" value="向左" />
- <input type="button" value="向右" />
- <div id="div1">
- <ul>
- <li>
- <img src="images/1.jpg" width="100" height="100" />
- </li>
- <li>
- <img src="images/2.jpg" width="100" height="100" />
- </li>
- <li>
- <img src="images/3.jpg" width="100" height="100" />
- </li>
- <li>
- <img src="images/4.jpg" width="100" height="100" />
- </li>
- </ul>
- </div>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0221/267659.html