精华内容
下载资源
问答
  • 鼠标移入图片放大

    千次阅读 2019-08-12 14:19:08
    定义好样式class 使用一个块元素(例如div),添加class scale-img到其中,包裹着img .scale-img{overflow: hidden;...当你想实现图片img鼠标移入放大,直接在img的父亲dom的class加上scale-img即可

    定义好样式class

    使用一个块元素(例如div),添加class scale-img到其中,包裹着img

    .scale-img{overflow: hidden;}
    .scale-img img{
        width: 100%;
        height: 100%;
        -webkit-object-fit: cover;
        object-fit: cover;    
        transition: .5s all linear;
        -ms-transition: .5s all linear; /* IE 9 */
        -moz-transition: .5s all linear; /* Firefox */
        -webkit-transition: .5s all linear; /* Safari 和 Chrome */
        -o-transition: .5s all linear; /* Opera */
    }
    .scale-img:hover img{
        transform: scale3d(1.1,1.1,1.1);
        -ms-transform: scale3d(1.1,1.1,1.1);
        -moz-transform: scale3d(1.1,1.1,1.1);
        -webkit-transform: scale3d(1.1,1.1,1.1);
        -o-transform: scale3d(1.1,1.1,1.1);
    }
    

    当你想实现图片img鼠标移入放大,直接在img的父亲dom的class加上scale-img即可

    展开全文
  • 功能和下面链接里的最新文章里的一样!直接放大我会,但是有个动画效果(慢慢放大不会) <p>axure.com.cn</p>  </p>
  • JavaScript实现鼠标移入图片放大效果,JavaScript实现鼠标移入图片放大效果,好东西大家共享
  • 纯css鼠标移入图片放大

    千次阅读 2018-06-07 18:01:07
    html&lt;div class="big_ewrp"&gt; &lt;div class="image_box"&gt; &lt;img src="http://assets.jq22.com/plugin/2018-06-07-01-19-03.png"...style

    图示:


    html

    <div class="big_ewrp">
    		<div class="image_box">
    			<img src="http://assets.jq22.com/plugin/2018-06-07-01-19-03.png" />
    		</div>
    	</div>


    css

    <style>
    		.big_ewrp{
    			width: 265px;
    			height: 325px;
    			background:#F4F4F4;
    			border-radius: 5px;
    			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    			overflow: hidden;
    			margin: 50px auto;
    			
    		}
    		.image_box{
    			width: 100%;
    			height: 195px;
    			background: black;
    			transition: all 1s;
    			position: relative;
    		}
    		.image_box::after{
    			content: '';
    			width: 265px;
    			height: 195px;
    			display: block;
    			background: black;
    			position: absolute;
    			opacity: 0;
    			top: 0;
    			left: 0;
    			transition: all 1s ;
    
    		}
    		
    	     img{
    			display: block;
    			width: 100%;
    			height: 100%;
    			transition: all 1s ;
    		}
    		.big_ewrp:hover img{
    			transform: scale(1.05, 1.05)
    		}
    		.big_ewrp:hover .image_box::after{
    			opacity: 0.5;
    			transform: scale(1.05, 1.05)
    		}
    	</style>

    展开全文
  • JS知识点:鼠标移入图片放大

    千次阅读 2019-09-19 14:19:28
     鼠标移入图片放大监听: function imgZoomEvent(){ // 鼠标移入图片放大监听 $("img[oper=zoom]").hover(function() { $("#titleInfoModal").append("$(this).attr("src") + "' id='pic1'>"); $("img...

      页面内容:

    <img class="img" oper="zoom" src="test1.png"/>
    <img class="img" oper="zoom" src="test2.png"/>
    <img class="img" oper="zoom" src="test3.png"/>
    <img class="img" oper="zoom" src="test4.png"/>

       鼠标移入图片放大监听:

    function imgZoomEvent(){
    	// 鼠标移入图片放大监听
    	$("img[oper=zoom]").hover(function() {
    		$("#titleInfoModal").append("<img src='" + $(this).attr("src") + "' id='pic1'>");
    		$("img[oper=zoom]").mousemove(function(e) {
    			var modalHeight = $("#titleInfoModal").height();
    			var imgHeight = $("#pic1").height();
    			var imgTop = e.pageY - imgHeight;
    			if(imgTop < 0){
    				imgTop = imgTop + 200
    			}else if(imgTop < 170){
    				imgTop = imgTop + 100;
    			}
    			$("#pic1").css({
    				"max-width":"600px",
    				"position":"absolute",
    				"top": imgTop + "px",
    				"left": (e.pageX + 30) + "px"
    			}).fadeIn("fast");
    		});
    	}, function() {
    		$("#pic1").remove();
    	});
    }

     

    展开全文
  • css实现鼠标移入图片放大

    放大的过程是有动画过渡的,过渡的时间可以自定义。
    CSS3的transform:scale( )可以实现按比例放大或者缩小的效果。
    代码如下:
    HTML:

    <a class="newsList_pic" href="news-details.html">
    	<img class="" src="img/proList-1.png" alt="" />
    </a>
    

    CSS:

    .newsList_pic{
    	display: block;
    	width: 100%;
    	height: 240px;
    	overflow: hidden;
    	text-align: center;
    }
    .newsList_pic img{
    	width: auto;
    	max-height: 100%;
    	transition: all 0.3s;
    }
    .newsList_pic img:hover{
    	transform: scale(1.1);
    }
    

    其中:
    transition: all 0.3s;——>表示所有的属性变化在0.3s的时间段内完成(设置动画的执行时间,即图片放大到1.1倍所需的时间)
    transform: scale(1.1);——>设置图片按比例放大的倍数,我设置的是1.1倍,可以自定义设置

    如有错误或不足,欢迎各位大佬评论指正。

    展开全文
  • 使用原生js编写一个鼠标移入图片放大效果目标先看看效果是不是你想要的,再看代码htmljavascript 目标 给图片添加鼠标移动方法效果 先看看效果是不是你想要的,再看代码 移入前 移入后 html &amp;amp;lt;!-- ...
  • vue鼠标悬停图片放大特效是一款基于vue.js跟css3制作的相册图片悬停弹出3d放大展示代码。
  • css3实现鼠标移入图片放大效果

    千次阅读 2017-10-20 14:53:00
    1、首先知道DIV和IMG的层次关系,IMG是在某DIV里面,图片放大后不应该超出DIV的盒子。 2、设置DIV的  overflow: hidden;  属性,作用是图片变大后超过DIV区域的部分会自动隐藏。 3、设置  transition: ...
  • 今天纠结了好一阵,为什么我放在ul...效果展示,鼠标到的位置图片,指定的图片放大尤其要主意其中的a,img 标签的display属性要记得设置哦!&lt;!DOCTYPE html&gt; &lt;html lang="en"&...
  • 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;... a{text-decorati...
  • 图片样式: img { width: 150px; height: 150px; transition: all .3s ease-in 0s; }
  • 废话不多说直接上代码,如下: css代码: .tc>div>ul>li>img{ display: inline-block; vertical-align: top; width: 295px; height: auto; margin: 0 20px 18px 0; background: white;... box-s...
  • 鼠标经过图片放大

    2017-07-30 11:39:43
    放大
  • 鼠标移入图片,部分区域放大

    千次阅读 2019-08-03 22:43:58
    //鼠标移出小盒子,隐藏小盒子和放大镜 smallBox . onmouseout = function ( ) { bigBox . style . display = 'none' ; glass . style . display = 'none' ; } smallBox . ...
  • vue鼠标悬停图片风琴特效开篇下载链接那有什么东西都是可以照搬的 当然得有自己改的地方 开篇 日常切图搬砖中,不仅仅完成psd设计稿的样式,还需要增添一些效果增强交互效果 代码是晚上下载的,那为什么还要发呢 还...
  • 鼠标滑过显示放大图片,自适应浏览器显示
  • transform:scale()可以实现按比例放大或者缩小功能。...css实现鼠标移入时的放大效果</title> <style type="text/css"> div{ width: 200px; height: 300px; margin:0 auto;
  • transform:scale()可以实现按比例放大或者缩小功能。 transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: ...css实现鼠标移入时的放大效果</title> <style type="text/css">
  • 鼠标未移入时 鼠标移入后     主要代码如下:     &lt;div &gt;  &lt;div class="div1"&gt;&lt;img src="img/2.jpg" class="pic"/&gt;&lt;/...
  • jquery etalage图片放大镜插件鼠标移到小图片放大预览...
  • 鼠标移到图片上慢慢放大图片的js代码(类似百度图片) 图片放大是基于原位置向四周放大 可以自己设置放大的倍数
  • jquery制作鼠标悬停图片放大镜特效(仿淘宝图片展示) 里面有两个例子,个人感觉第二个可能用起来方便点
  • title: 鼠标移上去图片放大 图片放大 html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...
  • NULL 博文链接:https://guangqiang.iteye.com/blog/1767257
  • <!doctype html> <html> <head> <meta charset="utf-8"> <title>多图展示</title> <style> ul,li{list-style:none;} img{border:none;... margin...
  • html: <div class="img-box"> <img class="img" src="./img/1.jpeg" alt=""> </div> style: .img-box{ width: 700px; height: 700px; overflow: hidden;... .img-box:hover .img{
  • Title transform:scale放大缩小 transition-timing-function 这个是过渡方法 要配合 transition-duration 过渡时间用
  • 1.先拉一个图片出来,接着点击右键,最下面会出现转化为动态面板,单击即可

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,675
精华内容 3,070
关键字:

鼠标移入图片放大