关键词：
转载自： http://blog.csdn.net/u014175572/article/details/51535768
CSS3的transform:scale()可以实现按比例放大或者缩小功能。
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
效果如下图所示：
1、当未鼠标未放到图片上的效果：
2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 300px; 10 border: #000 solid 1px; 11 margin: 50px auto; 12 overflow: hidden; 13 } 14 div img{ 15 cursor: pointer; 16 transition: all 0.6s; 17 } 18 div img:hover{ 19 transform: scale(1.4); 20 } 21 </style> 22 </head> 23 <body> 24 <div> 25 <img src="img/focus.png" /> 26 </div> 27 </body> 28 </html>
其中：
transition: all 0.6s; 表示所有的属性变化在0.6s的时间段内完成。
transform: scale(1.4); 表示在鼠标放到图片上的时候图片按比例放大1.4倍。
代码下载地址：http://download.csdn.net/detail/u014175572/9535023
黑马day18鼠标事件&图片变大
...后鼠标移动，图片也会跟着移动，接下来我就使用jquery来实现这样的效果：这是图片文件夹：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi 查看详情
两种方式实现鼠标悬停图片逐渐变大
...这里推荐两种方式，各有优缺点：1.利用js，通过定时器实现宽高的加减。//鼠标移动图片变大functionchange_large(obj,speed,target_width,target_height){vartimer=null;varbengin_width=140;//初始宽度varbengin_height=180;//初始高度clearInt 查看详情
淘宝店铺图片，鼠标移动到宝贝图片上去会出现边框，同时图片会变大或缩小，请问这种效果怎么做，谢谢
必须开放完全自定义CSS，才能写代码实现。有两个途径：1.直接到装修市场买现成的模板。2.订购旺铺拓展版或拓展版以上版本，总之，是要花钱的参考技术A这些功能现在都是花钱去买的，比如在装修市场里买模板，那些用PHP做... 查看详情
利用css3实现鼠标悬停在图片上图片缓慢缩放的两种方法
1.改变background-size属性 将图片作为某个html元素的背景图片，用transition属性改变图片的大小。1.container{2background-size:100%100%;3transition:all2s;4}5.container:hover{6background-size:120%120%;7}这种方法有个问题是图片缩放的时候会出现抖动... 查看详情
css3实现图片的变大变小
主要是使用css3的animation，scale等于1是原图大小，大于1是把图片放大，小于1是把图片缩小。animation-delay用来延迟5秒触发这个动画<htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,ini 查看详情
qt编程中怎么让图片随着标签（label）的变大而变大
如题我先定义一个label然后label上放一张图片要求做成无边框的模式并且自定义最大化最小化关闭按钮做成无边框后发现最大化有问题最大化图片没有被拉伸到全屏图片只是靠上居中估计是label被拉伸了图片没被拉伸请问怎么让图... 查看详情
css实现鼠标悬停在图片上图片缓慢缩放效果
方法一：.container{ background-size:100%100%; transition:all2s;}.container:hover{ background-size:120%120%;} 方法二：img{ transition:all2s;}img:hover{ transform:scale(1.2); //图片放大的倍 查看详情
求一个js效果页面里可显示多张图片，当鼠标经过哪张图片，那张图片就变大，其余的图片自动缩小
分数太少，我只能讲一下思路如果你有用jquery，可以$('img').live('mouseover',function()$(this).css('width',150);$(this).css('height',150););$('img').live('mouseout',function()$(this).css('width',50);$(this).css('height'... 查看详情
css3翻转图片问题
...kit-transform:rotateY(180deg);</style>代码在这，现在可以实现图片翻转效果，想问一下加什么代码可以实现翻转过去是另一张图片，也就是说翻转90度以后第一张图片应该是消失的，然后另一张图片继续展开到结束其实这个效果... 查看详情
谁知道如何将上传到博客里的图片变大？
我要在博客里上传图片但图片实际大小并不是原图片大小与实际相查很远很小谁知道这是怎么回事?先谢谢了不是博客的事情别人的图片可以放大参考技术A那是BLOG的事。不关你的事。问我们没用的。 查看详情
为啥图片经过美图秀秀修改以后就变大了？我的图片上上水印之后就超过1m了
这个和图片文件有关，一般JPG\\GEPG格式的大小没有太大变化，但png,bmp格式的就有所变化，你在美图秀秀上处理完图片后，点击另存为，选择格式时要注意哦参考技术A变大了，你再把它改小不就行喽！ 参考技术B肯定会变大的，... 查看详情
css3实现小米商城鼠标移动图片上浮阴影效果
今天在编程爱好者编码库看见一个好玩的程序，代码如下。<!DOCTYPEhtml><html><head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,init 查看详情
css-transition和transform实现图片悬浮移动动画
...浮到图片上给图片增加一个类，这个类的样式使用animation实现动画效果。表面上是实现了，然后实际情况是，滚动页面时有些卡，应该是滚动时鼠标经过N个图片，大量的DOM操作严重消耗性能，所以还是采用了伪类hover，给hover应... 查看详情
winform中当鼠标移到一个图片上怎样能使图片放大??
...于放大镜效果，你可以在图片所在控件（如pictureBox）的鼠标进入事件里编写代码show出一个窗体，窗体无边框上边只有一个图片容器（假如还是pictureBox，PS：设置dock为Fill，图片的显示模式忘了是哪个了，好像是zoom，反正就是拉... 查看详情
js实现图片的淡入淡出
思想：其实是运动的一种，就是当鼠标移入div中时，将div的透明度变大，当鼠标移动出来的时候透明度变回原来。你可以尝试写一下，不会再看看代码<style>#div1{width:200px;height:200px;background:red;filter:alpha(opacity:30);opacity:0.3;margin... 查看详情
利用jquer+css简单实现购物网站的图片增大。
...者观察，接下来我将用jQuery+css技术对其功能进行一简单实现。第一步：创建项目，并且在webapp下建立如下文件夹。第二步：代码编译:HTML+CSS:<!DOCTYPEhtml><html><head><metacharset="UTF-8"> 查看详情
鼠标移动过去变大变绿
原始代码 <html><head><metacharset="utf-8"><metaname="generator"content="HTMLTidyforHTML5(experimental)forWindowshttps://github.com/w3c/tidy-html5/tree/c63cc39"/><title>鼠 查看详情
怎么样把网页字体变大
...开网页字体变大怎么办使网页字体变小的方法：方法一：鼠标左键点在网页空白处然后同时按下“ctrl”键与“-”键，可以使网页中的字体变小（变大是ctrl+加号键）方法二：按住ctrl键的同时，向下滚动鼠标（向上是变大）。这... 查看详情