javascript每日一练—运动

最新推荐文章于 2023-12-09 09:18:06 发布
最新推荐文章于 2023-12-09 09:18:06 发布
阅读量188 收藏 1
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/aure/p/4640800.html
版权

1、弹性运动

　　运动原理：加速运动+减速运动+摩擦运动；

 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
 8 </style>
 9 <script>
10 window.onload = function()
11 {
12     var oBtn = document.getElementById('btn1');
13     var oDiv = document.getElementById('div1');
14     
15     oBtn.onclick = function()
16     {
17         startMove(oDiv, 300);
18     };
19 };
20 
21 var iSpeed = 0;
22 var left = 0;
23 
24 function startMove(obj, iTarget)
25 {
26     clearInterval(obj.timer);
27     obj.timer = setInterval(function(){
28         iSpeed += (iTarget - obj.offsetLeft)/5;
29         iSpeed *= 0.7;
30         
31         left += iSpeed;
32         
33         if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
34             clearInterval(obj.timer);
35             obj.style.left = iTarget + 'px';
36         }else{
37             obj.style.left = obj.offsetLeft + iSpeed + 'px';    
38         }        
39         
40     }, 30);
41 }
42 </script>
43 </head>
44 
45 <body>
46 <input id="btn1" type="button" value="运动" />
47 <div id="div1"></div>
48 <div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>
49 </body>
50 </html>
View Code

2、图片放大缩小

<!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>
View Code

3、信息滑动淡入加载显示

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7 #msgBox{ width:500px; margin:0 auto; padding:5px;}
  8 .msgList{ filter:alpha(opacity=0); opacity:0; font-size:12px; line-height:1.6; border-bottom:1px solid #ddd;}
  9 
 10 .box{ float:left;}
 11 </style>
 12 
 13 <script>
 14 window.onload = function()
 15 {
 16     var oTxt = document.getElementById('txt1');
 17     var oBtn = document.getElementById('btn1');
 18     var oBox = document.getElementById('msgBox');
 19     
 20     oBtn.onclick = function()
 21     {
 22         var oMsg = document.createElement('div');
 23         var aDiv = oBox.getElementsByTagName('div');
 24         
 25         oMsg.className = 'msgList';
 26         oMsg.innerHTML = oTxt.value;
 27         oTxt.value = '';
 28         
 29         if(aDiv.length==0){
 30             oBox.appendChild(oMsg);
 31         }else{
 32             oBox.insertBefore(oMsg, aDiv[0]);
 33         }
 34         
 35         var iH = oMsg.offsetHeight;
 36         oMsg.style.height = 0;
 37         
 38         startMove(oMsg, {height:iH}, function(){
 39             startMove(oMsg, {opacity:100});
 40         });
 41         
 42     };
 43 };
 44 
 45 function getStyle(obj, attr)
 46 {
 47     if(obj.currentStyle){
 48         return obj.currentStyle;
 49     }else{
 50         return getComputedStyle(obj, false)[attr];
 51     }
 52 }
 53 
 54 function startMove(obj, json, fn)
 55 {
 56     clearInterval(obj.timer);
 57     obj.timer = setInterval(function(){
 58         var bStop = true;
 59         
 60         for(var attr in json){
 61             var iCur = 0;
 62             
 63             if(attr == 'opacity'){
 64                 iCur = Math.round((parseFloat(getStyle(obj, attr))*100));
 65             }else{
 66                 iCur = parseInt(getStyle(obj, attr));
 67             }
 68             
 69             var iSpeed = (json[attr] - iCur) / 8;
 70             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
 71             
 72             if(iCur != json[attr]){
 73                 bStop = false;
 74             }
 75             
 76             if(attr == 'opacity'){
 77                 obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed)+')';
 78                 obj.style.opacity = (iCur + iSpeed) / 100;
 79             }else{
 80                 obj.style[attr] = iCur + iSpeed + 'px';
 81             }
 82         }
 83         
 84         if(bStop){
 85             clearInterval(obj.timer);
 86             
 87             if(fn){
 88                 fn();
 89             }
 90         }
 91     }, 30);
 92 }
 93 </script>
 94 </head>
 95 
 96 <body>
 97 <div class="box">
 98     <textarea id="txt1" cols="40" rows="10"></textarea><br />
 99     <input id="btn1" type="button" value="提交信息" />
100 </div>
101 <div id="msgBox">
102     
103 
104 </div>
105 </body>
106 </html>
View Code

 

4、无缝滚动

 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 *{ margin:0; padding:0; list-style:none;}
 8 #div1{ width:480px; height:120px; margin:50px auto; border:1px solid black; position:relative; overflow:hidden;}
 9 #div1 li{ float:left; padding:10px;}
10 #div1 li img{ display:block;}
11 #div1 ul{ position:absolute;}
12 </style>
13 <script>
14 window.onload = function()
15 {
16     var oDiv = document.getElementById('div1');
17     var oUl = oDiv.getElementsByTagName('ul')[0];
18     var aLi = oUl.getElementsByTagName('li');
19     var aBtn = document.getElementsByTagName('input');
20     var iSpeed = -3;
21     var timer = null;
22     
23     oUl.innerHTML += oUl.innerHTML;
24     oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
25     
26     timer = setInterval(move, 30);
27     
28     aBtn[0].onclick = function()
29     {
30         iSpeed = -3;
31     };
32     
33     aBtn[1].onclick = function()
34     {
35         iSpeed = 3;
36     };
37     
38     oDiv.onmouseover = function()
39     {
40         clearInterval(timer);
41     };
42     
43     oDiv.onmouseout = function()
44     {
45         timer = setInterval(move, 30);
46     };
47     
48     function move(){                
49         if(oUl.offsetLeft<-oUl.offsetWidth/2){
50             oUl.style.left = '0px';
51         }else if(oUl.offsetLeft>0){
52             oUl.style.left = -oUl.offsetWidth/2 + 'px';
53         }
54         oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
55     }
56     
57 };
58 </script>
59 </head>
60 
61 <body>
62 <input type="button" value="向左" />
63 <input type="button" value="向右" />
64 <div id="div1">
65     <ul>
66         <li><img src="images/1.jpg" width="100" height="100" /></li>
67         <li><img src="images/2.jpg" width="100" height="100" /></li>
68         <li><img src="images/3.jpg" width="100" height="100" /></li>
69         <li><img src="images/4.jpg" width="100" height="100" /></li>
70     </ul>
71 </div>
72 </body>
73 </html>
View Code

 

转载于:https://www.cnblogs.com/aure/p/4640800.html

weixin_30472035
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS基础学习常用方法 每日一练
可爱的鹬啊
09-12 700
目录 圣杯模式 深层克隆 原型链去重 封装type 选项卡 定时器 点击变色 封装children 封装addEvent兼容性方法--给一个DOME对象添加一个事件处理函数 封装取消事件冒泡函数stopBubble 封装阻止默认事件的函数 cancelHandler 事件委托 正则小驼峰转换 the-first-name 封装一个兼容性的获取元素样式的函数getStyl...
everycode:Javascript 每日一练
07-04
#Every Code —— 每日一练使用方法：所有的题目和答案已经全部移到各位可以在题目下方回复，提交自己的解决方案回复内容可以使用点击右上方的watch可以关注这个项目，当项目内容发生改变的时候会有邮件推送通知，...
JavaScript的简单练习（每日一练）
qq_53306713的博客
03-17 559
JavaScript的简单练习（每日一练）
javascript每日一练（一）——javascript基础
WLYQ1314的博客
07-17 221
一、javascript的组成 ECMAScript DOM BOM 二、变量类型 　　常见类型有：number, string, boolean, undefined, object, function typeof 运算符，用来检测对象的类型,如：alert(typeof 'aaa'); //string 三、数据类型转换 显示类型转换（强制类型转换）：p...
每日一练 JS30天挑战 打击鼓
qq_44692240的博客
10-11 195
打击鼓 实现目标 按键放音乐 连续点击立刻重置 按下按键有动态变化 实现思路 将按键div和audio设置相同data-key属性来绑定 绑定事件监听keydown和keyup来完成播放和按键变化 修改audio.currentTime属性来完成疯狂重置音乐开始 实现代码 html { font-size: 10px; /* background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center; */ background-size:
每日一练 JS30天挑战 每日清单
qq_44692240的博客
10-27 403
每日清单 实现目标 输入每日活动到输入框，点击按钮，会在上面显示每日活动 刷新网页数据还在 实现逻辑 Array.map()来处理数据，处理出对面的列表字符串 数据保存在本地的localStorage中 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LocalStorage</title> <link re
javascript运动详解
10-23
本文给大家详细介绍下如何使用javascript来实现运动效果，总结的十分全面，附上各种效果的详细示例和演示图，有需要的小伙伴可以参考下。
Javascript 多物体运动的实现
10-25
主要介绍了Javascript 多物体运动的实现,需要的朋友可以参考下
javascript练手项目
最新发布
05-18
JavaScript是一种广泛用于Web开发的高级、解释型编程语言。最初由网景公司于1995年推出，JavaScript现已成为Web技术的核心，与HTML和CSS并列。以下是JavaScript的主要特点： 客户端脚本：JavaScript主要运行在...
浅谈Javascript如何实现匀速运动
10-25
主要介绍了浅谈Javascript如何实现匀速运动的方法及相关代码,需要的朋友可以参考下
一个javascript的练习
sofeien的专栏
01-11 501
使用canvas绘制K线图 mysite #canvas { border: 1px solid gray; } 'use strict'; var NUM = 30;
【javascript每日一练】- 利用闭包
weixin_33915554的博客
06-24 120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
JavaScript每日一练经典小案例（二）
柒柒柒柒
01-09 473
这些案例都是一些非常经典的案例，有帮助到大家可以点个赞 一、禁止复制案例 我们可以采用contextmenu的方法让需要复制文字不显示菜单 代码如下： //禁用右键菜单 document.addEventListener('contextmenu',function(e){ e.preventDefault(); }) 效果： 同样，我们可以不让它选取这段文字 代码如下： //禁用选取 d.
js每日一题1
weixin_48372590的博客
03-16 151
js题
每日一练 JS30天 挑战时钟
qq_44692240的博客
10-12 130
时钟 实现目标 一个根据时间转动的是时钟 实现逻辑 通过Date类来获取当前时间 通过修改CSS样式的transform:rotate()来模拟时针分针秒针的走动 通过设置定时器来时刻修改样式 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2. JavaScript Clock</title> </head&g
js系列之每天一练成长录二
weixin_34130389的博客
08-16 74
题目:写一个函数判断一个数字是不是某个整数的平方。 function is_square(num){ let val=Math.sqrt(num).toString(); return val=="NaN"?false:val.indexOf(".")>0?false:true; } console.log(is_square(-1) ) console.log(is_squar...
js系列之每天一练成长录三
weixin_33893473的博客
08-20 82
写一个函数solution，求比一个数字n小的所有3和5的整数倍数和。 比如10，比它小的3、5整数倍数有： 3,5,6,9， 所以和为23。 比如16， 比它小的3，5整数倍数有： 3,5,6,9,10,12,15，所以和为60（15只计算1次） function solution(num){ let ary=[], n=1,n2=1; while(3*n<num){ ...
「JavaScript每日一练」系列——提高你的JS技能（第一天）
阿猫故乡的博客
12-09 497
以上就是关于JavaScript每天一练希望大家喜欢！！！
JavaScript每日一学 —— 第十五天
qq_49698477的博客
12-08 41
问题：无论把什么类型当成对象的键来使用，最终都会把这个类型转成字符串类型来展示。特点：简化了字符串拼接操作、可以让字符串进行换行操作、可以在模板里面直接使用变量 ${变量名称}Symbol()括号里面写的是一个描述信息，不是值。你写的是什么类型作为对象的键，那么就是什么类型。3.startsWith()判定字符串中是否以某个字符串开头。4.endsWith()判定字符串中是否以某个字符串结尾。模板字符串：就是把咱们之前字符串的拼接进行了简化处理。Set() 里面的数据不能有重复的，自带过滤功能。
javascript 在线练手网站
03-17
当提到JavaScript在线练手网站时，有几个非常受欢迎的选择： 1. CodePen（https://codepen.io/）：...这些在线练手网站都提供了一个方便的环境，让你能够快速编写和测试JavaScript代码，并与其他开发者分享你的成果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值