<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>艺龙</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        #box {

            margin: 50px auto;

            width: 1205px;

        }

        #box li {

            position: relative;

            float: left;

            width: 200px;

            height: 260px;

            cursor: pointer;

        }

        #box li .shadow {

            position: absolute;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, .2);

        }

        #box li .text {

            position: absolute;

            left: 0;

            right: 0;

            margin: 30px auto 0;

            width: 40px;

            font-size: 30px;

            color: #fff;

            text-align: center;

        }

    </style>

</head>

<body>

    <ul id="box">

        <li style="background:url(images/1.jpg) center no-repeat;">

            <div class="shadow"></div>

            <div class="text">园林酒店</div>

        </li>

        <li style="background:url(images/2.jpg) center no-repeat;">

            <div class="shadow"></div>

            <div class="text">设计师酒店</div>

        </li>

        <li style="background:url(images/3.jpg) center no-repeat;">

            <div class="shadow"></div>

            <div class="text">青年旅社</div>

        </li>

        <li style="background:url(images/4.jpg) center no-repeat;">

            <div class="shadow"></div>

            <div class="text">特色客栈</div>

        </li>

        <li style="background:url(images/5.jpg) center no-repeat;">

            <div class="shadow"></div>

            <div class="text">海岛酒店</div>

        </li>

        <li style="background:url(images/6.jpg) center no-repeat;">

            <div class="shadow"></div>

            <div class="text">海外温泉</div>

        </li>

    </ul>

    <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>

    <script>

        $('#box li').mouseover(function () {

            $(this).stop(true).animate({

                width:400

            }).children().css('display', 'none').end().siblings().stop(true).animate({width:160}).children().css('display', 'block');

        });

        $('#box').mouseout(function () {

            $(this).children().animate({width: 200}).children().css('display', 'block');

        });

    </script>

</body>

</html>

　　

图片更换即可

js艺龙的更多相关文章

  1. 使用requests、BeautifulSoup、线程池爬取艺龙酒店信息并保存到Excel中

    import requests import time, random, csv from fake_useragent import UserAgent from bs4 import Beauti ...

  2. 浅析天猫H5站点

    前言 我们做前端开发的时候,很有可能会做一个竞品分析,比如我就做过去哪儿.艺龙.同程等与携程的移动站点竞品分析,竞品分析的目的一般是技术对比,但是更多的是业务对比,知己知彼,百战不殆:我们同时会借鉴. ...

  3. 微信小程序导航：官方工具+精品教程+DEMO集合（1月7更新）

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  4. 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用 ...

  5. 使用Chrome DevTools的Timeline分析页面性能

    随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择.这种方式拥有非常明显的优势:跨平台.开发便捷.便于部署和维护等等,但 ...

  6. 国内值得关注的官方API集合

    项目地址:https://github.com/marktony/Awesome_API 本页仅收集国内部分官方API,如需查看其他版本,请点击这里. 目录 笔记 出行 词典 电商 地图 电影 后端云 ...

  7. 常用精品API接口汇总

    下面列举了100多个国内常用API接口,并按照 笔记.出行.词典.电商.地图.电影.即时通讯.开发者网站.快递查询.旅游.社交.视频.天气.团队协作.图片与图像处理.外卖.消息推送.音乐.云.语义识别 ...

  8. 微信小程序框架探究和解析

    何为框架 你对微信小程序的技术框架了解多少? 对wepy 框架进行一系列的深入了解 微信小程序框架解析和探究 小程序组件化框架WePY 在性能调优上做出的探究 开发者培训班上海专场PPT分享:小程序框 ...

  9. 常用API接口汇总

    下面列举了100多个国内常用API接口,并按照 笔记.出行.词典.电商.地图.电影.即时通讯.开发者网站.快递查询.旅游.社交.视频.天气.团队协作.图片与图像处理.外卖.消息推送.音乐.云.语义识别 ...

随机推荐

  1. [BZOJ2282]消防

    Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情,所以这个国家 ...

  2. Linux段错误及GDB Coredump调试方法

    最近在Linux环境下做C语言项目,由于是在一个原有项目基础之上进行二次开发,而且项目工程庞大复杂,出现了不少问题,其中遇到最多.花费时间最长的问题就是著名的“段错误”(Segmentation Fa ...

  3. LA 5135 井下矿工（点—双连通分量模板题）

    https://vjudge.net/problem/UVALive-5135 题意:在一个无向图上选择尽量少的点涂黑,使得任意删除一个点后,每个连通分量至少有一个黑点. 思路: 首先dfs遍历求出割 ...

  4. JavaScript高级程序设计-读书笔记(7）

    第22章 高级技巧 1.高级函数 (1)安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式的字符串. ...

  5. Codeforces Round #357 (Div. 2) 优先队列+模拟

    C. Heap Operations time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  6. Gtk基础学习总结(一)

    第一个GTK程序例子: #include <stdio.h> #include <gtk/gtk.h> int main(int argc, char *argv[]) { g ...

  7. TestNG，timeOut

    这篇先来介绍@Test注释下的一个属性-timeOut.字面意思就是超时判断,详细点说.如果哪个测试方法需要监听执行的时间,那么就可以考虑采用timeOut属性.例如,实际的接口测试中,加入登录接口时 ...

  8. python调用虹软2.0(全网首发)-更新中

    python调用虹软2.0目前没有任何demo可以参考,自己研究了2个晚上终于把第一步做出来了,使用了opencv来加载和显示图片,龟速更新中 这一版作废,新版已发出:https://www.cnbl ...

  9. 缓存技术内部交流_04_Cache Aside续篇

    额外参考资料: http://www.ehcache.org/documentation/3.2/expiry.html F. Cache Aside 模式的问题:缓存过期 有时我们会在上线前给缓存系 ...

  10. 一、nginx 安装

    添加官方 yum 源 vim /etc/yum.repos.d/nginx.rep 输入以下内容(OS为你的系统,OSRELEASE 系统版本) [nginx] name=nginx repo bas ...