<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5鼠标hover的时候图片放大的效果展示(仿新浪NBA)</title>
<style type="text/css">
.imgHoverZoom{float:left;margin:5px;overflow:hidden;}
.imgHoverZoom img{
height:150px;
-webkit-transition: -webkit-transform .3s ease;
-moz-transition: -moz-transform .3s ease;
-ms-transition: -ms-transform .3s ease;
transition: transform .3s ease;
}
.imgHoverZoom img:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2)
}
</style>
</head>
<body>
<a href="" class="imgHoverZoom"><img src="./img/1.jpeg" /></a>
<a href="" class="imgHoverZoom"><img src="./img/2.jpeg" /></a>
<a href="" class="imgHoverZoom"><img src="./img/3.jpeg" /></a>
<a href="" class="imgHoverZoom"><img src="./img/4.jpeg" /></a>
</body>
</html>

HTML5鼠标hover的时候图片放大的效果展示的更多相关文章

  1. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  2. js+jquery+html实现在三种不通的情况下，点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  3. JavaScript函数实现鼠标指向后带图片的提示效果

    转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从 ...

  4. img 鼠标滑上后图片放大,滑下后图片复原

    <style type="text/css">img{ -webkit-transition: ease .2s; transition: ease .2s; -web ...

  5. 用仿ActionScript的语法来编写html5——第八篇，图片处理+粒子效果

    用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支持html5的浏览器 ht ...

  6. js图片放大境效果

    放大境效果如下图所示,当鼠标放到小图时,就会出现浅黄色的小块,而右边方框也出现了,并且右边方框的内容时根据浅黄色小块的内容变换而变换: 原理: 1,准备2张图,一大一小,如上图所示,小图的盒子div1 ...

  7. 第六十七篇、OC_UITableView head下拉图片放大的效果

    (一) 布置UITableview 我们首先要通过设置UITableview的内容偏移 self.tableView.contentInset 来为图片视图留出位置,这里我们的图片高度暂定为280 ; ...

  8. 顶部图片放大回弹效果Scrollview ---- 各应用中常见的自定义View 解析

    原理并不难.  代码量也不大.  非常简洁 .  先来个效果图 再上一波代码. public class SpecialScrollView extends ScrollView implements ...

  9. iOS----实现scrollView或者scrollView的子类下拉图片放大的效果

    代码是通过Tableview来说明的,用在其他情况下同样适用 - (void)viewDidLoad { [super viewDidLoad]; _imageview = [[UIImageView ...

随机推荐

  1. apache环境Zf2要装的intl验证

    sudo apt-get install php5-intl

  2. Linux命令（1）-创建文件

    版本:centos7 1.可以使用cat创建一个新的文件 命令:cat>>filename 使用cat创建文件时,以系统默认的文件属性作为新文件的属性,并接受键盘输入作为文件的内容.输入结 ...

  3. POJ 3278 经典BFS

    进一步了解了bfs; 题意:给你n,然后用+,-,*三种运算使n变成k; 漏洞:在算出新的数字之后,一定要判边界,否则RE,而且在每一步后面都得加判断是否等于K,如果是即刻退出,否则WA,判这个的时候 ...

  4. 【LeetCode OJ】Triangle

    Problem Link: http://oj.leetcode.com/problems/triangle/ Let R[][] be a 2D array where R[i][j] (j < ...

  5. 9、C#基础整理（多维数组）

    多维数组 1.二维数组: 表示方法: int[y,x],x.y是索引,y代表行,x代表列. 例: , ]{ {,,}, {,,} };//{}可以不写 修改方法: second[, ] = ;//表示 ...

  6. Team Foundation API - 编程访问 WorkItem

    Team Foundation Server (TFS)工具的亮点之一是管理日常工作项, 工作项如Bug, Task,Task Case等. 使用TFS API编程访问TFS服务器中的工作项, 步骤如 ...

  7. Smart20学习记录----异步通知

    异步通知: 阻塞与非阻塞访问.poll()函数提供了较好地解决设备访问的机制(应用程序主动访问) 异步通知:一旦设备就绪,则主动通知应用程序,这样应用程序根本就不需要查询设备状态,这一点非常类似于硬件 ...

  8. 第一个demo

    1.首先这是最初的概念模型. 2.最后设计成这样. 3.运行

  9. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  10. python with as用法

    with as用途:取代原来的try...finally,主要是用于处理异常 基本语法:with EXPRESSION [ as VARIABLE] WITH-BLOCK 基本要求:with所求值的对 ...