js艺龙

<!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>

  

图片更换即可

原文地址:https://www.cnblogs.com/bgwhite/p/9476315.html

时间: 2024-10-13 19:28:37

js艺龙的相关文章

收购艺龙,携程“居心叵测”,用垄断倒逼去哪儿

一石激起千层浪,对于携程收购艺龙这件事业界出现了多种声音,也假设了多种可能,但说来说去无外乎"看好"与"看衰"两方面.从策略层面来看,控股艺龙固然是一步好棋,但市场作用被炒的有些过于夸张了,其实携程正在做一个局,而艺龙是这盘棋局中的关键一子. 收购艺龙或暴露了携程居心叵测的大布局 从过去的成长经历来看,携程非常擅于做局,而这次收购艺龙的背后隐隐浮现出携程用心良苦到居心叵测的一盘大棋局.有没有想过,为何前不久还在盛传"去携"合并,如今却突出变成了携

绯闻男主角众多,艺龙最应该和谁“在一起”

DoNews7月10日消息(记者向密)自携程(61.82,0.65,1.06%)收购艺龙(20.93,-0.38,-1.78%)65%股份的传言传出,艺龙股价应声大涨.虽然这一说法被艺龙大股东Expedia第一时间辟谣,但其"不准确"的说法,并未完全否认收购事宜. 另有坊间传闻称,携程将与Expedia换股,后者将其手中持有的艺龙.酷讯和到到网大部分股权"打包",卖给携程. 尽管截至目前,以上两种说法都未得到官方证实,但传言中艺龙身影的一次次出现,都意味着无论交易以

艺龙私有化,携程与腾讯眉来眼去

艺龙宣布,董事会收到腾讯控股的私有化要约,将以18美元的价格以收购艺龙发行的除了携程.铂涛和腾讯等艺龙股东外的全部流通股.如果这个交易能够完成,艺龙将完成私有化从美国纳斯达克股票市场退市,然后寻求在国内资本市场再度上市. 至于艺龙再次卖身给腾讯的原因是,艺龙表示因为竞争对手"看到中国移动住宿市场的巨大潜力,不惜以每年亏损十多亿元人民币的烧钱速度在这个市场里疯狂扩张,艺龙因此也面临着巨大的竞争压力."看上去是在控诉对手的以钱压人. 其实不说在线旅游行业,整个互联网都是在花钱买时间抢占市场

爬取艺龙酒店基础资料

爬取艺龙酒店基础资料 通过对网页源代码分析找到相应节点 提取相应要素并存储 提取自己需要的信息,然后存储就好,这边存放mysql数据库 结果 原文地址:https://www.cnblogs.com/lily19941214/p/11808179.html

rabbitmq在艺龙业务系统中的实践

rabbitmq作为成熟的企业消息中间件,实现了应用程序间接口调用的解耦,提高系统的吞吐量. 下面介绍下rabbitmq的一些基本概念: message acknowledgment: 消息确认,解决消息确认问题,只有收到ack之后才能从消息系统中删除. message durability: 消 息持久化,当rabbitmq退出或崩溃后,会把queue中的消息持久化.但注意,RabbitMQ并不能百分之百保证消息一定不会丢失,因为为了提 升性能,RabbitMQ会把消息暂存在内存缓存中,直到达

征服大前端视频教程第一季(jQuery、HTML5、CSS3、Node.js)

征服大前端视频教程第一季(jQuery.HTML5.CSS3.Node.js.AngularJS.MongoDB)网盘地址:https://pan.baidu.com/s/1-dbJMOa1RrQzcMY2pBw1hw 密码: xi2c备用地址(腾讯微云):https://share.weiyun.com/5ynLsD5 密码:nhdtxq 本系列课程第一季专注于WEB前端工程师必备技能H5.C3.JS.jQuery和拓展技能Node.js.AngularJS.MongoDB等技术的实战训练,囊

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

随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择.这种方式拥有非常明显的优势:跨平台.开发便捷.便于部署和维护等等,但随着功能的不断积累,web应用程序也会变得越来越复杂.但是,我们仍然想要在webpage支持丰富的呈现形式的同时,让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿,就需要我们使用一些比较直观的方式来分析衡量页面的性能问题,为性能优化方案提供依据. 为什么是60fps?我们的目标是保

18款jquery抽屉式手风琴导航特效代码分享

jquery hover抽屉式导航图片展开收缩代码 jQuery仿瑞丽鼠标滑过图片手风琴展开特效 jQuery扁平风格的图标导航手风琴切换代码 jQuery左右滑动手风琴轮播切换特效 jQuery仿AnG无双科技滑动手风琴特效源码 jquery图片信息列表选项卡左右切换代码 jQuery hover水滴导航切换选项卡栏目代码 jquery手风琴菜单制作横向菜单切换手风琴效果代码 jquery水平滑动手风琴菜单鼠标点击图片展示手风琴菜单代码 jQuery仿艺龙旅行网图片手风琴特效 jQuery C

浅析天猫H5站点

前言 我们做前端开发的时候,很有可能会做一个竞品分析,比如我就做过去哪儿.艺龙.同程等与携程的移动站点竞品分析,竞品分析的目的一般是技术对比,但是更多的是业务对比,知己知彼,百战不殆:我们同时会借鉴.学习其它网站的技术,比如网站HTML使用.class命名.使用了什么新技术,还有优化体验相关的,对大型网站的学习分析是对自己网站提高的借鉴,也是个人能力的提升途径,今天我们就来一起学习下天猫的移动站点. PS:此文单独学习借鉴,不涉及其它,请相关同事不要在意,文中有误请提出. 打开站点首页http: