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接口,并按照 笔记.出行.词典.电商.地图.电影.即时通讯.开发者网站.快递查询.旅游.社交.视频.天气.团队协作.图片与图像处理.外卖.消息推送.音乐.云.语义识别 ...
随机推荐
- LeetCode——remove-duplicates-from-sorted-list-ii
Question Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only dist ...
- maven（一）maven自带的插件
关于org.apache.maven.plugins 前言 maven提供了很多插件给我们使用,解释3个java环境常用的maven插件, maven-jar-plugin, maven-compli ...
- Python基础笔记系列九：变量、自定义函数以及局部变量和全局变量
本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 变量在前面的系列中也许就可以发现,python中的变量和C中的变量有些许不 ...
- 《用 Python 学微积分》笔记 2
<用 Python 学微积分>原文见参考资料 1. 13.大 O 记法 比较两个函数时,我们会想知道,随着输入值 x 的增长或减小,两个函数的输出值增长或减小的速度究竟谁快谁慢.通过绘制函 ...
- ADC第一次读取
在ADCCON中,最后0位和1位互斥.如果1位选1的话,0位的值无效.如果1位选0的话,0位的值才有效.当1位选1的话:这是应用层的程序 #if ADSTART==0void niuniu(void) ...
- ctci1.4
; ; ; i < len ; i++) ; +]; ; i < len; i++){ '; } ...
- spring mvc: 注解和JavaConfig实例
通过javaConfig来配置config,并能正常访问url. 先看图 访问地址:http://localhost:8080/gugua5/ http://localhost:8080/gugua5 ...
- MongoDB基于GridFS管理文件
前言 GridFS是一种将大型文件存储在MongoDB的文件规范: 数据库支持以BSON格式保存二进制对象. 但是MongoDB中BSON对象最大不能超过4MB. GridFS 规范提供了一种透明的机 ...
- Tomcat中session共享问题的简单解决办法
tomcat-redis-session-manager 使用redis配置tomcat共享session 结构图: 分析: 分布式web server集群部署后需要实现session共享,针对 to ...
- python 数组中如何根据值，获取索引，如何根据索引删除值 ， 以及如何根据值删除值
假设有一数组 s = [1,2,3,4,5,6,7,8,9] (1)如何根据值获取索引 ,如果值为5 , 那对应的索引为? (2)如何根据索引删除值 , 删除数组中索引5对应的值: (3)根据数组中的 ...