javascript dom 编程艺术 动画效果

最新推荐文章于 2021-10-31 20:33:21 发布
最新推荐文章于 2021-10-31 20:33:21 发布
阅读量482 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lx583274568/article/details/45932659
版权 
function addLoadEvent(func)
{
    var oldοnlοad=window.onload;
    if(typeof window.onload!='function')
        window.οnlοad=func;
    else
    {
	window.οnlοad=function()
	{
	    oldonload();
	    func();
	}
    }
}

function positionMessage()
{
    if(!document.getElementById) return false;
    if(!document.getElementById("message")) return false;
    var elem=document.getElementById("message");
    elem.style.position="absolute";
    elem.style.left="50px";
    elem.style.top="100px";
    moveMessage("message",200,100,10);
}
/*function moveMessage()
{
    if(!document.getElementById) return false;
    if(!document.getElementById("message")) return false;
    var elem=document.getElementById("message");
    var xpos=parseInt(elem.style.left);
    var ypos=parseInt(elem.style.right);
    if(xpos!=10)
    {
	xpos+=-10;
	elem.style.left=xpos+"px";
        
    }
}*/
function moveMessage(elementId,final_x,final_y,interval)
{
    if(!document.getElementById) return false;
    if(!document.getElementById(elementId)) return false;

    var elem=document.getElementById(elementId);
    if(!elem.style.left||!elem.style.top) return false;

    if(elem.movement)  //这句话基本没什么用吧
    {
        clearTimeout(elem.movement);
    }
 
    var xpos=parseInt(elem.style.left);
    var ypos=parseInt(elem.style.top);
    if(xpos==final_x&&ypos==final_y) return true;
    if(xpos<final_x) 
    {
        var dist=Math.ceil((final_x-xpos)/20); //虽然不加math.cel好像也没出什么问题。
        xpos=xpos+dist;
    }
    else
    {
        var dist=Math.ceil((xpos-final_x)/20);  //向上取整的意思
        xpos=xpos-dist;
    }
    if(ypos<final_y) ypos++;
    else ypos--;
     elem.style.left=xpos+"px";
    elem.style.right=ypos+"px";
    //moveMessage(elementId,final_x,final_y,interval),interval);
    //这里这样写是不对的。
    //var repeat="moveMessage('"+elementId+"',"final_x+","+final_y+","+interval+")";

    var repeat="moveMessage('"+elementId+"',"+final_x+","+final_y+","+interval+")"
    elem.movement=setTimeout(repeat,interval);
}

function prepareSlideshow()
{
    if(!document.getElementById) return false;
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById("linklist")) return false;
    if(!document.getElementById("preview")) return false;
    var preview=document.getElementById("preview");
    preview.style.position="absolute";
    preview.style.left="0px";
    preview.style.top="0px";
    var list=document.getElementById("linklist");
    var links=list.getElementsByTagName("a");

    links[0].οnmοuseοver=function(){moveMessage("preview",-325,0,10);}
    links[1].οnmοuseοver=function(){moveMessage("preview",-651,0,10);}
    links[2].οnmοuseοver=function(){moveMessage("preview",-975,0,10);}
}

addLoadEvent(positionMessage);
addLoadEvent(prepareSlideshow);

#slideshow
{
    width:325.5px;
    height:548px;
    position:relative;
    overflow:hidden;
}

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html";charset="utf-8"/>
    <title>动画</title>
    <script type="text/javascript" src="scripts/js.js"></script>
    <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen"/>

</head>

<body>
    <h1>Web Design</h1>
    <p>These are the things you should know.</p>
    <ol id="linklist">
    <li>
      <a href="structure.html">Structure</a>
    </li>
    <li>
      <a href="presentation.html">Presentation</a>
    </li>
    <li>
      <a href="behavior.html">Behavior</a>
    </li>

    </ol>
    <div id="slideshow"> 
    <img src="LOVE.jpg" alt="building blocks of web design" id="preview" />
    </div>
</body>
</html>

