订阅Dreamweaver 如何做到图形放大缩小的交互效果
来源：网络收集 点击： 时间：2024-05-02【第一步】打开Dreamweaver cc 2014软件，选择建立html界面，里面自动生成一些必要代码的代码格式，节省时间。
2/4【第二步】在body标签内输入：div class=one id=one/div；这是图形框的代码。
3/4【第三步】在body标签前面位置，输入：
.one{ width:100px; height:100px; background-color:red; position:absolute;}，
注意one的前面必须嫁个点。摁F12键，跳转到网页看效果。
4/4【第四步】回到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;
}
else{
return getComputedStyle(obj,null)
}
}
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-cur)/10;
speed=speed0?Math.ceil(speed):Math.floor(speed);
if(cur==json){
clearInterval(timer);
if(fun){
fun();
}
}
else{
obj.style=cur+speed+px;
}
}
},30)
}
}；
保存并摁F12键，跳转到页面，光标在图形上进出移动，可看到图形放大缩小。
注意事项代码写法不是唯一的，学习需努力，修行在个人。
DREAMWEAVER软件前端设计HTML版权声明：
1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。
2、本站仅提供信息发布平台，不承担相关法律责任。
3、若侵犯您的版权或隐私，请联系本站管理员删除。
4、文章链接：http://www.1haoku.cn/art_653095.html
