<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>淘宝小广告</title>

    <style>

        *{

            border:0px;

            margin: 0px;

            padding: 0px;

            list-style: none;

        }

        #box{

            width: 500px;

            height: 500px;

            border: 2px solid rgb(172, 171, 171);

            margin: 50px auto;

            overflow: hidden;

            //url(./picture/house.jpg) no-repeat改成你要显示的图片或者背景颜色

            background: url(./picture/house.jpg) no-repeat;

        }

        ul{

            overflow: hidden;

            border-top: 2px solid rgb(172, 171, 171);

            margin-top: 400px;

        }

        li{

            float: left;

            height:100px;

            width: 100px;

        }

    </style>

</head>

<body>

    <div id="box">

        <ul>//将“uel()”的内容改成你本地电脑的图片链接或者改成背景颜色

            <li id="li01" onmouseover='fn("box","li01","url(./picture/house.jpg) no-repeat")'><img src="./picture/house.jpg"></li>

            <li id="li02" onmouseover='fn("box","li02","url(./picture/线稿.jpg ) no-repeat")'><img src="./picture/线稿.jpg" ></li>

            <li id="li03" onmouseover='fn("box","li03","url(./picture/线稿2.jpg)no-repeat")'><img src="./picture/线稿2.jpg"></li>

            <li id="li04" onmouseover='fn("box","li04","url(./picture/漫画.jpg) no-repeat")'><img src="./picture/漫画.jpg"></li>

            <li id="li05" onmouseover='fn("box","li05","url(./picture/house.jpg) no-repeat")'><img src="./picture/house.jpg"></li>

        </ul>

    </div>

    <script>

        function fn(box,li,bg){

            let oBox=document.getElementById(box);

            let oLi=document.getElementById(li);

           oBox.style.background=bg;

        }

    </script>

</body>

</html>

淘宝小广告的鼠标移上实现html， JavaScript代码的更多相关文章

  1. JS淘宝小广告

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  2. 只要把鼠标移上Div方框，方框就自动顺时针旋转

    这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...

  3. 屏蔽全部统计代码（51.la cnzz 百度统计 谷歌分析师adsense、屏蔽淘宝客广告代码）的方法

    支持百度统计 .51.la统计.cnzz统计.51yes统计.谷歌分析师.阿里妈妈淘宝客广告.chinaz弹窗.假设有很多其它的须要屏蔽的,欢迎联系 default7#zbphp.com 改动etc的 ...

  4. DIV内容超出长度显示省略号，鼠标移上自动显示全部内容（EasyUI DataGrid）

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  5. Vue 框架-02-事件：点击, 双击事件,鼠标移上事件

    Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({ //注意代码格式 //el:ele ...

  6. chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持，技巧：要在鼠标上的 div上 勾 :hover

    chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

  7. Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  8. jQuery实现鼠标移上弹出提示框，移出消失

    <TD>里有一行数据 "那片笑声让我想起......"  假设超出规定长度将用......代替, 而现在要通过鼠标移动到......上 显示全部内容,移出则消失.如下图 ...

  9. 在input中实现点点点与当鼠标移上去时显示剩余的字

    项目中经常会遇到这个问题,在一个内容框中,由于框的宽度是固定的,但是里面的内容却有很多,那么这个时候需求里就要求第一,多余的字要以点点点的形式隐藏,第二,当鼠标移上去的时候要以title提示的方式显示 ...

随机推荐

  1. matplotlib图表介绍

    Matplotlib 是一个python 的绘图库,主要用于生成2D图表. 常用到的是matplotlib中的pyplot,导入方式import matplotlib.pyplot as plt 一. ...

  2. 解惑，什么是data-attribute ？

    在接触 Web前端开发的一段时间,有时会去看Google或者百度的源代码,有某些地方定义了 data-key ,这种语法 但是如果你直接去 Google data-key 或 data-item 可能 ...

  3. 配置mongoDB的错误

    1,将启动配置到服务的时候没有反应,后来发现没有用管理员模式打开shell命令,所以没有反应. 2,用管理员模式的时候报错 格式问题,将由空格的路径用“”包住即可 3.启动的时候报错windows不能 ...

  4. pandas_分类与聚合

    # 分组与聚合 import pandas as pd import numpy as np # 设置列对齐 pd.set_option("display.unicode.ambiguous ...

  5. PHP rewind() 函数

    定义和用法 rewind() 函数将文件指针的位置倒回文件的开头. 如果成功,该函数返回 TRUE.如果失败,则返回 FALSE. 语法 rewind(file) 参数 描述 file 必需.规定已打 ...

  6. C/C++编程笔记：C++入门知识丨运算符重载

    本篇要学习的内容和知识结构概览 运算符重载使用场景 常规赋值操作 我们现在有一个类 想要实现这种赋值操作 具体实现如下: 所以说呢,我们在使用运算符进行运算的时候, 实际上也是通过函数来实现运算的. ...

  7. Sharding-JDBC实现读写分离

    参考资料:猿天地  https://mp.weixin.qq.com/s/kp2lJHpTMz4bDWkJYjVbOQ  作者:尹吉欢 技术选型:SpringBoot + Sharding-JDBC ...

  8. JsLint undeclared ‘window’

    如果使用IDEA 设置一下 globals 或 /*global window */ ... your script goes here https://stackoverflow.com/quest ...

  9. 【HNOI2012】永无乡 题解（并查集+线段树合并）

    题目链接 给定一张含$n$个点$m$条边的无向图,每个点有一个重要指数$a_i$.有两种操作:1.在$x$和$y$之间连一条边:2.求$x$所在连通块中重要程度第$k$小的点. ----------- ...

  10. odoo13之文件预览widget/模块

    本文示例代码可查看github仓库:odoo13_file_preview 文件预览效果图展示 效果描述: 1.当点击图片或者文件时展开图片. 2.当点击关闭按钮时关闭图片预览. 3.当点击下载按钮时 ...