<!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. 黑马程序员——【Java基础】——Java语法基础

    ---------- android培训.java培训.期待与您交流! ---------- 一.关键字 1.定义和特点 定义:被Java语言赋予了特殊含义的单词. 特点:关键字中所有的字母都为小写. ...

  2. 【LeetCode OJ】Best Time to Buy and Sell Stock III

    Problem Link: http://oj.leetcode.com/problems/best-time-to-buy-and-sell-stock-iii/ Linear Time Solut ...

  3. Redis - hash类型操作

    hash 类型操作设置操作:hset:    hset key filed value        创建指定key的filed-value名值对 hsetnx:    hsetnx key file ...

  4. SecureCRT rz和sz命令不可用，安装lrzsz

    1.从网站下载 lrzsz-x.xx.xx.tar.gz2.解压文件[root@localhost src]# tar zxvf lrzsz-0.12.20.tar.gz3.安装[root@local ...

  5. jquery 平滑滚动页面到某个锚点

    $(document).ready(function() {         $("a.topLink").click(function() {                 $ ...

  6. 这是高手最常用的第一快捷组合键 - imsoft.cnblogs

    1.锁定电脑 2.要找电脑上的文件时,一般人会先找到“我的电脑”,然后点击打开,而高手总是很酷的,轻轻按下键盘上的Windows键不放然后再按E键,直接打开电脑的资源管理器,而一般人还在慢慢寻找“我的 ...

  7. 关于 System.IO.FileAttributes 的 Reparse Points

    关于Reparse Points找到下面的解释,要是能有更进一步的解释说明就更好了 Reparse Points其实是一个用户自定义的数据集合,它可以包含在一个文件或目录中.这种格式的数据能够被特定的 ...

  8. iOS中动画的简单使用

    iOS中的动画右两大类1.UIView的视图动画2.Layer的动画 UIView的动画也是基于Layer的动画动画的代码格式都很固定 1.UIView动画 一般方式[UIView beginAnim ...

  9. ui学习笔记---第十五天数据库

    数据库的使用 常见的数据库有MySQL       SQL Server       SQLite      Oralce等 在iOS开发中通常使用SQLite数据库,这是一个轻量级的数据库,可以在火 ...

  10. ZOJ 3805--解题报告

    题目相关: 3805相关链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5337 在二维的矩形上, 机器通过管道(pipe ...