鼠标放到图片上，图片缓慢变大，离开时，图片缓慢恢复

给大家介绍一个小的动态效果，当鼠标放到图片上时，图片会变大，鼠标离开时，图片恢复，如果想简单一点，直接给图片加一个hover就可以了，但是这样效果不是很美观，我想让它有一个过度的实现效果，移除的时候也有，那我们就需要用到js了：

先放入一张图片，或者任意一个块标签，设置宽高

<div class="harley"><img src="img/muotuo1.png" />
</div>

css样式

 .harley{           //设置容器的大小width: 350px;height: 300px;overflow: hidden;    //这个一定要加，如果是多张图片，不加的话会导致效果不好看，溢出隐藏}.harley img{     //图片大小width: 300px;height: 175px;}

<script>var Harley=document.getElementsByClassName("harley")[0];var Imgone=Harley.getElementsByTagName("img")[0];Imgone.onmouseover = function () {Imgone.style.width="330px";Imgone.style.height="185px";Imgone.style.transition="0.8s ease";}Imgone.onmouseout = function () {Imgone.style.width="";    //不需要设置大小，空的话会回到原来大小Imgone.style.height="";Imgone.style.transition="0.8s ease";}</script>

鼠标放到图片上，图片缓慢变大，离开时，图片缓慢恢复相关推荐

Django自定义Storage实现图片上传至各大OSS（上篇）
目录 Django默认Storage介绍自定义Storage `__init__()`构造函数 `open()`函数 `save()`函数 `delete()`函数 `url()`函数 `path( ...
php flash 图片上传,php+jquery+ajax无刷新图片上传裁切，模拟flash头像上传实例
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
给图片添加水印效果图的函数(可以在图片上添加自己的版权和LOGO图片的水印) 【转载】...
protected void Button1_ServerClick(object sender, System.EventArgs e) { ...
谱时图片直播2018维密大秀现场图片极速首发
摄影3.0时代来临传播才是王道北京2018年11月13日电 /美通社/ -- 2018年维密大秀已于纽约当地时间11月8日下午16:00拉开帷幕,谱时图片直播作为全球第一家进入维密大秀现场的图片直 ...
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对 ...
html如何让图片慢慢放大,CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）...
CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对 ...
通过PHAsset获取的图片上传后变大和图像被旋转90度问题完美解决方案
通过新建立相同的localIdentifier的PHAsset来实现获取到的图片和原图片大小相同,方向正常. 通过TZImagePickerController获取到选择图片的assets和photo ...
elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
计算机画图怎样更改文字,如何在图片上改字|超简单的修改图片里文字方法
这篇文章将要给大家介绍的是,不用联网,不用下载专业的图像处理软件,单纯用画图工具,就能修改表情包.图片上文字的方法,只适合简单的图片处理,复杂的还是交给专业的图像处理工具吧.下面系统吧就给大家带来修改 ...

鼠标放到图片上，图片缓慢变大，离开时，图片缓慢恢复

鼠标放到图片上，图片缓慢变大，离开时，图片缓慢恢复相关推荐

最新文章

热门文章