<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8"/>

<link href="css/reset.css" rel="stylesheet" type="text/css">

<style type="text/css">

body

{

font-size: 14px;

font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;

background: #111;

}

#content ul

{

width: 960px;

margin: 150px auto;

padding: 60px 0;

}

#content ul li

{

margin-right: 20px;

width: 225px;

height: 180px;

float: left;

}

#content ul li:last-child

{

margin-right: 0;

}

#content ul li a

{

position: relative;

display: block;

width: 100%;

height: 100%;

/*舞台（动画元素的父容器）perspective*/

-webkit-perspective: 800px;

-moz-perspective: 800px;

}

#content ul li a > div

{

position: absolute;

left: 0;

height: 0;

width: 100%;

height: 100%;

color: #fff;

/*动画元素transform-style*/

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-webkit-transition: .8s ease-in-out ;

-moz-transition:  .8s ease-in-out ;

/*动画元素背后设置为hidden*/

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

}

#content ul li a div:first-child

{

/*

绕y轴旋转

*/

-webkit-transform: rotateY(0);

-moz-transform: rotateY(0);

z-index: 2;

}

#content ul li a div:last-child

{

background: url("images/bg.jpg") no-repeat 0 0;

-webkit-transform: rotateY(180deg);

-moz-transform: rotateY(180deg);

z-index: 1;

}

#content ul li a:hover div:first-child

{

-webkit-transform: rotateY(-180deg);

-moz-transform: rotateY(-180deg);

}

#content ul li a:hover div:last-child

{

-webkit-transform: rotateY(0);

-moz-transform: rotateY(0);

}

#content ul li a div h3

{

margin: 0 auto 15px;

padding: 15px 0;

width: 200px;

height: 16px;

line-height: 16px;

font-size: 14px;

text-align: center;

border-bottom: 1px #fff dashed;

}

#content ul li a div p

{

padding: 0 10px;

font-size: 12px;

text-indent: 2em;

line-height: 18px;

}

</style>

</head>

<body>

<div id="content">

<ul>

<li>

<a href="#" target="_blank">

<div><img alt="" src="data:images/1.jpg"/></div>

<div>

<h3>漩涡鸣人</h3>

<p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p>

</div>

</a>

</li>

<li>

<a href="#" target="_blank">

<div>

<img alt="" src="data:images/2.jpg"/>

</div>

<div>

<h3>日向雏田</h3>

<p>

日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者，木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人，原本是个性格柔弱的女孩，但是在鸣人的影响下逐渐变得坚强，并逐渐成长为一名优秀的忍者。</p>

</div>

</a>

</li>

<li>

<a href="#" target="_blank">

<div><img alt="" src="data:images/3.jpg"/></div>

<div>

<h3>蒙奇·D·路飞</h3>

<p>蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长，梦想是找到传说中的宝藏 —— ONE PIECE，成为海贼王。</p>

</div>

</a>

</li>

<li>

<a href="#" target="_blank">

<div>

<img alt="" src="data:images/4.jpg"/>

</div>

<div>

<h3>盒子先生</h3>

<p>

Danbo是一只用废纸盒DIY出来的可爱玩偶，圆圆的眼睛和三角形的嘴巴，时刻露出无辜的表情，让人看到就心软，Danbo是个纯真善良的小家伙，在它单纯的幻想世界里，总是透露出最纯真可爱的动人气息。</p>

</div>

</a>

</li>

</ul>

</div>

</body>

</html>

自定义滚动条配合鼠标滚轮demo的更多相关文章

  1. 如何让VB6代码编辑器垂直滚动条随鼠标滚轮滚动

    VB6毕竟是很老的产品了,它的代码编辑器垂直滚动条并不能随鼠标的滚轮而滚动,这个问题会让我们在编写代码的时候觉得很不方便,不过还是有一种方法可以解决这个问题的.    先下载一个微软发布的“VB6ID ...

  2. DBGRID 拖动滚动条 和 鼠标滚轮的问题

    滚动条拖动问题 默认是,拖动时,网格内数据不变,等放开鼠标后才会变. 方法 拖动时同时变,当前记录也变,不用新控件 http://wenwen.sogou.com/z/q185291591.htm 鼠 ...

  3. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  4. javascript 学习之自定义滚动条加滚轮事件

    要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...

  5. WPF中关于自定义控件的滚动条鼠标停留在内容上鼠标滚轮滚动无效的问题

    问题起因:在一个用户控件里放置了1个TreeView垂直顺序放置. 当用户控件中的内容超过面板大小时,滚动条会自动出现 ,但是只有当鼠标指示在右边滚动条的那一条位置时,才支持鼠标滚轴滚动. 点在控件内 ...

  6. echarts数据区域缩放（鼠标滚轮、滚动条、拉选框）

    当一个echarts图表上的数据很多时,想要查看部分区域的数据状态,可以通过数据区域缩放来实现,现总结三个方法: 鼠标滚轮缩放: var arr = []; for(var i = 0;i<15 ...

  7. VB6 如何自定义代码字体和支持鼠标滚轮

    1 点击工具-选项-编辑器格式,把代码改成需要的字体和大小.(一般微软雅黑,16号字体比较好)   2 从以下网站下载VB6增强工具,可以支持鼠标滚轮代替右侧滚动条查看代码,按F3还可以切换代码窗口和 ...

  8. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

  9. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

随机推荐

  1. enote笔记语言（5）——其他（ver0.2）

    章节:其他   ((主:单词))                               用来醒目地强调这个句子中哪个词语作主语 sentence:                         ...

  2. Gym - 101670F Shooting Gallery（CTU Open Contest 2017 区间dp）

    题目&题意:(有点难读...) 给出一个数字序列,找出一个区间,当删除这个区间中的两个相同的数字后,只保留这两个数字之间的序列,然后继续删除相同的数字,问最多可以实行多少次删除操作. 例如: ...

  3. Linux学习笔记记录（三）

    压缩: 例如将/etc 目录压缩为压缩包tar -cjvf  /aaa.tar.bz2  /etc           tar -czvf /aaa.tar.gz  /etc 解压: tar -xjv ...

  4. jmeter录制火狐浏览器

    昨天看youtube,居然发现有这功能,啊哈哈 听不懂英语 也能有收获. 一.Jmeter 文件中选择Templates->Recording 二.创建之后,自动出现一个模板: 1. Threa ...

  5. mac下用crontab实现pytho3脚本自动定期执行，包括scrapy的定期执行

    呃 其实要明天上午才能知道是否成功,毕竟改了一个小参数的. 首先,来学两个小命令: step1: $ sudo crontab -e step2: # 然后提示password输入密码,即可进入编辑页 ...

  6. 解决Python打包exe控制台无法粘贴问题

    使用pyinstaller打包生成可执行exe文件后,发现启用input()接受键盘输入时窗口无法粘贴也无法右键,找了好久终于找到问题所在: 一是通过右键单击控制台主题边框在弹出的菜单中选择编辑.粘贴 ...

  7. noip模拟赛 业务办理

    [问题描述]在银行柜台前,有 n 个顾客排队办理业务. 队伍中从前往后,第 i 位顾客办理业务需要ti 分钟时间. 一位顾客的等待时间定义为:队伍中在他之前的所有顾客和他自己的办理业务时间的总和.第 ...

  8. Stockbroker Grapevine POJ 1125 Floyd

    Stockbroker Grapevine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 37069   Accepted: ...

  9. - > 强烈推荐！！！

    学长的微博总是能帮我们解决很多问题QAQ,超有用的: http://blog.csdn.net/cax1165/article/category/6294316/6

  10. 30、Java并发性和多线程-阿姆达尔定律

    以下内容转自http://ifeve.com/amdahls-law/: 阿姆达尔定律可以用来计算处理器平行运算之后效率提升的能力.阿姆达尔定律因Gene Amdal 在1967年提出这个定律而得名. ...