<!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. html中input提示文字样式修改

    在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字.我们只需要在<input>标签里添加:placeholder="提示文字 ...

  2. PHP date_interval_format() 函数

    ------------恢复内容开始------------ 计算两个日期间的间隔,然后格式化时间间隔: 实例 <?php $date1=date_create("2013-01-01 ...

  3. PHP date_sun_info() 函数

    ------------恢复内容开始------------ 实例 返回有关 2013 年 1 月 1 日,纬度 31.7667,经度 35.2333 的日出/日落和黄昏开始/黄昏结束的信息: < ...

  4. 使用FreeSurfer进行脑区分割

    FreeSurfer 是美国哈佛-麻省理工卫生科学与技术部和马萨诸塞州总医院共同开发的一款磁共振数据处理软件包,是基于 Linux 平台的全免费开源软件.FreeSurfer 能完成对高分辨率的 MR ...

  5. LeetCode 87，远看是字符串其实是搜索，你能做出来吗？

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第54篇文章,我们一起来看LeetCode 87题,Scramble String(爬行字符串). 这题的官方难度 ...

  6. ios 浅谈一下UITextFiled UITextView 在tableview的cell上边展示

    最近在项目中.要做到在tableview的cell上边加一个输入框.允许用户输入. 1.我首先选的是在uitextView  然后在通知键盘出现的时候,将tableview的内容设置在键盘的上边.但是 ...

  7. SmartDb代码修改

    在之前的一篇博客中介绍过SmartDB(https://blog.csdn.net/wuquan_1230/article/details/89145012),在使用的过程中发现一个问题,会造成内存泄 ...

  8. NGINX+PHP+POSTGRESQL+ZABBIX 5.X

    安装前准备工作 系统及应用版本 centos 8.3 nginx 1.18 php 7.4.8 postgresql 12.3 zabbix 5.0.2 安装编译环境依赖包 dnf -y instal ...

  9. 03-java实现循环链表

    03java实现循环链表 本人git https://github.com/bigeyes-debug/Algorithm 一丶单向循环链表 就是为尾节点指向头结点 二丶单向循环链表的接口设计 比较单 ...

  10. 深度学习 | 训练网络trick——mixup

    1.mixup原理介绍 mixup 论文地址 mixup是一种非常规的数据增强方法,一个和数据无关的简单数据增强原则,其以线性插值的方式来构建新的训练样本和标签.最终对标签的处理如下公式所示,这很简单 ...