<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. 【转载】JSP详解(四大作用域九大内置对象等)

    前面讲解了Servlet,了解了Servlet的继承结构,生命周期等,并且在其中的ServletConfig和ServletContext对象有了一些比较详细的了解,但是我们会发现在Servlet中编 ...

  2. vue scss 安装

    1.开始在vue项目中使用sass,在命令行输入一下命令进行安装(使用git命令行要用shift+insert 进行粘贴否则粘贴不上) cnpm install node-sass --save-de ...

  3. GDB调试工具、动态加载、内存管理（day04）

    一.程序中的错误处理 在系统中定义了一个全局变量errno.在这个全局变量中存放着系统调用或者库函数出错的信息(错误编号).然后根据错误编号获取错误信息. 举例说明: 打开一个文件,如果这个文件不存在 ...

  4. Redis学习笔记(二) - 主从复制

    概述 指将一台redis服务器上的数据,复制到其他redis服务器上,前者称为主服务器(master),后者称为从服务器(slave). 默认情况下主从关系为一对多关系. 数据复制是单向的,只能从主服 ...

  5. Linux系统学习之 二：新手必须掌握的Linux命令2

    2018-10-03 22:20:48 一.文件目录管理命令 1.touch 命令 用于创建空白文件或设置文件的时间,格式为“touch [选项] [文件]”. 参数: -a :仅修改“读取时间(at ...

  6. 24.基于groovy脚本进行partial update

    主要知识点 在es中其实是有内置的脚本支持的,可以基于groovy脚本实现各种各样的复杂操作 基于groovy脚本,如何执行partial update es scripting module,我们会 ...

  7. hdu 4612 双联通缩点+树形dp

    #pragma comment(linker,"/STACK:102400000,102400000")//总是爆栈加上这个就么么哒了 #include<stdio.h> ...

  8. mongodb--分片架构【待填的坑】

    首先有一个问题没有搞懂:什么是自动分片?用脚本吗? 一: 多机方式中的另一种方式[分片 => sharding] 分片的对象的谁? 对一个[集合 => 表]进行拆分,把一个大数据拆分成多个 ...

  9. HDU 4510

    省一等,保研. #include <iostream> #include <cstdio> #include <cstring> #include <algo ...

  10. python+Android+uiautomator的环境

    Python+Android+uiautomator的环境搭建 Python 下载适合系统的版本并安装,安装时勾选把路径加入path 验证:windows下打开cmd输入python 出现以下界面说明 ...