<!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. 关于EOF和循环体的搭配使用。

    在oj中,变成如果有EOF和循环体的话,可能网页输入一个东西之后会输入另一个不知道是什么鬼,所以会造成这种情况.可能在输入应该输入的值以后还有一个值一起输入了,导致这种事情的发生. 比较两个图片观察 ...

  2. C++面向过程解决三阶行列式问题

    #include<iostream> #include <cstdlib> using namespace std; int print() { cout<<&qu ...

  3. ajax 外部变量

    1.一般的js代码可以放在任何位置.但是用jquery写的代码需要先引入jquery文件,再写代码. 2.ajax函数中内部的变量不能传到外部.如果改变外部变量,需要async:false,代码如下: ...

  4. java学习第十天

    第十二次课 目标 一维数组(创建访问) 一.概念与特点 1.概念 相同数据类型的有序集合[] 数组名: 容器的名字 元素:  下标变量,数组名[下标] 长度:  length 下标:   位置.索引  ...

  5. NSArray(二) 、 NSMutableArray 、 NSSet 、 NSMutableSet

    1 创建五个学生对象,放入数组并遍历 1.1 问题 创建一个自定义类TRStudent,为该类生成五个对象.把这五个对象存入一个数组当中,然后遍历数组. 1.2 步骤 实现此案例需要按照如下步骤进行. ...

  6. PHP header() 函数详细说明(301、404等错误设置)

    原文来自:http://www.veryhuo.com/a/view/41466.html 如果您刚刚开始学习PHP,可能有许多函数需要研究,今天我们就来学习一下PHP Header()的使用方法,更 ...

  7. Qt简介

    一.Qt与Qt Creator简介        Qt是一个跨平台应用程序和 UI 开发框架.使用 Qt 您只需一次性开发应用程序,无须重新编写源代码,便可跨不同桌面和嵌入式操作系统部署这些应用程序. ...

  8. meta标签兼容性

    基本标签SEO 优化为移动设备添加 viewportWindows 8其他 禁止数字识自动别为电话号码不让android识别邮箱每 8 秒刷新一次页面移动端的头部标签和meta 基本标签 声明文档使用 ...

  9. iOS 协同开发出fatal error: file ‘XX-Prefix.pch’ has been modified since the precompiled header was built

    在协同开发的时候,刚刚从svn下载到本地的代码,出现“fatal error: file 'XX-Prefix.pch' has been modified since the precompiled ...

  10. C# 托管资源和非托管资源

    托管资源指的是.NET可以自动进行回收的资源,主要是指托管堆上分配的内存资源.托管资源的回收工作是不需要人工干预的,有.NET运行库在合适调用垃圾回收器进行回收. 非托管资源指的是.NET不知道如何回 ...