sa酱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端之JavaScript DOM编程艺术之用JavaScript实现动画效果拓展(预览图片)
爸爸去哪了2之熊猫三胞胎的博客
11-30 782
web前端之JavaScript DOM编程艺术之用JavaScript实现动画效果拓展(预览图片)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>web design</title> </head> <body> <h1>Web Design</h1> <p>These ar
javascript Dom 编程艺术
08-11
读者将看到JavaScript、 HTML5和CSS如何协作来创建易用的、与标准兼容的Web设计，掌握使用JavaScript和DOM通过客户端动态效果和用户控制的动画来加强 Web页面的必备技术；同时，还将对如何利用库提高开发效率有全面...
DOM编程艺术（动画）
x_chengqq
07-08 413
JS动画 1、实现方式： -gif -flash -css3 -JS 2、三要素： *对象         DOM对象 *属性 *定时器         setInterval、setTimeout、requestAnimationFrame      ①setInterval           var intervalID = setInterval(func,del
javascript dom编程艺术学习笔记之实现动画效果
HiramYong的博客
09-25 628
javascript dom编程艺术学习笔记之实现动画效果@(JavaScript)[学习笔记]javascript dom编程艺术学习笔记之实现动画效果 动画基础知识 1 位置 2 时间 3 时间递增量 4 抽象 5 使用moveElement函数 实用的动画 1 提出问题 3 CSS 4 JavaScript 5 变量作用域问题 6 改进动画效果 7 添加安全检查 8 生成HTML标记 1.动画
JS DOM 编程艺术(第2版)读书笔记 第10章 用JavaScript实现动画效果
trr1994917的博客
05-17 528
1 2 3 4 5 简单动画 6 7 #message{background:red} 8 9 10 11 12 move 13 14 15 16 function positionMessage() { 17 var elem = document.getElementById("message"); 18 elem.style.position
JavaScript DOM编程艺术 学习笔记（十）用JavaScript实现动画效果
Love@YR
12-06 723
虽然说利用dom技术修改文档的样式信息，用javaScript添加样式信息可以节约精力，总的来说，css仍然是完成这类任务的最佳工具，但是又一个应用领域是目前css尚且无能为力的，那就是动画。 如果我们想随着时间变化不断改变某个元素样式，只能利用javaScript position属性的值有static,fixed,relative,absolute。默认static
Javascript DOM 编程艺术 Chap10 动画效果 实用动画
Bingersoda的博客
10-31 214
问题： 因为把 preview.style.left = "0px"; 写成了 preview.style.left = "0px;" 找了一个多小时的错误…… function prepareSlideshow(){ // make sure the browser support DOM if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; // ...
《JavaScript DOM 编程艺术》知识点整理
Zaralike的博客
07-26 269
本书重点：关于Javascript和DOM脚本编程工作的基本原则、良好习惯、正确思路 预留退路、循序渐进、以用户为中心 一、JavaScript简史 XHTML:可扩展超文本标记语言 BOM:浏览器对象模型（Web浏览器窗口的高度、宽度和屏显位置等属性） DOM:文档对象模型（一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改） Javascript:脚本语言（解释型，解释器），有Web浏览器进行解释和执行 二、Javascript语..
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
JavaScript DOM编程艺术(中文第2版).pdf
01-16
javascript入门必备，本书讲述了JavaScript和DOM的基础知识，但重点放在DOM编程技术背后的思路和原则：预留退路、循序渐进和以用户为中心等，这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中...
随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip
06-17
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍，主要涵盖了JavaScript语言在Web前端开发中的应用，特别是关于DOM（Document Object Model）的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
javascriptDom编程艺术+源码
12-07
《JavaScript DOM编程艺术》是一本深受开发者欢迎的JavaScript学习书籍，专注于DOM（Document Object Model）这一核心概念。DOM是Web页面的结构模型，通过JavaScript与DOM的交互，开发者可以实现对网页内容的动态...
韦东山imx6ullpro完全开发书册
最新发布
08-15
韦东山imx6ullpro完全开发书册
使用html+css +js 实现天猫首页效果.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目）
08-15
Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课
JavaWeb实现超市订单管理系统smbms.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
未来社区及其趋势探索（戴德梁行）PDF（52页）.pdf
08-15
未来社区的建设背景和需求分析指出，随着智能经济、大数据、人工智能、物联网、区块链、云计算等技术的发展，社区服务正朝着数字化、智能化转型。社区服务渠道由分散向统一融合转变，服务内容由通用庞杂向个性化、服务导向转变。未来社区将构建数字化生态，实现数据在线、组织在线、服务在线、产品智能和决策智能，赋能企业创新，同时注重人才培养和科研平台建设。 规划设计方面，未来社区将基于居民需求，打造以服务为中心的社区管理模式。通过统一的服务平台和应用，实现服务内容的整合和优化，提供灵活多样的服务方式，如推送式、订阅式、热点式等。社区将构建数据与应用的良性循环，提高服务效率，同时注重生态优美、绿色低碳、社会和谐，以实现幸福民生和产业发展。 建设运营上，未来社区强调科学规划、以人为本，创新引领、重点突破，统筹推进、整体提升。通过实施院落+社团自治工程，转变政府职能，深化社区自治法制化、信息化，解决社区治理中的重点问题。目标是培养有活力的社会组织，提高社区居民参与度和满意度，实现社区治理服务的制度机制创新。 未来社区的数字化解决方案包括信息发布系统、服务系统和管理系统。信息发布系统涵盖公共服务类和社会化服务类信息，提供政策宣传、家政服务、健康医疗咨询等功能。服务系统功能需求包括办事指南、公共服务、社区工作参与互动等，旨在提高社区服务能力。管理系统功能需求则涉及院落管理、社团管理、社工队伍管理等，以实现社区治理的现代化。 最后，未来社区建设注重整合政府、社会组织、企业等多方资源，以提高社区服务的效率和质量。通过建立社区管理服务综合信息平台，提供社区公共服务、社区社会组织管理服务和社区便民服务，实现管理精简、高效、透明，服务快速、便捷。同时，通过培育和发展社区协会、社团等组织，激发社会化组织活力，为居民提供综合性的咨询和服务，促进社区的和谐发展。
JavaScript DOM编程艺术探索
"JavaScript DOM编程艺术，深入探讨JavaScript与DOM的关系，以及它们在网页交互中的重要性。" 在网页设计领域，JavaScript与DOM是不可或缺的技术工具，它们共同塑造了现代网页的交互性和动态性。JavaScript是一种由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值