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

方法一：使用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. LPC1788的内部EEPROM使用

    Lpc1788内置有eeprom 使用代码 #ifndef __E2PRONINCHIP_H_ #define __E2PROMINCHIP_H #include "common.h&quo ...

  2. linux命令学习-2-dmesg

    DMESG NAME dmesg - print or control the kernel ring buffer(打印或者控制内核环缓冲) Usage: dmesg [options] Optio ...

  3. iOS开发——判断邮箱格式

    //判断邮箱格式 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-]+@ ...

  4. S3C2440的定时器详解

    还包含用于大电流驱动的死区发生器 位预分频器是可编程的,并且按存储在TCFG0和TCFG1寄存器中的加载值来分频PCLK 位递减计数器.当递减计数器到达零时,产生定时器中断请求通知CPU定时器操作已经 ...

  5. u-boot源码下载

    1. 使用git下载u-boot源码  1.1 clone u-boot源码仓库 可以使用git.HTTP.和 rsync协议来下载u-boot源码.你可以使用如下方法来克隆源码树: $ git cl ...

  6. 医院his系统数据库恢复

    医院IT系统的重要性堪比金融行业,“银行系统宕机,老百姓不能取钱:医院HIS系统宕机,老百姓不能看病”, 医院信息系统称得上是迄今为止企业级信息系统中最复杂的一类.  某医院HIS系统SQL2008数 ...

  7. C++ 句柄类

    一.容器与继承 在容器中保存有继承关系的对象时,如果定义成保存基类对象,则派生类将被切割,如果定义成保存派生类对象,则保存基类对象又成问题(基类对象将被强制转换成派生类对象,而派生类中定义的成员未被初 ...

  8. React Native 之 搭建开发环境

    现在只能在MAC系统上安装. 1. 首先,HomeBrew 这是一个包管理库,用来下载其它工具. 打开网站:brew.sh 网页有个命令 /usr/bin/ruby -e "$(curl - ...

  9. apue- chapter 3 文件IO

    1.函数open和函数openat #include<fcnl.h> int open(const char *path,int oflag,.../*mode_t mode */) in ...

  10. Delphi ShellExecute的用法

    请在interface处uses句中加入ShellAPI 有三个API函数可以运行可执行文件WinExec.ShellExecute和CreateProcess.1.CreateProcess因为使用 ...