js艺龙
.gif)
<!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艺龙的更多相关文章
- 使用requests、BeautifulSoup、线程池爬取艺龙酒店信息并保存到Excel中
import requests import time, random, csv from fake_useragent import UserAgent from bs4 import Beauti ...
- 浅析天猫H5站点
前言 我们做前端开发的时候,很有可能会做一个竞品分析,比如我就做过去哪儿.艺龙.同程等与携程的移动站点竞品分析,竞品分析的目的一般是技术对比,但是更多的是业务对比,知己知彼,百战不殆:我们同时会借鉴. ...
- 微信小程序导航：官方工具+精品教程+DEMO集合（1月7更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用 ...
- 使用Chrome DevTools的Timeline分析页面性能
随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择.这种方式拥有非常明显的优势:跨平台.开发便捷.便于部署和维护等等,但 ...
- 国内值得关注的官方API集合
项目地址:https://github.com/marktony/Awesome_API 本页仅收集国内部分官方API,如需查看其他版本,请点击这里. 目录 笔记 出行 词典 电商 地图 电影 后端云 ...
- 常用精品API接口汇总
下面列举了100多个国内常用API接口,并按照 笔记.出行.词典.电商.地图.电影.即时通讯.开发者网站.快递查询.旅游.社交.视频.天气.团队协作.图片与图像处理.外卖.消息推送.音乐.云.语义识别 ...
- 微信小程序框架探究和解析
何为框架 你对微信小程序的技术框架了解多少? 对wepy 框架进行一系列的深入了解 微信小程序框架解析和探究 小程序组件化框架WePY 在性能调优上做出的探究 开发者培训班上海专场PPT分享:小程序框 ...
- 常用API接口汇总
下面列举了100多个国内常用API接口,并按照 笔记.出行.词典.电商.地图.电影.即时通讯.开发者网站.快递查询.旅游.社交.视频.天气.团队协作.图片与图像处理.外卖.消息推送.音乐.云.语义识别 ...
随机推荐
- PHP设计模式（六）： 单例模式
- svn的分支
svn的分支使用 新建一个项目的时候,选择建立自带trunk,branches和tags文件夹的. 其中trunk作为主开发. 有需要的时候,从trunk创建分支到对应的branches下面,新建分支 ...
- mybatis的sql映射文件—增删改查
前提:需要的包log4j.jar,mybatis-3.4.1.jar,mysql-connector-java-5.1.37-bin.jar 1.基本类 员工类 package com.hand.my ...
- RabbitMQ入门(3)——发布/订阅(Publish/Subscribe)
在上一篇RabbitMQ入门(2)--工作队列中,有一个默认的前提:每个任务都只发送到一个工作人员.这一篇将介绍发送一个消息到多个消费者.这种模式称为发布/订阅(Publish/Subscribe). ...
- linux一键安装nginx脚本
#!/bin/sh echo "----------------------------------start install nginx ------------------------- ...
- nodejs request-promise 请求返回中文乱码
nodejs request-promise 请求返回中文乱码 解决方法: 具体步骤如下: 1. 引用iconv-lite 进行转码. 2. 请求时要写参数:encoding:null 3. 对bod ...
- python 编程测试练习答案
-- coding: UTF-8 -- file('B.txt','wb').write(file('A.txt','rb').read()) 作业内容 这次作业较为简单,从一个a.txt的多行文本文 ...
- Delphi编码转换
1.Delphi 的 Utf-8 转换 - findumars - 博客园.html https://www.cnblogs.com/findumars/archive/2013/12/26/3492 ...
- 嵌入式 Web workers
前言 虽然worker可以将复杂的运算放入单独线程去运算,不阻塞UI线程,但是,由于worker()的构造函数的参数不能读取本地的文件,只能来自网络,所以当在一个项目里想使用本地的模块函数,是一个很麻 ...
- JAVA执行带参数的SQL语句
转自 http://www.cnblogs.com/raymond19840709/archive/2008/05/12/1192948.html