<!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. 如何阅读一本书——分析阅读Pre

    如何阅读一本书--分析阅读Pre 前情介绍 作者: 莫提默.艾德勒 查尔斯.范多伦 初版:1940年,一出版就是全美畅销书榜首一年多.钢铁侠Elon.Musk学过. 需要注意的句子: 成功的阅读牵涉到 ...

  2. 不使用字体图标和图片，只使用css如何做出展开收起的效果

    <i class="iconArrow" :class="[ littleNavState === item.meta.id ? 'arrowOpen' : '' ...

  3. python爬虫基础要学什么，有哪些适合新手的书籍与教程？

    一,爬虫基础: 首先我们应该了解爬虫是个什么东西,而不是直接去学习带有代码的内容,新手小白应该花一个小时去了解爬虫是什么,再去学习带有代码的知识,这样所带来的收获是一定比你直接去学习代码内容要多很多很 ...

  4. 2019 HL SC day1

    今天讲的是图论大体上分为:有向图的强连通分量,有向图的完全图:竞赛图,无向图的的割点,割边,点双联通分量,变双联通分量以及圆方树 2-sat问题 支配树等等. 大体上都知道是些什么东西 但是仍需要写一 ...

  5. luogu 6046 纯粹容器 期望dp

    LINK:纯粹容器 一道比较不错的期望题目. 关键找到计算答案的方法. 容易发现对于每个点单独计算答案会好处理一点. 暴力枚举在第k轮结束统计情况 然后最后除以总方案数即可. 考虑在第k轮的时候结束 ...

  6. 记录一次线上实施snmp

    公司要实施一个部级的项目,我们公司的提供的产品要对接下客户的一个平台监控平台,该监控平台使用snmp,我们公司的产品不支持snmp,所以由我负责在现网实施snmp,记录这次现网 一.生成编译规则 1. ...

  7. 40行Python制作超炫酷动态排序图，有了它高逼格PPT再也不愁！

        本文首发于量化投资与机器学习 转载于  https://mp.weixin.qq.com/s/KaB_7oXZf0_IV97y0pRPmQ 前言 最近,这种动态排序条形图视频超级火,如下图: ...

  8. 洛谷3月月赛div2 题解（模拟+数学+贪心+数学）

    由于本人太蒻了,div1的没有参加,胡乱写了写div2的代码就赶过来了. T1 苏联人 题目背景 题目名称是吸引你点进来的. 这是一道正常的题,和苏联没有任何关系. 题目描述 你在打 EE Round ...

  9. 暑期java（面向对象设计）学习第一阶段总结

    0.前言 本次博客针对的是暑假学习java(面向对象设计)的前三次作业的小结,第一次作业:7-1 对三个整数排序 7-2 对四个整数排序 7-3 对十个整数进行排序 7-4 对多个整数进行排序 第二次 ...

  10. Python 5 行代码的神奇操作

    Python 语言实现功能直接了当,简明扼要,今天咱们就来一起看看 Python 5 行代码的神奇操作! 1.古典兔子问题 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语 ...