<!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. windows批量删除ip

    cmd下输入如下命令第一步:netsh -c int ip dump >c:\ip.txt在C盘根目录看到一个ip.txt的文件,内容为当前网卡的设置信息,为了能更直观的看清楚IP的设置信息. ...

  2. intellij idea rearrange code

        reformat code的时候,无法将filed放在method前边,很恶心. 那么先去

  3. 解决Eclipse Maven插件的最佳方案

    最近在尝试使用GAE,要求项目必须使用Maven,于是下载了Maven3.1.1配置了环境变量.但是在为Eclipse EE安装Maven插件的时候遇到了问题. 官网的建议是: 在Eclipse EE ...

  4. RK61 Keyboard Use

    ~ 打法: FN+shift+Esc / ? Alt Files Ctral   <=> 上 下 左 右 打法:FN+shift 切换 解锁键盘 打法:FN+win 蓝牙连接 打法:FN+ ...

  5. linux 用 grep 查找单个或多个字符串（关键字）

    1.单个 cat /tmp/php.log | grep "成功" 所有的成功都会被查询出来. 2.多个,并列查询 cat /tmp/php.log | grep "推荐 ...

  6. 通栏banner自适应各个设备

    思路:图片不要设置为div的background,因为你设置了background-size,但是div的height没设置一样没用,除非你搞个js判断,动态刷新. 换一种思路,直接用<img& ...

  7. springboot获取配置文件中的内容

    代码: GrilApplication.java @SpringBootApplication public class GrilApplication { public static void ma ...

  8. 小米2S刷Android4.4且双系统共存

    视频教程 http://v.youku.com/v_show/id_XNjQxNzQ5NDAw.html 必备知识 进入Recovery模式:同时按住电源键+音量上键,等到屏幕亮起时,放开电源键. 特 ...

  9. SpringBoot自动配置的实现原理

    之前一直在用SpringBoot框架,一直感觉SpringBoot框架自动配置的功能很强大,但是并没有明白它是怎么实现自动配置的,现在有空研究了一下,大概明白了SpringBoot框架是怎么实现自动配 ...

  10. idea maven install时，打包找不到微服务common中公用的包

    如题:其实很简单,在打包之前要先使项目通过编译,编译通过之后再打包就可以了. 附idea编译键: