这篇文章主要介绍了 JS 运动框架之分享侧边栏动画, 实例分析了 javascript 操作 div 及 CSS 的技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JS 运动框架之分享侧边栏动画实现方法。分享给大家供大家参考。具体实现方法如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <style type="text/css">
- *{ margin:0px; padding:0px;
- } #div1{ width:319px; height:
- 340px; border: 1px solid #FFF; position:
- absolute; top:100px; left:-320px;
- background-image: url(images/1.png); background-repeat:no-repeat
- ; } #div1 span{ width:30px;
- height: 130px; border: 1px solid blue;
- position: absolute; right:-23px;
- top:95px; background: red; font-family:
- "微软雅黑"; color: #FFFFFF; text-align: center;
- line-height: 40px; border-radius: 0px
- 200px 200px 0px; }
- </style>
- <script type="text/javascript">
- window.onload = function() {
- var oDiv = document.getElementById("div1");
- var oSpan = oDiv.getElementsByTagName('span')[0];
- var time = null;
- var speed = 8; oDiv.onmouseover = function() { //这里给整个div加鼠标移入的事件
- clearInterval(time); time = setInterval(function() {
- if (oDiv.offsetLeft >= 0) {
- clearInterval(time);
- }
- else { oDiv.style.left = oDiv.offsetLeft + speed + 'px';
- }
- },
- 1);
- } oDiv.onmouseout = function() { //这里给整个div加鼠标移出事件
- clearInterval(time); time = setInterval(function() {
- if (oDiv.offsetLeft <= -320) {
- clearInterval(time);
- }
- else { oDiv.style.left = oDiv.offsetLeft - speed + 'px';
- }
- },
- 1);
- }
- }
- </script>
- </head>
- <body>
- <div id="div1">
- <span>
- 分享到
- </span>
- </div>
- </body>
- </html>
优化后的代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <style type="text/css">
- *{ margin:0px; padding:0px;
- } #div1{ width:319px; height:
- 340px; border: 1px solid #FFF; position:
- absolute; top:100px; left:-320px;
- background-image: url(images/1.png); background-repeat:no-repeat
- ; } #div1 span{ width:30px;
- height: 130px; border: 1px solid blue;
- position: absolute; right:-23px;
- top:95px; background: red; font-family:
- "微软雅黑"; color: #FFFFFF; text-align: center;
- line-height: 40px; border-radius: 0px
- 200px 200px 0px; }
- </style>
- <script type="text/javascript">
- window.onload = function() {
- var oDiv = document.getElementById("div1");
- var oSpan = oDiv.getElementsByTagName('span')[0];
- var time = null;
- var spe = 8;
- var speed = null;
- function move(bord) { clearInterval(time); time = setInterval(function() {
- if (oDiv.offsetLeft > bord) {
- speed = -spe;
- }
- else {
- speed = spe;
- }
- if (oDiv.offsetLeft == bord) {
- clearInterval(time);
- }
- else { oDiv.style.left = oDiv.offsetLeft + speed + 'px';
- }
- },
- 1);
- } oDiv.onmouseover = function() { //这里给整个div加鼠标移入的事件
- move(0);
- } oDiv.onmouseout = function() { //这里给整个div加鼠标移出事件
- move( - 320);
- }
- }
- </script>
- </head>
- <body>
- <div id="div1">
- <span>
- 分享到
- </span>
- </div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: