js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽

介绍了那么多运动，這次一套代码实现所有运动

1.html代码和css代码，只是定义一个div

 1 <style>
 2     div{ 3         width:200px;
 4         height:200px;
 5         margin:20px;
 6         float:left;
 7         background:yellow;
 8         border:10px solid black;
 9         filter:alpha(opacity:30);
10         opacity:0.3;
11     }
12 </style>
13 <body>
14 <div id="div1">
15
16 </div>
17
18 </body>

2.js代码部分

 1 <script>
 2     window.οnlοad=function()
 3     {
 4         var div=document.getElementById('div1');
 5         div.οnmοuseοver=function()
 6         {
 7             startMove(this,'height',1000);
 8         }
 9         div.οnmοuseοut=function()
10         {
11             startMove(this,'height',50);
12         }
13     };
14     function getStyle(obj,name)    //兼容性问题，修改非行间的css
15     {
16         if (obj.currentStyle)//chrome和firefox
17         {
18               return obj.currentStyle[name];
19         }
20         else//ie浏览器
21         {
22             return getComputedStyle(obj,false)[name];
23         }
24     }
25     function startMove(obj,attr,iTarget)
26     {
27         clearInterval(obj.timer);
28         obj.timer=setInterval(function()
29             {
30                 var cur=0;
31                 if (attr=="opacity")   //判断传入的参数是不是透明度
32                 {
33                     cur=parseFloat(getStyle(obj,attr))*100;  //强制转换为浮点数
34                 }
35                 else   //如果不是透明度，执行這句
36                 {
37                     cur=parseInt(getStyle(obj, attr));  //返回传入要修改的属性的值
38                 }
39                 var speed=(iTarget-cur)/100 ;  //设置速度
40                 speed=speed>0?Math.ceil(speed):Math.floor(speed);  //取上下限
41
42                 if(cur==iTarget)  //当等于要实现的值时停止
43                 {
44                     clearInterval(obj.timer);
45                 }
46                 else
47                 {
48                     if (attr=='opacity')  //如果是透明度，兼容性。写两句
49                     {
50                         obj.style.filter='alpha(opcity:'+(cur+speed)+')';  //chrome和firefox
51                         obj.style.opacity=(cur+speed)+'px';  //ie
52                     }
53                     else   //要修改的是其他，直接修改他的值
54                     {
55                         obj.style[attr]=cur+speed+'px';
56                     }
57                 }
58             },
59             30)
60     }
61 </script>

转载于:https://www.cnblogs.com/biyongyao/p/5851444.html

js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽相关推荐

js实现淡入淡出轮播图
js实现淡入淡出轮播图先描述一下我的思路第一步:首先使用定位将图片堆积起来第二步:利用透明度的变化来实现图片的淡入淡出第三步:设置一个索引,贯穿整个动画过程. 首先,先展示HTML代码: &l ...
两行Python代码实现视频的淡入淡出处理
☞ ░ 老猿Python博文目录 ░ 一.引言最近看到好几篇类似"n行Python代码-"的博文,看起来还挺不错,简洁.实用,传播了知识.带来了阅读量,撩动了老猿的心,决定跟风一 ...
如何对H.265视频播放器EasyPlayer.js实现音频开启与关闭控制？【附代码】
EasyPlayer是可支持H.264/H.265视频播放的流媒体播放器,性能稳定.播放流畅,可支持的视频流格式有RTSP.RTMP.HLS.FLV.WebRTC等,具备较高的可用性.TSINGSEE ...
一套代码小程序WebNative运行的探索01
前言前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉并且用小程序翻写了之前一个demo:[组件化开发]前端进阶篇之如何编写可维护可升级的代码之前一直在跟业务方打交道 ...
多重影分身：一套代码如何生成多个小程序？
前言影分身术,看过火影的都知道,一个本体,多个分身. 大家肯定要问了,那小程序开发跟影分身术也能扯上关系?没错,那自然就是:一套代码,多个小程序啦. 各位先别翻白眼,且听我细细说来. 如今小程序发展 ...
JetBrains打造的开发神器，一套代码适应多端！
欢迎关注方志朋的博客,回复"666"获面试宝典来源:程序员编程最近正在考虑开发一款APP,今天就看到一款基于多端的 UI 调试工具,一套代码适应多端,真的是太棒了,下面分享给大 ...
一套代码称霸5大端口，移动金融应用还能这样开发？
在全面拥抱移动互联网的时代,传统金融机构转战移动金融应用已是大势所趋.但银行转型面临的问题非常之多,不仅仅是机构属性复杂和用户留存率的问题,在开发层面也一样陷入了开发效率较低.缺乏统一化标准.运维困难 ...
js php滚动图代码,JavaScript_JS实现的N多简单无缝滚动代码(包含图文效果)，本文实例讲述了JS实现的N多简 - phpStudy...
JS实现的N多简单无缝滚动代码(包含图文效果) 本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. ...
一套代码小程序WebNative运行的探索02
接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱参考: https://github.com/f ...
一套代码编译出ios和android,Hippy: Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写一套代码就直接运行于三个平台（iOS、Android 和 Web）...
Hippy 跨端开发框架介绍 Hippy 是一个新生的跨端开发框架,目标是使开发者可以只写一套代码就直接运行于三个平台(iOS.Android 和 Web).Hippy 的设计是面向传统 Web 开 ...

js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽

js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽相关推荐

最新文章

热门文章