<!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. Linux下给PHP安装redis扩展

    一.下载redis扩展源码包 PHP官网下载地址:http://pecl.php.net/package/redis 二.安装依赖插件 yum -y install wget make gcc gcc ...

  2. python学习笔记1 -- 函数式编程之高阶函数 map 和reduce

    我用我自己,就是高阶函数,直接表现就是函数可以作为另一个函数的参数,也可以作为返回值 首先一个知识点是 函数的表现形式,印象中的是def  fw(参数)这种方式定义一个函数 python有很多的内置函 ...

  3. matplotlib示例

    plt.plot 内只有一个列表示例 import matplotlib.pyplot as plt lst = [4.53,1.94,4.75,0.43,2.02,1.22,2.13,2.77] p ...

  4. TCP 服务器端

    """ 建立tcp服务器 绑定本地服务器信息(ip地址,端口号) 进行监听 获取监听数据(监听到的客户端和地址) 使用监听到的客户端client_socket获取数据 输 ...

  5. PHP log10() 函数

    实例 返回不同数的以 10 为底的对数: <?phpecho(log10(2.7183) . "<br>");echo(log10(2) . "< ...

  6. ORACLE不完成恢复ORA-00392，ORA-00312，ORA-00349

    背景: 进行测试库不完全恢复,log_file_name_convert没调整好.rac-asm至单实例-文件系统,recover完成后,mount状态的database  执行 alter data ...

  7. 使用IDEA生成jar包的步骤（IDEA打jar包）

    第一步: 1.把module目录下的MATA-INF文件夹删除,如果没有MATA-INF文件夹则不用删除 2.Ctrl + Alt + Shift + S 打开 Project Structure 窗 ...

  8. 使用ST-Link下载程序出现Error:Flash Download Failed-“Cortex-M3“ 解决详细步骤（附图）

    我一直用stm32 f407开发. 最近要学mqtt与阿里云联网之类的课程,因为没有做过,所以网上搜了一遍,结果全是stm32 f103c8t6的例程. 后来我就搬出我的f103最小系统版 (这个就为 ...

  9. 【python设计模式-创建型】工厂方法模式

    工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻 ...

  10. 吴太银：华为消费者云服务Cassandra使用场景与最佳实践

    大家好,我是华为消费者云的吴太银. 我今天分享的主要是华为消费者云服务使用Cassandra的应用场景和最佳实践.我这个可能跟其他嘉宾分享的不太一样,因为前几个嘉宾讲的实际上对Cassandra原生的 ...