0

0

js动画学习(三)

黄舟

黄舟

发布时间:2016-12-30 16:56:24

|

1256人浏览过

|

来源于php中文网

原创

五、多物体变宽



这里面要注意由于物体变多了,需要给每个物体各配备一个定时器,否则如果只有一个定时器的话,当鼠标在不同物体之间快速滑动时,不同的物体就会出现争抢的现象。所以timer前要加obj. 

function changeWidth(obj,target) {//元素,目标值
     clearInterval(obj.timer);//清除定时器防止嵌套调用
     obj.timer=setInterval(function () {//设置定时器
         var speed=(target-obj.offsetWidth)/8;//定义缓冲速度,目标值减当前值
         speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度一定要取整
         if (obj.offsetWidth==target) {//判断物体当前宽度和目标值的关系,如果达到目标清除定时器
             clearInterval(obj.timer);    
         } else {
             obj.style.width=obj.offsetWidth+speed+'px';
         }
     },30)
 }

举例:用3个li来举例:

this参数指的就是对象自己。和前几次不同的是这次的定时器清空要对每个li分别清空。



六、多物体变透明度

涉及到透明度就要注意浏览器的兼容性问题。还有,透明度的初始值不能像上一个单独物体透明度初值那样设置一个,多物体的透明度初始值要分别设置,每个物体都有初始值。

function changeOpacity(obj,speed,target) {
     clearInterval(obj.timer);//清除定时器,避免嵌套调用
     obj.timer=setInterval(function () {
         if (obj.alpha==target) {//如果透明度达到目标值,清除定时器
             clearInterval(obj.timer);
         } else {//当前透明度加上透明度变化的速度
             obj.alpha=obj.alpha+speed;
             obj.style.filter='alpha(opacity:'+obj.alpha+')';//IE浏览器
             obj.style.opacity=obj.alpha/100;//火狐和谷歌
         }
     }, 30)
 }

下面用几个div举例子:

企站帮企业网站管理系统1.0
企站帮企业网站管理系统1.0

一、源码描述这是一款比较简单的企业管理系统源码,界面美观大方,功能简单,特别适合初学者学习研究,系统运行十分流畅,可以作为二次开发,同时也是可以帮助初学者增长知识的优秀代码。二、功能介绍主要功能:企业动态,产品介绍 ,免费下载,定制服务,该源码比较适合新手学习和二次开发使用。三、源码特点1、网站布局:采用目前最先进的布局方式DIV+CSS,符合W3C的标准和Web2.0的风格。2、程序设计模块化,

下载

以上就是js动画学习(三)的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关专题

更多
c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

78

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

45

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

118

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

10

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

14

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

71

2026.01.09

漫蛙稳定版地址大全
漫蛙稳定版地址大全

漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

348

2026.01.09

php学习网站大全
php学习网站大全

精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

42

2026.01.09

php网站搭建教程大全
php网站搭建教程大全

本合集专为零基础用户打造,涵盖PHP网站搭建全流程,从环境配置到实战开发,免费、易懂、系统化,助你快速入门建站!

12

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JavaScript-网页的灵魂
JavaScript-网页的灵魂

共33课时 | 9万人学习

前端小白零基础入门HTML5+CSS3
前端小白零基础入门HTML5+CSS3

共361课时 | 32.8万人学习

JS轻松实现打地鼠游戏
JS轻松实现打地鼠游戏

共6课时 | 0.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号