今天看网易的网站上，当我把鼠标放上去的时候发现图片放大，移开图片缩小，于是自行尝试，结果如下。

方法一：使用js和css3

　　效果如图：

　　这样的实现非常简单，就是利用js的mouseover和 mouseout事件，但是不知道如何使图片从中间放大，日后再行尝试吧，代码如下：

　　

<!DOCTYPE html>

<html>

<head>

    <title>网易图片动画</title>

    <style>

        div.img {

            width: 220px;

            height: 170px;

            margin: 200px auto;

            overflow: hidden;

        }

        img.bigger {

            width: %;

            height:%;

        }

        @keyframes bigger {

            from {width: %;height: %;}

            to {width: %; height: %;}

        }

        @keyframes smaller {

            from {width: %;height: %;}

            to {width: %; height: %;}

        }

    </style>

</head>

<body>

    <div class="img">

        <img class="bigger" src="http://cms-bucket.nosdn.127.net/d9b6afa0bad743f88c1780c3a064202c20170218074455.jpeg?imageView&thumbnail=185y116&quality=85" alt="">

    </div>

    <script>

        var img = document.querySelector("img");

        img.onmouseover = function () {

            img.style.cssText = "animation: bigger 2s;width:110%; height:110%;";

        }

        img.onmouseout = function () {

            img.style.cssText = "animation: smaller 2s";

        }

    </script>

</body>

</html>

方法二：使用css3方法

　　css3的确给我们带来了很多好处，是我们处理问题更加方便。 这里使用 transform:scale();即可实现，但是这个要结合hover来使用，并且设置好transition的时长才有更好的效果，话不多说效果如下：

　　

　　这个效果是不是好了很多呢，可以看到它自身就是从中心开始扩大的。

　　但是只要我们添加transform-origin属性就可以很好地控制变化的中心点了，如：

    transform-origin:  ;

    transform-origin: % ;

    transform-origin:  %;

    transform-origin: % %;

　　分别表示从左上角、右上角、左下角、右下角扩张，可想而知，默认的transform-origin为50% 50%.

　　源码如下：

<!DOCTYPE html>

<html>

<head>

    <title>网易图片动画</title>

    <style>

        div.img {

            width: 220px;

            height: 170px;

            margin: 200px auto;

            overflow: hidden;

        }

        img.bigger {

            width: %;

            height:%;

            transition:transform 2s;

        }

        img.bigger:hover{

            transform: scale(1.2,1.2);

        }

    </style>

</head>

<body>

    <div class="img">

        <img class="bigger" src="http://cms-bucket.nosdn.127.net/d9b6afa0bad743f88c1780c3a064202c20170218074455.jpeg?imageView&thumbnail=185y116&quality=85" alt="">

    </div>

</body>

</html>

js、css3实现图片的放大效果的更多相关文章

  1. 用CSS3实现对图片的放大效果

    用CSS3对图片放大效果 .right_div .topicons li a:hover img{     -webkit-transform:scale(1.5,1.5);     -moz-tra ...

  2. CSS3实现图片渐入效果

    很多网站都有那种图片渐入的效果,如:http://www.mi.com/minote/,这种效果用css3和一些js实现起来特别简单. 拿我之前做的页面来说一下怎么利用css3来实现图片渐入效果. 下 ...

  3. 用Js+css3实现图片旋转，缩放，裁剪，滤镜

    还是前端图片的老话题,花了半天时间,东拼西凑,凑出个demo,优点在于代码少,核心代码就6行,目前刚做了旋转,缩放,裁剪,滤镜要js做,网络上也有现成的代码, 但是想做到自定义的滤镜咋办呢?这还要从底 ...

  4. CSS实现鼠标移入时图片的放大效果以及缓慢过渡

    transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...

  5. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  6. js 鼠标放到图片上放大某一部分效果

    动图效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  8. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

  9. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Linux下网络流量实时监控工具大全

    在工作中发现,经常因为业务的原因,需要即时了解某台服务器网卡的流量,虽然公司也部署了cacti软件,但cacti是五分钟统计的,没有即时性,并且有时候打开监控页面不方便,个人喜欢随手在某台服务器上输入 ...

  2. linux下配置ip地址四种方法(图文)

    (1)Ifconfig命令   第一种使用ifconfig命令配置网卡的ip地址.此命令通常用来零时的测试用,计算机启动后 ip地址的配置将自动失效.具体用法如下.Ipconfig  ethx   i ...

  3. 详解Objective-C的meta-class 分类： ios相关 ios技术 2015-03-07 15:41 51人阅读 评论(0) 收藏

    比较简单的一篇英文,重点是讲解meta-class.翻译下,加深理解. 原文标题:What is a meta-class in Objective-C? 原文地址:http://www.cocoaw ...

  4. Java 之 反射

    1.反射 a.意义:允许运行中的Java程序对自身进行检查,或者说"自审",并能直接操作程序的内部属性 b.概括:运行时探究和使用编译时未知的类 c.反射的核心原理: ①JVM在加 ...

  5. 编译Uboot时提示error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or directory

    在Ubuntu14.04 64位系统中已经安装了libc6:i386的库,编译Uboot时提示error while loading shared libraries: libz.so.1: cann ...

  6. Struts2---Result（传统Web应用程序与Ajax应用程序的异同）

    看了很久的struts,在视频和书的引导下,慢慢明白了点,推荐:<struts 2 in action>和马士兵的视频 今天看结果这块时,由于还没有学过ajax等,不太明白,但是必须弄懂嗒 ...

  7. iOS 日期时间控件

    UIDatePicker *picker = [[UIDatePicker alloc]initWithFrame:CGRectMake(0, 0,[UIParam widthScreen] ,50 ...

  8. Angular - - angular.uppercase、angular.lowercase、angular.fromJson、angular.toJson

    angular.uppercase 将指定的字符串转换成大写 格式:angular.uppercase(string); string:被转换成大写的字符串. 使用代码: var str = &quo ...

  9. Mysql中常见索引操作

  10. 基于监听的事件处理——Activity本身作为事件监听器

    这种形式使用Activity本身作为监听器类,可以直接在Activity类中定义事件处理方法,这种形式非常简洁.但这种做法有两个缺点: 这种形式可能造成程序结构混乱,Activity的主要职责应该是完 ...