<!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. LeetCode——minimum-path-sum

    Question Given a m x n grid filled with non-negative numbers, find a path from top left to bottom ri ...

  2. Graph_Master(连通分量_G_Trajan+Thought)

    Graph_Master~(连通分量) 题目大意:给出m条边(隧道,无向),每条边连接两个点(矿场).要在这些矿场中建设救援出口,防止矿场坍塌造成人员伤亡,问最少需要几个救援出口,以及对应方案数.(假 ...

  3. [PyTorch]PyTorch中模型的参数初始化的几种方法（转）

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本文目录 1. xavier初始化 2. kaiming初始化 3. 实际使用中看到的初始化 3.1 ResNeXt,de ...

  4. POJ2739解题报告

    2017-09-01 17:04:45 writer:pprp 一开始读错题了,总是想不到,其实不是很难,但是就是心理太着急了,反而浪费了很长时间 /* @param:poj2739 @writer: ...

  5. Class.forName()与newInstance()

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  6. Struts2框架学习第二章——Struts2下的HelloWorld

    本章要点 —  Struts 2的下载和安装 — 纯手工创建一个Web应用 — 纯手工创建一个Struts 2应用 — 实现Struts 2的Action — 配置Struts 2的Action — ...

  7. 百度编辑器（ueditor）@功能之获取坐标

    //获取百度编辑器的工具类 var domUtils = UE.dom.domUtils; //获取编辑器的坐标 var $ueditor_offset = $("#ueditor_0&qu ...

  8. es6之Iterator

    1.任何数据结构只要部署了Iterator接口(本质是一个指针对象),也就是部署了Symbol.iterator属性,便可以完成遍历操作:数组原生就具备Iterator接口,就可以用for...of遍 ...

  9. Vue单页面中进行业务数据的上报

    为什么要在标题里加上一个业务数据的上报呢,因为在咱们前端项目中,可上报的数据维度太多,比如还有性能数据.页面错误数据.console捕获等.这里我们只讲解业务数据的埋点. 业务数据的上报主要分为: 各 ...

  10. Java 注解（Annotation）秒懂，你可以这样学,

    文章开头先引入一处图片. 这处图片引自老罗的博客.为了避免不必要的麻烦,首先声明我个人比较尊敬老罗的.至于为什么放这张图,自然是为本篇博文服务,接下来我自会说明.好了,可以开始今天的博文了. Anno ...