JS与CSS3实现图片响应鼠标移动放大效果示例


Posted in Javascript onMay 04, 2018

本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果。分享给大家供大家参考,具体如下:

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

方法一:使用js和css3

效果如图:

JS与CSS3实现图片响应鼠标移动放大效果示例

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

<!DOCTYPE html>
<html>
<head>
  <title>网易图片动画</title>
  <style>
    div.img {
      width: 220px;
      height: 170px;
      margin: 200px auto;
      overflow: hidden;
    }
    img.bigger {
      width: 100%;
      height:100%;
    }
    @keyframes bigger {
      from {width: 100%;height: 100%;}
      to {width: 110%; height: 110%;}
    }
    @keyframes smaller {
      from {width: 110%;height: 110%;}
      to {width: 100%; height: 100%;}
    }
  </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的时长才有更好的效果,话不多说效果如下:

JS与CSS3实现图片响应鼠标移动放大效果示例

这个效果是不是好了很多呢,可以看到它自身就是从中心开始扩大的。
但是只要我们添加transform-origin属性就可以很好地控制变化的中心点了,如:

transform-origin: 0 0;
transform-origin: 100% 0;
transform-origin: 0 100%;
transform-origin: 100% 100%;

分别表示从左上角、右上角、左下角、右下角扩张,可想而知,默认的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: 100%;
      height:100%;
      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>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
详解Node.JS模块 process
Aug 31 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 #Javascript
JS模拟实现哈希表及应用详解
May 04 #Javascript
vue地区选择组件教程详解
May 04 #Javascript
Vue 按键修饰符处理事件的方法
May 04 #Javascript
vue mint-ui tabbar变组件使用
May 04 #Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 #Javascript
原生javascript AJAX 三级联动的实现代码
May 04 #Javascript
You might like
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python中tab键是什么意思
2020/06/18 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
护理专业自荐信
2013/12/03 职场文书
年度考核评语
2014/01/19 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
八一演出活动方案
2014/02/03 职场文书
新春寄语大全
2014/04/09 职场文书
《故乡》教学反思
2014/04/10 职场文书
求职信结尾怎么写
2014/05/26 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书