1.一直跟着鼠标移动的div：原理是div的left和top值有oEvent.clientX+scrollLeft鼠标指针向对于浏览器页面（或客户区）的水平坐标+元素中滚动条的水平偏移

<!DOCTYPE html>

<html>

<head>

    <title>follow mouse</title>

</head>

<style type="text/css">

    #div1{width: 100px;height: 100px;background: red;position: absolute;}

</style>

<script type="text/javascript">

    document.onmousemove=function(ev){

        var oEvent=ev||event;

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

        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

        oDiv.style.left=oEvent.clientX+scrollLeft+'px';

        oDiv.style.top=oEvent.clientY+scrollTop+'px';

    }

</script>

<body>

<div id="div1"></div>

</body>

</html>

2.一串跟随鼠标移动的div们：用循环使多个div运动

yi<!DOCTYPE html>

<html>

<head>

    <title>一串跟随鼠标的div</title>

    <style type="text/css">

        div{width: 10px;height: 10px;background: blue;position: absolute;}

    </style>

    <script type="text/javascript">

        window.onload=function(){

            var aDiv=document.getElementsByTagName('div');

            document.onmousemove=function(ev){

                var oEvent=ev||event;

                for(var i=aDiv.length-1;i>0;i--){

                    aDiv[i].style.left=aDiv[i-1].style.left;

                    aDiv[i].style.top=aDiv[i-1].style.top;

                }

                aDiv[0].style.left=oEvent.clientX+'px';

                aDiv[0].style.top=oEvent.clientY+'px';

            }

        }

    </script>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

3.鼠标移入移出实现图片的颜色淡入淡出

<!DOCTYPE html>

<html>

<head>

    <title>Fade In</title>

</head>

<style type="text/css">

    #img1{filter:alpha(opacity:30);opacity: 0.3;}

</style>

<script type="text/javascript">

    window.onload=function(){

        var oImg=document.getElementById('img1');

        oImg.onmouseover=function(){

            starMove(100);

        }

        oImg.onmouseout=function(){

            starMove(30);

        }

    }

    var timer=null;

    var alpha=30;

    function starMove(iTarget){

        var oImg=document.getElementById('img1');

        clearInterval(timer);

        timer=setInterval(function(){

            if(alpha<iTarget){

                iSpeed=10;

            }else{

                iSpeed=-10;

            }

            if(alpha==iTarget){

                clearInterval(timer);

            }else{

                alpha+=iSpeed;

                oImg.style.filter='alpha(opacity:'+alpha+')';

                oImg.style.opacity=alpha/100;

            }

        },30)

    }

</script>

<body>

<img id="img1" src="data:images/1.jpg">

</body>

</html>

JS实现跟随鼠标移动的div，和一串跟随鼠标的div，鼠标移入移出实现图片的颜色淡入淡出的更多相关文章

  1. JS仿贪吃蛇：一串跟着鼠标的Div

    贪吃蛇是一款80后.90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示. <!DOCTYPE htm ...

  2. JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div

    function getPosition(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrol ...

  3. 函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  5. onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法

    鼠标移入移出图片切换很常见的,那我们就来说说他的写法 第一种方法,也是最简单的一种,在html:里就可实现 <img class="img" src="img/do ...

  6. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  7. 在jsp里面 当鼠标元素触发onmouseover时，旁边出现一个浮动且跟随鼠标的div ，移开消失

    JSP页面 : <label onmouseover="showLongStrlog(window.event, '<list:seqnum></list:seqnu ...

  8. 一串跟随鼠标的DIV

    div跟随鼠标移动的函数: <!DOCTYPE HTML><html><head> <meta charset="utf-8"> & ...

  9. [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)

    javascript中,如何让一个元素(比如div)运动起来呢? 设置基本的样式,一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 ); <style> div { ...

  10. js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...

随机推荐

  1. 【已解决】同时使用ajax和form表单传数据的冲突问题

    昨天踩了一个大坑,下面总结一下: 前后端数据交互的两种方式: 1.ajax发起请求(请求中可以带有数据)并获取返回的数据 下面给出一个ajax的常见格式: 1 $.ajax({ 2 url:" ...

  2. #ST表，单调栈#洛谷 5648 Mivik的神力

    题目 分析 考虑答案应该是一段单调不下降的序列, 考虑预处理出每个点往后第一个大于这个点的位置, 那么答案应该是左端点到区间内最大的位置以及这个位置到右端点的贡献 那么区间最大的位置可以用ST表做,然 ...

  3. 基于新版宝塔Docker部署在线客服系统过程小记

    我在业余时间开发维护了一款免费开源的升讯威在线客服系统,也收获了许多用户.对我来说,只要能获得用户的认可,就是我最大的动力. 客服系统开发过程中,最让我意外的是对 TCP/IP 协议的认识.过去一直认 ...

  4. C 语言函数：入门指南

    C 语言中的函数声明和定义 您可以通过以下方式创建并调用函数: // 创建一个函数 void myFunction() { printf("我刚被执行了!"); } int mai ...

  5. HR必备|可视化大屏助HR实现人才资源价值最大化

    人力资源管理质量的优劣关系到企业可持续发展目标的实现,在信息化时代背景下,应用信息技术加强人力资源管理过程的优化,利用技术提升人力资源管理质量和效率已是大势所趋. 利用信息技术构建信息化人力资源管理平 ...

  6. 基于 Java 编程生成二维码图片

    0x01 准备 (1)软件版本 IntelliJ IDEA 2023.1.3 JDK 18 Tomcat 10.1.11 Maven 3.8.6 (2)技术栈 servlet zxing 谷歌项目 生 ...

  7. centos 虚拟机修改mac和ip地址

    前言 因为网上过于零散,故而整理.在此我用的是vm虚拟机. 正文 在我们安装好vm虚拟机后,我们会获得两个虚拟网卡. 那么我们获得两个虚拟网卡后,这两个网卡到底是什么呢?那么我们打开vm的虚拟网络编辑 ...

  8. 吴恩达机器学习课后作业ex1

    题目大体意思就是输入的是某地的人口,输出的是某地方的收益. 题目及数据集下载: https://wwa.lanzous.com/b054sprza 密码:ba3w 大体模型如下图:现在X前边加一列值为 ...

  9. .NET开源强大、易于使用的缓存框架 - FusionCache

    前言 缓存在程序中扮演着提升性能.降低资源消耗.改善用户体验等重要角色,是构建高效.可伸缩.稳定的系统不可或缺的重要组成部分.今天大姚给大家分享一款.NET开源(基于MIT license).强大.易 ...

  10. 力扣66(java)-加一（简单）

    题目: 给定一个由 整数 组成的 非空 数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储单个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. ...