精华内容
下载资源
问答
  • 2019-01-18 11:55:00

    这个比较简单,

    在网站中上传一个图片,

    想实现当鼠标经过时图片放大:

    html:

    <div class="img_fd"><img src="tp.jpg"/></div>

    css:

    div.img_fd img:hover{
    
      -webkit-transform:scale(2,2);
    
      -moz-transform:scale(2,2);
    
      -transform:scale(2,2);
    
      z-index:9999;
    
      /*position:absolute;*/
    
    }

    注意一下:

    scale(2,2)为缩放转换

    可以修改scale(1.5,1.5)数字来达到效果

     

    转载于:https://www.cnblogs.com/chervehong/p/10286961.html

    更多相关内容
  • 鼠标经过图片放大

    2017-07-30 11:39:43
    放大
  • 在一些商城的商品展示页面里,经常有当鼠标放到图片上的时候,图片就会放大,当鼠标离开图片的时候,图片就恢复到原来的大小,这种效果就是给图片添加了onmouseover行为,详细制作过程请看中文!
  • 目的:将鼠标放在图片上,图片自动放大鼠标移开后图片大小复原。 实现过程: 方法一:通过hover来控制鼠标放到图片上时图片的大小,通过transition来控制变化的时间。 具体代码如下 <!DOCTYPE html> <...

    目的:将鼠标放在图片上,图片自动放大,鼠标移开后图片大小复原。
    实现过程:
    方法一:通过hover来控制鼠标放到图片上时图片的大小,通过transition来控制变化的时间。
    具体代码如下

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:200px;
    background:red;
    transition:width 2s;
    }
    
    div:hover
    {
    width:200px;
    }
    </style>
    </head>
    <body>
    <div></div>
    <p>把鼠标指针移动到红色的图片上就可以看到过渡效果。</p>
    </body>
    </html>
    
    

    我们可以看到红色方框在两秒内变宽一倍。
    方法二:使用transform:scale()的方法,在scale的括号中写出放大的倍数。
    图片放大是按照transition中的秒数,返回原来图片的大小也是按照秒数来复原。
    代码如下。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:200px;
    background:red;
    transition: 5s;
    margin: 100px;
    }
    
    div:hover
    {
    transform: scale(1.5);
    }
    </style>
    </head>
    <body>
    <div></div>
    <p>把鼠标指针移动到红色的图片上就可以看到过渡效果。</p>
    </body>
    </html>
    
    展开全文
  • 2. 刚开始的时候我并没有实现这个效果,遇到的问题就是 鼠标经过图片时,图片可以放大,但是图片会超出父盒子,不是在父盒子里面进行的放大,效果图如下: ​​​​​​​​​​​​​​​​​​​​​​​​​​​...

    1.首先我们先来看一下最终实现的效果:

     

    2. 刚开始的时候我并没有实现这个效果,遇到的问题就是 鼠标经过图片时,图片可以放大,但是图片会超出父盒子,不是在父盒子里面进行的放大,效果图如下:

                              ​​​​​​​

     3.这个问题如何解决呢,其实很简单 只需要在这个图片的父元素里添加 overflow:hidden;这个隐藏属性就ok了,这样当你图片发大时超出父盒子的部分会被隐藏掉,代码如下:

    <style>
            body {
                background-color: pink;
            }
    
            div {
                overflow: hidden;
                width: 180px;
                height: 130px;
                margin: 50px auto;
                border: 2px solid red;
            }
    
            img:hover {
                animation: move .5s linear forwards;
            }
    
            @keyframes move {
                0% {
                    transform: scale(1);
                }
    
                100% {
                    transform: scale(1.1);
                }
            }
        </style>
    </head>
    
    <body>
        <div>
            <img src="../image/picture.jpg" alt="" width="180px" height="130px">
        </div>
    </body>

     ⭐最后总结一下:实现鼠标经过图片 图片放大且不超出父盒子的解决方法就是: 在父元素里添加overflow:hidden属性。

    展开全文
  • 主要介绍了用HTML5实现鼠标滚轮事件放大缩小图片的功能,其中Safari浏览器用户要注意是否禁用了鼠标滚动控制页面滑动的功能,需要的朋友可以参考下
  • CSS3实现鼠标移入图片,图片放大缩小tc>div>ul>li>img{display: inline-block;vertical-align: top;width: 295px;height: auto;margin: 0 20px 18px 0;background: white;box-sizing: border-box;...

    CSS3实现鼠标移入图片,图片放大缩小

    tc>div>ul>li>img{

    display: inline-block;

    vertical-align: top;

    width: 295px;

    height: auto;

    margin: 0 20px 18px 0;

    background: white;

    box-sizing: border-box;

    transition: all .5s;

    -webkit-transition: all .5s; /* Safari */

    }

    .tc>div>ul>li>img:hover {

    cursor: pointer;

    transform: scale(1.1);

    -ms-transform:scale(1.1); /* IE 9 */

    -moz-transform:scale(1.1); /* Firefox */

    -webkit-transform:scale(1.1); /* Safari 和 Chrome */

    -o-transform:scale(1.1);

    }

    新起点博客
    • 1.jpg

    展开全文
  • 在网页上我们经常看到鼠标悬停在一个图片上,这张图片会慢慢的放大,感觉是像放大放大的效果,当鼠标移开的时候,图片有恢复原来的样子,今天就实现这种效果。实现原理以思路:1,首先这是一张图片在悬停时放大也...
  • 本案例由小码农前端导航提供,xmn-xdm.com CSS3鼠标悬停图片放大效果,hover效果!
  • 鼠标放上图片放大缩小(css3 html5) 鼠标放上图片放大缩小(css3 html5) 鼠标放上图片放大缩小(css3 html5) 鼠标放上图片放大缩小(css3 html5)
  • HTML+CSS实现鼠标滑过图片放大效果

    千次阅读 2020-09-02 22:03:48
    鼠标滑过图片块,图片放大,划出恢复大小。 效果图如下 HTML代码如下: <div class="box"> <ul> <li><img src="../images/photo01.jpg" alt=""></li> <li><img src=...
  • 原始状态: 鼠标经过: 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”...
  • 图片悬停放大效果: HTML5 代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3图片悬停放大动画</title> <...
  • 鼠标经过实现图片放大效果 效果描述: 用到的知识点: 鼠标经过图片放大: transform:意思是转换,指的是改变所在元素的外观,例如位移、旋转、缩放等,但是没有动画效果,所以可以搭配transition 使用. ...
  • jq/css鼠标经过图片放大效果

    万次阅读 2017-01-16 17:11:24
    <!doctype html> <html> img{display:block;} .box{width:200px;border:solid 2px gray;height:160px;overflow:hidden;} .box img{width:200px;height:160px;position:relative;} <script sr
  • CSS3鼠标经过图片旋转放大特效代码是一款采用CSS3结合图片实现的鼠标悬停到图标上面旋转放大展示效果。
  • 可以使图片变大,其实在一些网上购物平台上,我们可以看到,当鼠标放在商品上时,商品的图片可能会变大,或者变成商品的其他角度的图片,这其实就是中的特效了,那么网页制作-如何在制作鼠标经过图片放大效果大家...
  • 鼠标移入图片放大

    2016-06-24 12:11:04
    HTML,JS鼠标移入图片放大
  • jquery实现鼠标滑过图片向上放大显示效果,里面用有CSS3的部分属性,因此为了最佳效果,测试时候请使用火狐或Chrome浏览器。左右两边的圆形按钮可控制缩略图左右滚动,然后可以把鼠标放在任意的缩略图上,可看到缩略...
  • 分享给大家供大家参考,具体如下:今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下。方法一:使用js和css3效果如图:这样的实现非常简单,就是利用js的mouseover和 ...
  • jQuery鼠标经过图片局部放大,兼容IE8浏览器。
  • CSS3鼠标悬停图片放大效果,图片默认3行4列排列,鼠标经过图片突出显示。
  • 本文实例讲述了Jquery实现鼠标移动放大图片功能的方法。分享给大家供大家参考。具体分析如下: 做毕业设计,老师看完小样后,嫌弃我购物车里商品图片太大,不美观,让美化个效果。上网查查代码,修改了一个简单版的...
  • HTML5点击放大图片图片展示特效,鼠标放在图片上,会显示出文字描述,若点击图片,则在当前页无刷新放大图片显示,类似Lightbox图片显示效果。本代码中可以设置点击直接显示原图,如果移动至下面则IE浏览器报错,...
  • js代码 [removed] $(document).on("mousemove", function(event) { $(".hole").css({ "top": event.pageY, ... 这是一款CSS3实现的支持点击按住鼠标左键图片遮罩放大显示代码,挺不错的CSS3图片特效。
  • HTML5鼠标经过显示带阴影效果是一款采用网格布局,画廊中每一幅图片都带有炫酷的底部阴影效果。
  • html 鼠标悬停放大图片效果

    千次阅读 2019-10-10 14:00:12
    父节点加上 overflow: hidden; 子节点: .face-apply ul li div img:hover{ transform: scale(1.2); }
  • 这是一款css3鼠标悬停图片内部放大和阴影特效。该特效在鼠标悬停在图片上面的时候,图片已中心为原点进行放大,然后显示出遮罩层,并且图片周边会有阴影变化效果。
  • 一款简单的css3鼠标悬停图片放大展示代码,css3 transform属性制作鼠标悬停相册图片放大显示效果。
  • 鼠标经过放大图片

    2013-02-17 11:51:35
    鼠标经过图片放大图片 同时显示图片的代替文本alt属性值

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,049
精华内容 8,819
关键字:

html鼠标经过图片放大