<!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. HTML的盒子模型

    每个HTML元素都可以看作一个装了东西的盒子,盒子具有宽度(width)和高度(height),盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框 ...

  2. HDOJ-三部曲一(搜索、数学)-1013-Sudoku

    Sudoku Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) Total Submi ...

  3. 【转】使用Xcode 6将你的项目本地化

    原文转自:http://www.cocoachina.com/ios/20141004/9827.html iOS和OSX支持40种语言的本地化,Xcode无疑为这一过程提供了强有力的支持.苹果将这一 ...

  4. rnn lstm

    资料收集:https://github.com/kjw0612/awesome-rnn 代码+例子+物理意义:https://iamtrask.github.io/2015/11/15/anyone- ...

  5. clone 深拷贝 浅拷贝

    1. 定义:知道一个对象,但不知道类,想要得到该对象相同的一个副本,在修改该对象的属性时,副本属性不修改,clone的是对象的属性 2. 意义:当一个对象里很多属性,想要得到一个相同的对象,还有set ...

  6. Java 简介

    前言 本文大致介绍 Java 语言 什么是 Java 语言? Java 不仅仅是一门语言,Java 是一个完整的平台,有一个庞大的库,其中包含很多可重用的代码和一个提供诸如安全性,跨操作系统的可移植性 ...

  7. How to use HaploView

    HaploView is a program that is used to visualize the LD blocks of  SNPs. What I need to do is the fo ...

  8. CentOS下Web服务器环境搭建LNMP一键安装包

    CentOS下Web服务器环境搭建LNMP一键安装包 时间:2014-09-04 00:50来源:osyunwei.com 作者:osyunwei.com 举报 点击:3797次 最新版本:lnmp- ...

  9. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  10. Mysql数据库搭建-Windows

    首先先下载一下文件包. 下面这个文件包里面包含了已配置的MySQL5.5和连接器. https://www.dropbox.com/s/iu4ifv0m2232ktn/Win_Mysql5_ODBC. ...