DIV+CSS与javascript的结合运用_第1页
DIV+CSS与javascript的结合运用_第2页
DIV+CSS与javascript的结合运用_第3页
DIV+CSS与javascript的结合运用_第4页
DIV+CSS与javascript的结合运用_第5页
已阅读5页，还剩3页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

学习文档仅供参考基于Div+Css与JavaScript的结合应用与3D特效技术的研究李双远李晨*〔吉林化工学院信息中心，吉林吉林132022〕摘要：随着互联网技术的开展，极大地影响着人们的生产、生活。在互联网的世界里应用最为广泛的是网页技术，该应用是与用户体验密不可分的，在追求网页布局和美观度的同时还要参加与用户的交互，所以DIV+CSS的简洁布局，能够实现其理想效果。JavaScript的动态特效与交互功能的完美结合是实现网页效果最正确的方法。本文阐述了JavaScript的根本概念，DIV+CSS的布局优势，并通过实例来研究DIV+CSS与JavaScript技术在网页中的应用。关键词：DIV+CSS；JavaScript；结合应用DIV+CSS是WEB设计标准，是目前运用最主流的网页布局方法。CSS样式表时控制页面布局样式的根底，并真正能够做到网页表现与内容别离的一种样式设计语言。相对传统HTML的简单样式控制而言，CSS能够对网页中的对象的位置排版进行像素级的精准控制，支持几乎所有的字体字号样式，以及拥有对网页对象盒模型样式的控制能力，并能够进行初步页面交互设计，时目前基于文本展示的最优秀的表现设计语言。DIV在使用时不需要像表格一样通过其内部的单元格来组织板式，通过CSS强大的样式定义功能可以比表格更简单更自由地控制页面板式和样式。Div+Css布局的优势有，浏览器支持完善、表现与结构别离、样式设计控制功能强大、继承性能优越。JavaScript一种直译式、通用的、基于原型、面向对象的脚本语言。它一开始的设计的原理是在不占用系统和网络资源的前提下，提供一种可以插入不同的应用程序的通用的代码。它具有以下特点与优势，是一种解释型的脚本编写语言，开发环境简单，并可以用记事本编写代码，具有良好的平安性和动态性，可跨平台，扩展性强。1JavaScript的简单应用1.1JavaScript的使用方式〔直接方式和引用方式〕*直接方式<scripttype=“application/javascript〞><!--varmychar=“这是javascript！采用直接插入的方式!〞document.write(mychar+“<br/>〞)//-javascript结束--></script>直接方式就是通过一对标签<script>直接方式</script>来实现，同时采用html的书写规那么和javascript的运算规那么来对页面实现改变及调整。当需要对页面进行修改时只需在这对标签中书写规那么即可。当然也可在加一对此标签，在此标签中书写规那么也是一种行之有效的方法。〔出于严谨建议对那修改就找那对script标签〕<scripttype=“application/javascript>这是w3c对浏览器辨识javascript编写程序的新标准，浏览器会通过调用相应的解读程序来进行解释。需要注意的是：在非xhtml文档中嵌入script标签〔例如php文档〕，如果在没有引用外部文件的情况下，应该在script中加上cdata声明，cdata会告诉浏览器此文档不使用xml解析器进行文本数据解析，防止大于和小于运算符引起的浏览器解析错误。//-Javascript结束：双斜杠在Javascript语言中承担的角色和<!>在html语言中是一样的，都被称作注释符号，用来注释和隐藏不运行的文本，即从双斜杠开始到行尾的字符都被忽略不运行。至于程序中所用到的document．write〔〕函数那么表示将括号中的获取的对应信息输出到窗口中去，var是声明一个变量有的时候不声明也可以用，为了代码的严谨和不必要的麻烦一般都会声明，因为很多时候在一个javascript文档中远远不止一两个变量，声明更加有利于对各个变量清晰的处理。另外一点需要注意的是<script>……</script>这对标签的位置并不是固定的，可以包含在<head>……</head>或<body>…..</body>中的任何地方。但是通常的有两种习惯写法，一种是需要对那个板块修改就在该板块代码下加一对标签，另一种那么是不去管对应的板块位置直接将script标签写在文档body的始末两个位置。<scriptsrc=“url〞type=“text/javascript〞></script>*上面这个例子是javascript引用方式的根本格式，通过与css相同的外部链接方式将javascript的所有代码都编写在一个javascript的源文件〔一般以js为文件扩展名〕，在通过导入语言将整个源文件导入到index中实现javascript对页面的改变，并且这种方式还可以提高程序代码利用率。其中的url表示地址，就是需要导入的程序文件的地址，通过这个地址解答程序才能找到程序文件。同样，这样的语句可以放在html文档头部或主体局部。但是一般情况下我们通常的会将此类文件防止在最开始的位置。众所周知翻开网页的时，网页第一时间做的事就是加载内容，而将此类文件放在最开始位置可以先加载玩之后在开始显示主页内容，不容易出现网页由于加载不对出现的页面崩溃等现象。假设要实现“直接插入方式〞中所举例子的效果，可以首先创立一个Javascript源代码文件“JavaScript.js〞，其内容如下：documentwrite("这是Javascript！采用直接插入的方法！");在网页中可以这样调用程序：<scriptsrc="JavaScript.js"type="text/javascript"></script>，然后就能实现和直接方式一样的效果。当然也可以同时在导入文件时制定javascript的版本，例如：<scriptsrc="JavaScript.js"type="text/javascript;version=1.8"></script>，这样就是告诉解答程序和维护人员此为4.18版本，4是根本版号，.18是小版号。值得注意：但凡指定了src属性的script标签里的内容都会被忽略。2表格与DIV+CSS的布局优劣随着互联网技术的不断开展，DIV+CSS的网页布局方法也越来越多得到应用和开展，该布局方法目前被广泛应用于网页设计者中，从而代替传统的html表格布局。那么相比于传统的布局有哪些优势？下面分别用html表格布局和DIV+CSS模块布局来模拟这样的效果：五个块宽为400px;高为500px，这五个块中超链接的为蓝色,都没有下划线。2.1用表格实现网页布局＜html＞＜head＞＜title＞表格布局页面＜/title＞＜/head＞＜body＞＜tablewidth="400"height="500"border=〞0〞cellpadding=〞0〞cellspacing=〞0〞＞＜trwidth="300"height="400"＞＜tdwidth=〞300〞＞＜ahref=〞#〞style=〞color:blue;text-decoration:none;〞＞块中链接1＜/a＞＜/td＞＜tdwidth=〞300〞＞＜ahref=〞#〞style=〞color:blue;text-decoration:none;〞＞块中链接2＜/a＞＜/td＞＜tdwidth=〞300〞＞＜ahref=〞#〞style=〞color:blue;text-decoration:none;〞＞块中链接3＜/a＞＜/td＞＜tdwidth=〞300〞＞＜ahref=〞#〞style=〞color:blue;text-decoration:none;〞＞块中链接4＜/a＞＜/td＞＜tdwidth=〞300〞＞＜ahref=〞#〞style=〞color:blue;text-decoration:none;〞＞块中链接5＜/a＞＜/td＞＜/tr＞＜/table＞＜/body＞＜/html＞2.2DIV+CSS实现布局<html><head><title>DIV+CSS实现布局</title><styletype=〞text/css〞>*{padding:0px;margin:0px;}div{width:300px;height:400px;float:left;}diva{color:blue;text-decoration:none;}</style></head></body><div><ahref=〞#〞>块中链接1</a></div><div><ahref=〞#〞>块中链接2</a></div><div><ahref=〞#〞>块中链接3</a></div><div><ahref=〞#〞>块中链接4</a></div><div><ahref=〞#〞>块中链接5</a></div></body></html>2.3表格布局与DIV布局的比较从以上两段简单布局代码可以看出，表格布局代码繁多且不断重复表述，如果设计网页就造成设计者在输入代码时增加了不必要的工作量又不利于维护与修改。此时就可以看到DIV+CSS的优越性，样式共用，高效率，易于维护与修改，加载速度快。少了许多不必要的麻烦。那么我们来总结一下DIV+CSS相较于html的优势：〔1〕弥补了html标签在电脑语言更新过程中产生的功能缺陷，提高了页面的美观度；〔2〕大大缩减页面代码，提高页面浏览速度,缩减带宽本钱；〔3〕页面结构明朗，页面内容和表现别离．样式表可以单独存在于一个文件中，也可以与html存在于同一个文件，互相不产生任何影响，使得布局中可以有不一样的思路．同时便于页面维护和管理，节约改版时间。只需要简单的修改CSS文件就可以重新组建不同风格的同框架站点〔例如网站换肤特效就是由此衍生而来〕；〔4〕结构清晰，容易被搜索引擎搜索到，并优化了Seo。另外DIV+CSS布局对搜索引擎更加友好、更加容易辨识，更有利于抓取和收取页面。2.4DIV+CSS的单一表现那么单独出现的DIV+CSS存在着表现单一，不能与用户进行交互的问题，所以要满足用户体验和需求，要进行DIV+CSS与Javascript结合应用。3DIV+CSS与Javascript的结合应用本文表达了Javascript的根本应用。也了解到Javascript的作用就在于能完成与用户的简单交互，增加用户体验感。下面用一个实例来阐述DIV+CSS与Javascript在网页中的具体应用。3.13D特效实现的方法3D动画效果能够吸引访问者的兴趣，那么在网页中3D效果通过技术是如果实现的呢？<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"><html><head><meta-equiv="Content-Type"content="text/html;charset=utf-8"/><title>3D旋转图片导航效果</title></head><body><styletype="text/css">body{background:black}.point{position:absolute;height:75px;}</style><script>varr=200,dv=0.01,w=100,x=400;y=100,pn=8;//r半径，dv偏移量，w图片宽度，x菜单横坐标，y菜单纵坐标，pn菜单图片数量varpi=Math.PI,d=pi/2;varpd=Math.asin(w/2/r),ed=pi*2/pn,sm;//pd各个图片的反正弦functiongoR(){varo=document.getElementById('imground');vararrimg=o.getElementsByTagName('img');for(varn=0;n<arrimg.length;n++){arrimg[n].onmouseout=function(){sm=setInterval('roundMove()',50);}//鼠标离开菜单后继续转动arrimg[n].onmouseover=function(){clearInterval(sm)}//鼠标移上菜单停止转动arrimg[n].onmousedown=function(){dv=dv*2}//鼠标单击菜单加快转到速度}sm=setInterval('roundMove()',50);}functionroundMove(){varv=document.getElementById('imground');vararrimg=v.getElementsByTagName('img');varo,ta,strFilter;for(varn=1;n<=pn;n++){o=arrimg[n-1];ta=Math.sin(d+ed*n);//获得当前偏移量的正弦值strFilter='';if(ta<0){//正弦值对应为负弧度，即图片旋转到圆的反面o.style.left=Math.cos(d+ed*n-pd)*r+x+'px';//传入当前图片移动的横坐标}else{//当图片旋转到圆的正面时o.style.left=Math.cos(d+ed*n+pd)*r+x+'px';//传入当前图片移动的横坐标}o.style.top=ta*10+5+y+'px';//传入当前图片移动的纵坐标o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r+'px';o.style.zIndex=parseInt(ta*10);if(o.style.zIndex<0){//当图片旋转到居后的位置时翻转图片strFilter='FlipH(enabled:true)';}else{//当图片旋转到前面的位置时显示图片正面strFilter='FlipH(enabled:false)';}if(ta<0){ta=(ta+1)*80+20;}else{ta=100;}strFilter=strFilter+'alpha(opacity='+ta+')';//透明效果〔针对IE〕o.style.opacity=ta/100;//透明效果〔针对非IE〕o.style.filter=strFilter;//在菜单图片上参加滤镜效果}d+=dv;//增加偏移值}</script><divid="imground"><imgclass="point"src="://127.0.0.1/images/img1.png"/><imgclass="point"src="://127.0.0.1/images/img2.png"/><imgclass="point"src="://127.0.0.1/images/img3.png"/><imgclass="point"src="://127.0.0.1/images/img4.png"/><imgclass="point"src="://127.0.0.1/images/img5.png"/><imgclass="point"src="://127.0.0.1/images/img6.png"/><imgclass="point"src="://127.0.0.1/images/img7.png"/><imgclass="point"src="://127.0.0.1/images/img8.png"/></div><scriptlanguage="javascript">goR();</script></body></html>4总结DIV+CSS与JavaScript将两者技术应用相结合，促成新颖布局的诞生，如响应式布局、瀑布流布局等。通过DIV+CSS实现简洁页面，减少代码使用〔减少工作量〕，并且整体页面分区明确。而加上javascript的特效使用，用户响应时，这时的页面就有了简洁大气，分区明显，酷炫响应等特点，使得页面美感进一步提升，同时也促进了用户与网站之间的交流，极大的增强了用户体验感。[1]基于DIV+CSS的网页布局技术应用研究[J]赵清华林学华现代电脑，2021〔05〕140-142[2]基于HTML5和JavaScript轻量型动画框架开发[J]平淑文潘珏羽张学金杜晓荣，2021〔12〕5-10作者简介：李双远〔1982-〕，男，吉林省双辽市人，吉林化工学院实验师，研究生学历，主要从事互联网应用技术方面的研究。李晨〔1996-〕，男，吉林化工学院在读本科生。ApplicationsBasedontheCombinationofDiv+CSSandJavaScriptandtheInvestigationof3DSpecialEffectsTechnologyLiShuangyuanLiChenInformationServiceCenter,JilinInstituteofChemicalTechnology,Jilin,Jili

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论