如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
Dreamweaver 如何做到图形放大缩小的交互效果
来源：互联网
2023-03-16 19:12:34 132
网页上通常看到，光标移动到某个图形上进出一档，图形会有放大缩小的效果。
工具/原料
- Dreamweaver 软件
方法/步骤
【第一步】打开Dreamweaver cc 2014软件，选择建立html界面，里面自动生成一些必要代码的代码格式，节省时间。
【第二步】在body标签内输入：div class="one" id="one">/div>；这是图形框的代码。
【第三步】在body标签前面位置，输入：
.one{ width:100px; height:100px; background-color:red; position:absolute;}，
注意one的前面必须嫁个点。摁F12键，跳转到网页看效果。
【第四步】回到Dreamweaver 软件界面，在body标签前面适当位置输入：
window.onload=function(){
var btn=document.getElementById("btn")
var one=document.getElementById("one")
one.onmouseover=function(){
startMove(one,{width:400,height:400})
}
one.onmouseout=function(){
startMove(one,{width:100,height:100})
}
function getstyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,null)[name]
}
}
var timer=null;
function startMove(obj,json,fun){
clearInterval(timer);
timer=setInterval(function(){
for(var att in json){
var cur=parseInt(getstyle(obj,att))
var speed=(json[att]-cur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==json[att]){
clearInterval(timer);
if(fun){
fun();
}
}
else{
obj.style[att]=cur speed "px";
}
}
},30)
}
}；
保存并摁F12键，跳转到页面，光标在图形上进出移动，可看到图形放大缩小。
注意事项
- 代码写法不是唯一的，学习需努力，修行在个人。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：制作网页时如何让导航栏始终保持在顶端 下一篇：网页表单格式制作
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 434 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)