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

方法一：使用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. margin负值布局（一）

    搜索关键词:margin  负-100% 链接地址: 负margin用法权威指南 负边距(negative margin)实现自适应的div左右排版 <div class="cont& ...

  2. MAC上更攺jenkins默认安装目录

    /Library/LaunchDaemons #编缉里面的jenkinshome和username sudo vim org.jenkins-ci.plist #然后 sudo launchctl u ...

  3. python内置函数all使用的坑

    在代码的改造过程中,因为忽略了一个问题导致数据异常,在改造的过程中以及后续的review中都没注意到这个问题,单元测试也没有覆盖到,记录如下.这个坑在于all的使用上,如果参数为空元组或空列表时,返回 ...

  4. Django 自定义模版标签和过滤器

    实现自定义过滤器 1. 创建register变量 在你的模块文件中,你必须首先创建一个全局register变量,它是用来注册你自定义标签和过滤器的, 你需要在你的python文件的开始处,插入几下代码 ...

  5. python and or用法

    and 和 or 是python的两个逻辑运算符,可以使用and , or来进行多个条件内容的判断.下面通过代码简单说明下and  or的用法: 1. or:当有一个条件为真时,该条件即为真.逻辑图如 ...

  6. UVa 10670 - Work Reduction

    题目大意:对n份文件进行处理使其减少到m份,有l个机构可供选择.每个机构提供两种方案:每减少一份收费a元,或者减少到文件数量的一半收费b元.根据各个机构收取费用进行排序. 很直接的题目,直接进行模拟就 ...

  7. linux内核设计与实现笔记 进程调度

    转载:http://blog.chinaunix.net/uid-24919665-id-3013590.html

  8. 利用 Grunt （几乎）无痛地做前端开发 (一)之单元测试

    前言 如果你想开发一个js应用,甭管多简单,都要先创建整个宇宙 来看看我们的Javascript小宇宙: 确定如何根据需求.功能划分模块,如何将代码分成多个文件开发,合成一个发布 保证上一条的同时,使 ...

  9. 开始Java学习（Java之负基础实战）

    开发平台: JavaSE:java标准平台,一般用于桌面程序开发 JavaEE:开发web(如网站+Sping) JavaME:开发移动应用 开发环境: JVM:跨平台核心. JRE:java运行时, ...

  10. MYSQL 函数复习

    数学函数    ABS(X)    返回X的绝对值    SQRT(x)        返回非负数X的二次方根    MOD(x,y)    返回x被y除后的余数    CEIL(x)         ...