鼠标移动过去变大变绿
Posted 缘琪梦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标移动过去变大变绿相关的知识,希望对你有一定的参考价值。
原始代码
<html> <head> <meta charset="utf-8"> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <title>鼠标移动过去放大变色</title> <style> #div1 {width:200px; height:200px; background:red;} </style> </head> <body> <div id="div1" onmouseover="document.getElementById(‘div1‘).style.height=‘300px‘; document.getElementById(‘div1‘).style.width=‘300px‘; document.getElementById(‘div1‘).style.background=‘green‘;" onmouseout="document.getElementById(‘div1‘).style.height=‘200px‘; document.getElementById(‘div1‘).style.width=‘200px‘; document.getElementById(‘div1‘).style.background=‘red‘;"></div> </body> </html>
函数
<html> <head> <meta charset="utf-8"> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <title>鼠标移动过去放大变色</title> <style> #div1 {width:200px; height:200px; background:red;} </style> <script> function toGreen() {document.getElementById(‘div1‘).style.height=‘300px‘; document.getElementById(‘div1‘).style.width=‘300px‘; document.getElementById(‘div1‘).style.background=‘green‘; } function toRed() { document.getElementById(‘div1‘).style.height=‘200px‘; document.getElementById(‘div1‘).style.width=‘200px‘; document.getElementById(‘div1‘).style.background=‘red‘; } </script> </head> <body> <div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div> </body> </html>
变量名称
<html> <head> <meta charset="utf-8"> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <title>鼠标移动过去放大变色</title> <style> #div1 {width:200px; height:200px; background:red;} </style> <script> function toGreen() { var oDiv=document.getElementById(‘div1‘); oDiv.style.height=‘300px‘; oDiv.style.width=‘300px‘; oDiv.style.background=‘green‘; } function toRed() { var oDiv=document.getElementById(‘div1‘); oDiv.style.height=‘200px‘; oDiv.style.width=‘200px‘; oDiv.style.background=‘red‘; } </script> </head> <body> <div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div> </body> </html>
以上是关于鼠标移动过去变大变绿的主要内容,如果未能解决你的问题,请参考以下文章
淘宝店铺图片,鼠标移动到宝贝图片上去会出现边框,同时图片会变大或缩小,请问这种效果怎么做,谢谢