<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

    #div1 {

        width: 100px;

        height: 100px;

        background: red;

    }

</style>

<script>

    function togreen(){

    var green=document.getElementById('div1');

    green.style.width='200px';

    green.style.height='200px';

    green.style.background='green';

    }

    function tored() {

    var green=document.getElementById('div1');

    green.style.width='100px';

    green.style.height='100px';

    green.style.background='red';

    }

</script>

</head>

<body>

<div id="div1" onMouseOver="togreen()" onMouseOut="tored()">

</div>

</body>

</html>

查看原文

JavaScript实现鼠标效果的更多相关文章

  1. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

  2. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  3. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  4. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  5. JavaScript实现拖放效果

    JavaScript实现拖放效果 笔者实现该效果也是套用别人的轮子的.传送门 然后厚颜无耻的贴别人的readme~,笔者为了方便查阅就直接贴了,有不想移步的可以看这篇.不过还是最好请到原作者的GitH ...

  6. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  7. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

  9. JavaScript实现动画效果

    说到JavaScript实现动画效果,不得不想到两个函数,setTimeout和setInterval. setTimeout的常用的使用方法为 setTimeout(callback, delay) ...

随机推荐

  1. express创建第一个web应用

    Express 在初始化一个项目的时候需要指定模板引擎,默认支持Jade和ejs. 这里我们使用ejs模板引擎:(关于ejs的介绍可以先从百科里面了解一个大概)EJS是一个JavaScript模板库, ...

  2. grep命令总结

    grep (缩写来自Globally search a Regular Expression and Print)是一种强大的文本搜索工具,它能使用特定模式匹配(包括正则表达式)搜索文本,并默认输出匹 ...

  3. [51Nod1446] 限制价值树 (容斥+MT定理+折半搜索)

    传送门 Description 有N个点(N<=40)标记为0,1,2,...N-1,每个点i有个价值val[i],如果val[i]=-1那么这个点被定义为bad,否则如果val[i] > ...

  4. Linux思维导图之进程管理

    查漏补缺,理解概念,及时总结,欢迎拍砖.

  5. Java中==和equals()的区别

  6. 快速上手Linux 玩转典型应用_慕课网笔记

    1.没有exe安装程序 2.区分大小写 3.一切皆文件 4.文件后缀不是那么重要,只是为了好识别 -------------------------------------------------- ...

  7. Music in Car

    Music in Car time limit per test 1 second memory limit per test 256 megabytes Sasha reaches the work ...

  8. hdu 1829 带权并查集的运用类似于食物链但是更简单些

    #include<stdio.h> #define N 1100000 struct node { int x,y; }f[N],pre[N]; int find(int x) { if( ...

  9. 【ACM】hdu_zs1_1003_放大的X _201307271557

    放大的X Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other)Total Submissio ...

  10. Maven使用package打包Spring Boot时出现：Unable to find a single main class from the following candidates的问题解决

    问题如下: [ERROR] Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:1.3.5.RELEASE ...