JS实现多个Div,鼠标移入变宽_多个div鼠标移入变换大小官网常用-程序员宅基地

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
    
            width: 100px;
            height: 30px;
            background: red;
            margin: 10px;
        }
    </style>
    <script>
        window.onload = function () {
    
            var oDiv =document.getElementsByTagName('div');//获取所有的div
            for (let i = 0; i < oDiv.length; i++) {
    //循环出所有的div
                oDiv[i].time = null;//给每个div加一个定时器。解决：单个定时器，出现的问题
                oDiv[i].onmouseover = function(){
    
                    starMove(this,400);
                };
                oDiv[i].onmouseout = function (){
    
                    starMove(this,100)
                }
                
            }
        }
        function starMove(obj,iTarget){
    
            clearInterval(obj.time);//停止每个div的定时器
            obj.time = setInterval(function(){
    
                var speed = (iTarget-obj.offsetWidth)/6;//div的运行速度
                speed = speed>0?Math.ceil(speed):Math.floor(speed);//速度值的上下取整
                if(obj.offsetWidth == iTarget){
    //判断div的宽度是否等于目标点
                    clearInterval(obj.time);//如果等于目标点就清除定时器
                }else{
    
                    //反之
                    obj.style.width = obj.offsetWidth+speed+'px';
                }
            },30)
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div> 
</body>
</html>

本文链接：https://blog.csdn.net/weixin_45791806/article/details/106118451

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

关于错误：ORA-12592: TNS: 包错误和 Io 异常: Connection reset by peer: socket write error_insert ora-12592-程序员宅基地

文章浏览阅读9.4k次。最近几天在这边做导入数据的工作，但是遇到了很多问题，还好推迟上线了，不然真的要耽误工时了（谁让专业的DBA们都不见了呢）今天周三了，今天报的错误清一色和前天的一样，而昨天的错误如下：ORA-12592: TNS: 包错误和 Io 异常: Connection reset by peer: socket write error_insert ora-12592

基于Java的医院挂号系统_java后端开发预约挂号功能可以使用什么技术-程序员宅基地

文章浏览阅读382次。医院挂号系统是基于Java Web技术的SSM框架的系统，基于Mysql数据。对9张数据库表进行增删改查操作。适合毕业设计、课程设计、大作业等。医院挂号系统是基于Java Web技术的SSM框架的系统，基于Mysql数据。对9张数据库表进行增删改查操作。适合毕业设计、课程设计、大作业等。医院挂号系统是基于Java Web技术的SSM框架的系统，基于Mysql数据。对9张数据库表进行增删改查操作。适合毕业设计、课程设计、大作业等。_java后端开发预约挂号功能可以使用什么技术

Spring Data JPA复杂动态查询_jpa multiselect-程序员宅基地

文章浏览阅读9.4k次，点赞5次，收藏28次。Spring Data JPA其诸多优点给我们的工作带来了很多便利，但对于接触不久的同学来说，有些情况让我们头疼。一些复杂的查询，比如涉及到聚合函数、动态多条件等，着实有些棘手。在不够了解的情况下，觉得Spring Data JPA在这方面不太人性化，有时候我们干脆使用原生sql粗暴的来解决这类查询问题。但这与Spring Data JPA的初衷是相悖的，在不断的学习中，慢慢发现Spring Da..._jpa multiselect

vue实现的步骤条组件——2种方法_vue步骤条如何实现-程序员宅基地

文章浏览阅读3.5k次，点赞4次，收藏6次。一、语言：vue样式如下：2.代码:根据长度百分比计算样式<template>  <div class="steps-box">  <div class="Article-steps" :class="data.stepList.length <= activeIndex ? 'step-over' : ''" > _vue步骤条如何实现

printf串口打印数据以及进阶调试用法_ll库printf-程序员宅基地

文章浏览阅读2.6k次。一、前言实现原理：在C库中，printf()等输出流函数都是通过fputc()这个函数实现的，所以我们通过重映射的方式，修改这个函数的定义使它输出在STM32的寄存器中，便可以实现使用printf()函数在STM32串口上输出数据的功能。二、printf串口打印实现1.使用LL库添加下面的fputc重定义代码：//重映射fputc函数，此函数为多个输出函数的基础函数int fputc(int ch, FILE *f){ while (USART_GetFlagStatus(USART1, _ll库printf

ORACLE 编程的集合_oracle编程声明集合-程序员宅基地

文章浏览阅读587次。文章正文： oracle|问题ORACLE常用傻瓜问题1000问 1. Oracle安装完成后的初始口令? 　internal/oracle 　　sys/change_on_install 　　system/manager 　　scott/tiger 　　sysman/oem_temp 2. ORACLE9IAS WEB CACHE的_oracle编程声明集合