JavaScript仿win8高端滑动旋转效果
来源：互联网 发布：淘宝贷款10万不还 编辑：程序博客网 时间：2024/05/16 05:36
效果图：
示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--声明当前页面的编码集charset=GBK，gb2312(中文编码)，UTF-8(国际编码)-->
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<!--声明当前页面的三要素-->
<title>标题</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<!--css , js-->
<style type="text/css">
*{margin:0px;padding:0px;}
body{background:#F3F3F3;font-size:12px;font-family:"微软雅黑";}
.course{width:1210px;height:302px;background:#fff;margin:200px auto;padding-top:20px;}
.course .course_title{width:1210px;height:40px;margin-bottom:20px;}
.course .course_title h3{font-size:24px;font-weight:300;line-height:40px;padding-left:20px;}
.course .course_content{width:1190px;height:222px;padding-left:20px;}
.course .course_content ul li{width:290px;height:220px;float:left;list-style:none;position:relative;}
.course .course_content ul li .course_text{font-size:24px;color:#fff;line-height:220px;text-align:center;}
.course .course_content ul li .one{background:rgb(45, 138, 241);}
.course .course_content ul li .two{background:rgb(102, 102, 102);}
.course .course_content ul li .three{background:rgb(212, 72, 37);}
.course .course_content ul li .four{background:rgb(0, 150, 25);}
.course .course_content ul li .course_info{position:absolute;top:0;left:0;background-color: rgba(0,0,0,0.8);display:none;}
.course .course_content ul li .course_info a{width:270px;height:200px;display:block;padding:10px;text-decoration:none;}
.course .course_content ul li .course_info a span{display:block;color:#fff;}
.course .course_content ul li .course_info a .title{margin-bottom:20px;font-size:20px;}
</style>
</head>
<body>
<div class="course">
<div class="course_title">
<h3>My Web Course</h3>
</div>
<div class="course_content">
<ul id="tm-course_contentbox">
<li>
<div class="course_text one">css3 + HTML5高级应用</div>
<div class="course_info">
<a href="#">
<span class="title">css3 + HTML5高级应用</span>
<span>CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。</span>
</a>
</div>
</li>
<li>
<div class="course_text two">CSS 架构</div>
<div class="course_info">
<a href="#">
<span class="title">css架构</span>
<span>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。</span>
</a>
</div>
</li>
<li>
<div class="course_text three">haslayout</div>
<div class="course_info">
<a href="#">
<span class="title">haslayout</span>
<span>haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）</span>
</a>
</div>
</li>
<li>
<div class="course_text four">BFC 神奇背后的原理</div>
<div class="course_info">
<a href="#">
<span class="title">BFC</span>
<span>BFC已经是一个耳听熟闻的词语了，网上有许多关于BFC的文章，介绍了如何触发BFC， 以及BFC的一些用处（如清浮动，防止margin重叠等）。虽然我知道如何利用BFC解决这些问题，但别人问我为什么，我只能说：“它就那样”。</span>
</a>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tm-course_contentbox").find("li").mouseover(function(){
$(this).find(".course_info").fadeTo(500,1);
}).mouseleave(function(){
$(this).find(".course_info").fadeTo(500,0).hide();
});
});
</script>
</body>
</html>
- JavaScript仿win8高端滑动旋转效果
- Qt仿Android带特效的数字时钟源码分析（滑动，翻页，旋转效果）
- Qt仿Android带特效的数字时钟源码分析（滑动，翻页，旋转效果）
- Qt仿Android带特效的数字时钟源码分析（滑动，翻页，旋转效果）
- Android 仿苹果滑动效果
- 仿QQ tab滑动效果
- 仿path首页滑动效果
- 仿iOS滑动返回效果
- 仿Win8按钮磁贴效果
- Android ImageView仿win8 Metro效果
- 一个仿WIN8磁铁效果的ImageView
- 仿Win8的磁贴效果
- javascript仿QQ滑动菜单
- JavaScript 仿ios滑动选择器
- javascript 滑动验证 仿淘宝滑动验证
- JavaScript 滑动条效果
- 滑动菜单效果javaScript
- javascript图片滑动效果
- BZOJ2724: [Violet 6]蒲公英
- 新接触新探索RecyclerView
- 再次重复前两个步骤
- Symfony基础知识要点
- 最简单递归
- JavaScript仿win8高端滑动旋转效果
- 抽象数据类型及基本操作验证
- 一个经典例子让你彻彻底底理解java回调机制
- spring整合struts
- M0内核TIME3和TIME7的应用
- wampserver默认端口80修改的注意
- 常见邮件服务器地址
- c#调试输出
- iOS中gif图片上传的问题
