<!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. parted 分区

    Linux下的GPT分区 GPT分区 这是另外一种分区,针对MBR分区,它有很多优点: (1)几乎突破了分区个数的限制. 在GPT分区表中最多可以支持128个主分区. (2)单个分区容量几乎没有限制. ...

  2. LeetCode—— Partition Equal Subset Sum

    Question Given a non-empty array containing only positive integers, find if the array can be partiti ...

  3. SQL Server----解决SQL Server 配置管理器不见了

    错误重现: 之前安装好的SQL Server 2012打开都没有问题,好多天没有打开了,今天打开我的SQL Server 2012 连接时出现错误: 在与SQL Server 建立连接时出现与网络相关 ...

  4. POJ3768 Katu Puzzle

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  5. 第八章：部署Tornado

    到目前为止,为了简单起见,在我们的例子中都是使用单一的Tornado进程运行的.这使得测试应用和快速变更非常简单,但是这不是一个合适的部署策略.部署一个应用到生产环境面临着新的挑战,既包括最优化性能, ...

  6. ovn-architecture

    本文翻译自ovs官方手册,有删减 OVN架构 OVN(即Open Virtual Network)是一款支持虚拟网络抽象的软件系统.OVN在OVS现有功能的基础上原生支持虚拟网络抽象,例如虚拟L2,L ...

  7. linux共享上网设置

    1.打开内核ip转发 vi /etc/sysctl.conf  net.ipv4.ip_forward = 1 执行sysctrl -p生效 2.如果主机未启用防火墙,那么如下设置iptables [ ...

  8. 设计模式--迭代器模式C++实现

    迭代器模式C++实现 1定义 他提供一种方法访问一个容器对象中的各个元素,而不暴漏该对象内部细节 注:迭代器是为容器服务的.迭代器模式提供了遍历容器的方便性,容器只管理增减元素就好,需要遍历时交给迭代 ...

  9. 搞懂分布式技术9：Nginx负载均衡原理与实践

    搞懂分布式技术9:Nginx负载均衡原理与实践 本篇摘自<亿级流量网站架构核心技术>第二章 Nginx负载均衡与反向代理 部分内容. 当我们的应用单实例不能支撑用户请求时,此时就需要扩容, ...

  10. Ubuntu 下Python 环境问题

    问题描述: 原先使用Anaconda环境,若卸载后仍不能恢复到系统默认的Python环境. 解决方案: shell 寻找缓存路径,python的扩展/home/tom/anaconda/bin/pyt ...