<!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. 爬虫之Handler处理器 和 自定义Opener

    Handler处理器 和 自定义Opener opener是 urllib2.OpenerDirector 的实例,我们之前一直都在使用的urlopen,它是一个特殊的opener(也就是模块帮我们构 ...

  2. 动态规划入门-01背包问题 - poj3624

    2017-08-12 18:50:13 writer:pprp 对于最基础的动态规划01背包问题,都花了我好长时间去理解: poj3624是一个最基本的01背包问题: 题意:给你N个物品,给你一个容量 ...

  3. java 集合操作小结

    Map<String,String> m1=new HashMap<String,String>(); m1.put("zara", "name1 ...

  4. 【Python】模块学习之使用paramiko连接Linux，远程执行命令，上传下载、文件

    本文主要介绍paramiko远程执行linux命令,及在服务器上进行文件的上传.下载 paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. ...

  5. 面向目标的场景设置--Goal-Oriented Scenario

    在场景设置的时候会有两种场景设置方式: 1,手动模式(Manual Scenario) 2.面向目标的场景设置模式(Goal Oriented scenario) 其中手动模式使用较多,而且灵活应用, ...

  6. jQuery 获取Select选择的Text和 Value

    jQuery获取Select选择的Text和Value:语法解释:    1. $("#select_id").change(function(){//code...});   / ...

  7. Python打包分发工具setuptools简介（转）

    作为Python标准的打包及分发工具,setuptools可以说相当地简单易用.它会随着Python一起安装在你的机器上.你只需写一个简短的setup.py安装文件,就可以将你的Python应用打包. ...

  8. Java的序列化机制

    1. 所有实现序列化的类都必须实现Serializable接口,序列化有如下两个特点: 如果一个类可以被序列化,那么它的子类也可以被序列化 由于static代表类成员,trasient代表对象的临时数 ...

  9. Vlmcsd（KMS）激活服务器程序

    1.下载vlmcsd程序 2-1.虚拟机版本: 新建Linux虚拟机,硬件仅保留内存(最小14MB,推荐16MB).处理器(1个1核心).软盘(指向floppy144.flp).网络适配器(桥接模式) ...

  10. zen cart 空白页面的解决方案

    在安装zen cart 这套CMS时, 有时候会由于修改了某些页面或者是由于环境的某些组件的版本问题导致前台页面出现空白页, 由于在空白页面处没有任何提示, 并且在日志中也没有这样的出错提示, 导致在 ...