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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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适配器模式介绍
2012/08/14 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
cument.execCommand()用法深入理解
2012/12/04 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
js实现简单的打印表格
2020/01/15 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
简明 Python 基础学习教程
2007/02/08 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
元宵晚会主持词
2014/03/25 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
任命书格式模板
2015/09/22 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
python删除csv文件的行列
2021/04/06 Python
给numpy.array增加维度的超简单方法
2021/06/02 Python
浅谈怎么给Python添加类型标注
2021/06/08 Python
Django中session进行权限管理的使用
2021/07/09 Python
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis