<!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. fgdsafhak

  2. windows 下安装YApi及集成Idea的YapiUpload

    一准备工具 Mongodb Node和npm 二文档地址 https://hellosean1025.github.io/yapi/ 三安装步骤 1.安装Mongodb,请参考 2.安装Node,请参 ...

  3. jupyter的服务器配置安装

    该教程主要针对的是服务器安装,且在后台保持稳定运行的情况. 1.jupyter下载 有网的时候 1. pip install jupyter 离线安装 在有网络的环境下载安装包 2. pip down ...

  4. Python按值传递参数和按引用传递参数

    Python按值传递参数和按引用传递参数: 按值传递参数: 使用一个变量的值(数字,字符串),放到实参的位置上 注:传递过去的是变量的副本,无论副本在函数中怎么变,变量的值都不变 传递常量: # 传递 ...

  5. PHP timezone_name_from_abbr() 函数

    ------------恢复内容开始------------ 实例 根据时区缩略语返回时区名称: <?phpecho timezone_name_from_abbr("EST" ...

  6. PHP strripos() 函数

    实例 查找 "php" 在字符串中最后一次出现的位置: <?php高佣联盟 www.cgewang.comecho strripos("I love php, I ...

  7. 账本APP开发

    服务端开发 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航 前言 我平时喜欢用账 ...

  8. Maven知识记录（一）初识Maven私服

    Maven知识记录(一)初识Maven私服 什么是maven私服 私服即私有的仓库.maven把存放文件的地方叫做仓库,我们可以理解成我门家中的储物间.而maven把存放文件的具体位置叫做坐标.我们项 ...

  9. Docker管理工具之portainer

    参考:https://www.cnblogs.com/frankdeng/p/9686735.html 1. 查询portainer镜像 命令:docker search portainer 实例: ...

  10. CI4框架应用四 - 第一个页面

    我们来看一下CI4框架的默认页面是如何实现的. 我们先来认识一下路由文件(app\Config\Routes.php),这个文件非常重要,且功能强大,它定义了URL模式及响应处理方法,我们先看一下这个 ...