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

方法一：使用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. ue4中窗口打开web地址

    首先打开项目,设置,widgets,启用webbroswer 新建一个蓝图, 在控件栏里就可以找到添加webbroswer 设置initial url就可以打开网页了, 项目中还用到获取界面参数,与界 ...

  2. 超全！整理常用的iOS第三方资源

    一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框 地址:https://github. ...

  3. CentOS编译安装LNMP环境

    这里是教大家如何在centos下利用源码编译安装LNMP环境. 工具/原料 centos服务器一台 自用电脑一台 准备篇 配置好IP.DNS .网关,确保使用远程连接工具能够连接服务器 配置防火墙,开 ...

  4. easyui 异步json tree跨域访问问题解决

    最近在用easyui中的异步tree时发现了跨域访问问题,我们都知道jquery ajax提供get请求的跨域访问.所以解决easyui tree跨域访问的问题便是将数据通过jquery ajax将数 ...

  5. Phplot--一些记录

    1.一张图片画俩次 需要设置 $phplot->SetPrintImage(0); 参考  http://www.phplot.com/phplotdocs/ex-twoplot1.html

  6. iOS开发笔记 - 界面调试神器Reveal

    http://blog.csdn.net/jackfrued/article/details/50934092     Reveal是iOS开发工具中的神器之一,它能够在应用程序运行过程中调试应用程序 ...

  7. LIQN join on 后跟多个条件

    sql 版:SELECT [t0].[OrderID], [t0].[CustomerID], [t0].[EmployeeID], [t0].[OrderDate], [t0].[RequiredD ...

  8. IOS开发中如何给UIImageView添加点击事件

    1.先创建一个UIImageView控件: photeImageView = [[UIImageView alloc]init]; photeImageView.frame = CGRectMake( ...

  9. 搭建NDK环境

    2014.07.14 搭建OK,但是目前只能手动编译c代码,具体不清楚.

  10. drag file upload xhr 拖拽异步上传文件

    <div id="droptarget" style="width: 500px; height: 200px; background: silver"& ...