<!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. 14、C#基础整理（函数）

    函数 1.概念:是一个带有输入参数.输出参数.返回值的代码块. 2.写法: 修饰符  返回值类型  函数名(输入参数,输入参数) { 方法段 return 返回值; } 3.注释: (1)输入参数格式 ...

  2. 【转】3 Essential Sublime Text Plugins for Node & JavaScript Developers

    原文转自:http://scottksmith.com/blog/2014/09/29/3-essential-sublime-text-plugins-for-node-and-javascript ...

  3. 《JS高程》对象&原型学习笔记

    ECMA-262 把对象定义为:”无序属性的集合,其属性可以包含基本值.对象或者函数.”可以把 ECMAScript 的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数.   6.1.理解 ...

  4. （理论篇）53个要点提高PHP编程效率

    用单引号代替双引号来包含字符串,这样做会更快一些.因为php会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数"( ...

  5. NetSetMan IP地址切换工具

    http://www.netsetman.com/en/freeware NetSetMan NetSetMan是一个网络设置管理器,它可以很容易在6种不同的,视觉结构化的配置之间切换,包括: IP地 ...

  6. nginx+tomcat集群配置(1)---根目录设定和多后端分发配置

    前言: 对于javaer而言, nginx+tomcat集群配置, 已然成了web应用部署的主流. 大公司如此, 小公司亦然. 对于个人开发者而言, 资源有限, 往往多个web应用混部于一台服务器(云 ...

  7. linux权限管理_ACL权限

    一.什么是ACL权限 ACL是Access Control List(访问控制列表)的缩写,主要的目的是在提供传统的owner,group,others的read,write,execute权限之外的 ...

  8. OOP作业

    1,定义一个水果类(fruit),水果类中的有[属性]:颜色(color).价格(price).重量(weigth),再定义一个<测试类>,创建一个苹果(apple)的对象, 颜色是&qu ...

  9. HDU-5792 World is Exploding（树状数组）

    题目大意:给一个整数序列,统计四元组(a,b,c,d)的个数,满足条件1:a<>b<>c<>d:条件2:<a,b>组成一个顺序对,<c,d> ...

  10. Get access to Servlet

    import java.io.*;import javax.servlet.*;import javax.servlet.http.*;public class LoginServlet extend ...