Dreamweaver 如何做到图形放大缩小的交互效果

 时间:2024-10-12 00:27:04

1、【第一步】打开Dreamweaver cc 2014软件,选择建立html界面,里面自动生成一些必要代码的代码格式,节省时间。

Dreamweaver 如何做到图形放大缩小的交互效果Dreamweaver 如何做到图形放大缩小的交互效果

3、【第三步】在body标签前面位置,输入:.one{ width:100px; height:100px; background-color:red; position:锾攒揉敫absolute;},注意one的前面必须嫁个点。摁F12键,跳转到网页看效果。

Dreamweaver 如何做到图形放大缩小的交互效果

4、【第四步】回到Dreamweaver 软件界面,在body标签前面适当位置输入:window.onload=function(){ v锾攒揉敫ar 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键,跳转到页面,光标在图形上进出移动,可看到图形放大缩小。

Dreamweaver 如何做到图形放大缩小的交互效果Dreamweaver 如何做到图形放大缩小的交互效果
  • dw图片滚动效果怎么做
  • Dreamweaver中如何设置表格边框颜色
  • Dreamweaver如何插入普通视频
  • dw调整文字行间距
  • dw怎么让整个网页居中
  • 热门搜索
    ppp项目是什么意思 kiki是什么意思 下巴长痘痘是什么原因怎么调理 什么的笑脸 止损是什么意思 rain是什么意思 lan是什么意思 无什么无什么 answer是什么意思 是但求其爱什么意思