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

方法一：使用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. iOS 将NSArray、NSDictionary转换为JSON格式进行网络传输

    http://blog.csdn.net/worldzhy/article/details/49982491 将NSArray.NSDictionary转换为JSON格式进行网络传输,是经常用到的,但 ...

  2. Vim配置C++

    当前用户的Vim配置便存储在文件 ~/.vimrc 中,该文件的每一行便是一个配置项 设置自动换行,在配置文件中加入如下代码: syntax onset tabstop=4set softtabsto ...

  3. shell 实例学习

    安装crond:yum install crontabs  (http://blog.163.com/victory_wxl/blog/static/14130530220115296180333/) ...

  4. iOS开发——设备信息小结（未完待续...）

    1.获取设备的信息  UIDevice *device = [[UIDevice alloc] init]; NSString *name = device.name;       //获取设备所有者 ...

  5. 【noip】华容道

    描述 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间. 小 B 玩的华容道与经典的 ...

  6. 最基本的SQL语法/语句

    DDL—数据定义语言(Create,Alter,Drop,DECLARE) DML—数据操纵语言(Select,Delete,Update,Insert) DCL—数据控制语言(GRANT,REVOK ...

  7. 获取url参数和时间格式化

    1. 获取url参数: var url = request("url"); //获取url参数 function request(paras) { //decodeURI() 函数 ...

  8. [Angular Tutorial] 13 -REST and Custom Services

    在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTT ...

  9. Unable to list the users SQLSTATE =S0002

    powerdesinger mysql 反向工程时报错 解决方案: database ->change the Target DNMS 修改DBMS为mysql 的对应版本 修改后,点击确定即可 ...

  10. C-Sharp网络编程案例解析（Socket类的使用）

    Server端: using System; using System.Collections.Generic; using System.Text; using System.Net; using ...