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

    2016-06-24 12:11:04
    HTML,JS鼠标移入图片放大
  • JavaScript实现鼠标移入图片放大效果,JavaScript实现鼠标移入图片放大效果,好东西大家共享
  • 使用原生js编写一个鼠标移入图片放大效果目标先看看效果是不是你想要的,再看代码htmljavascript 目标 给图片添加鼠标移动方法效果 先看看效果是不是你想要的,再看代码 移入前 移入后 html <!-- ...

    使用原生js编写一个鼠标移入图片放大效果

    目标

    给图片添加鼠标移动放大方法效果,移到哪里放大哪里

    先看看效果是不是你想要的,再看代码

    移入前
    在这里插入图片描述
    移入后
    在这里插入图片描述

    html

    	<!-- css看着写 -->
    	<div class="Box" style="width:200px;height:200px;border:1px solid #f00;position: relative;top:0;left:0;overflow: hidden;">
    		<Img  src="../image/lingtai.jpg" alt="" style="width:200px;height:200px;position:absolute;left:0;top:0;">
    	</div>
    

    javascript

    	// 图片放大镜
    	// @params Class 目标class string
    	// @params Scale 放大倍数 number
    	function ScaleImg(Class, Scale){
    		
    		this.Box = document.querySelector(Class);
    	
    		this.Img = this.Box.querySelector('img');
    		
    		this.scale = Scale || 3 ;
    	
    		// 盒子中心点
    		this.BoxX = this.Box.offsetWidth / 2; 
    		this.BoxY = this.Box.offsetHeight / 2; 
    	
    		// 获取盒子初始定位
    		this.Left = parseFloat( this.Box.offsetLeft ); 
    		this.Top = parseFloat(this.Box.offsetTop ); 
    	
    		this.Init();
    	
    	}
    	
    	ScaleImg.prototype = {
    	
    		// 鼠标移入
    		Mouseover: function(e){
    			
    			var e = e || window.event;
    			
    			// 放大图片
    			this.Img.style.width = this.Img.offsetWidth * this.scale + "px"; 
    			this.Img.style.height = this.Img.offsetHeight * this.scale + "px";
    	
    			// 设置放大后的图片定位
    			this.Img.style.left = (this.Box.offsetWidth - this.Img.offsetWidth) / 2 + "px"; 
    			this.Img.style.top = (this.Box.offsetHeight - this.Img.offsetHeight) / 2 + "px"; 
    			
    			// 获取图片放大后定位值
    			this.ImgLeft = parseFloat(this.Img.style.left); 
    			this.ImgTop = parseFloat(this.Img.style.top); 
    	
    			this.Box.left = (this.Box.offsetWidth - this.Img.offsetWidth) / 2;
    			this.Box.top = (this.Box.offsetHeight - this.Img.offsetHeight) / 2;
    			
    			// 阻止默认事件
    			return ;
    	
    		},
    	
    		// 鼠标移除
    		Mouseout: function(e){
    	
    			var e = e || window.event;
    			
    			// 重置css
    			this.Img.style.width = this.Img.offsetWidth / this.scale + "px"; 
    			this.Img.style.height =this.Img.offsetHeight / this.scale + "px"; 
    	
    			this.Img.style.left = Math.floor((this.Box.offsetWidth - this.Img.offsetWidth) / 2) + "px"; 
    			this.Img.style.top = Math.floor((this.Box.offsetHeight - this.Img.offsetHeight) / 2) + "px";
    	
    			return  ;
    		},
    	
    		// 鼠标移动
    		Mousemove: function(e){
    	
    			var e = e || window.event;
    	
    			// 图片鼠标位置
    			var ImgXY = {"x": this.Left + this.BoxX, "y": this.Top + this.BoxY};
    	
    			// 获取偏移量 
    			var left = (ImgXY.x - e.clientX ) / this.BoxX * this.ImgLeft ,
    				top = (ImgXY.y - e.clientY) / this.BoxY * this.ImgTop ;
    			
    			this.Img.style.left = Math.floor(this.Box.left - left) + "px";
    			this.Img.style.top = Math.floor(this.Box.top - top) + "px";
    	
    			return ;
    		},
    	
    		// 初始化
    		Init: function(e){
    	
    			var that = this;
    	
    			this.Box.onmouseover = function(e){
    				that.Mouseover(e);
    			}
    			this.Box.onmouseout = function(e){
    				that.Mouseout(e);
    			}
    			this.Box.onmousemove = function(e){
    				that.Mousemove(e);
    			}
    	
    		}
    	}
    	
    	// 实例一个对象
    	new ScaleImg('.Box');		
    

    完了

    展开全文
  • title: 鼠标移上去图片放大 图片放大 html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...

    tags: html
    title: 鼠标移上去图片放大


    图片放大

    html文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>鼠标移上去图片放大</title>
        <link rel="stylesheet" href="css/style.css"/>
    </head>
    <body>
        <div id="image"></div>
        <script src="js/01.js"></script>
    </body>
    </html>
    
    /*
    content: 鼠标移上去放大样式表
    author: weiWei
    time: 2021/03/14 13:54
    class: imation
    */
    
    
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    #image{
        width: 300px;
        height: 300px;
        background-color: #000;
        background-image: url(../img/dog.jpg);
        background-size: 300px;
        background-repeat: no-repeat;
    }
    
    #image[index]{
        background-size: 900px 900px;
        background-position: calc(var(--x)*100%) calc(var(--y)*100%);
    }
    
    /*
    content: 鼠标移上去放大脚本
    author: weiWei
    time: 2021/03/14 13:54
    class: imation
    */
    
    //电脑版鼠标移动事件
    document.querySelector('#image').addEventListener('mouseenter', enterImage);//进入图片触发mouseenter
    
    document.querySelector('#image').addEventListener('mousemove', moveImage);//鼠标在图片游动上触发mousemove
    
    document.querySelector('#image').addEventListener('mouseleave', leaveImage);//离开图片触发mouseenter
    
    //手机触摸事件
    document.querySelector('#image').addEventListener('touchstart', enterImage);//触摸进入图片触发
    
    document.querySelector('#image').addEventListener('touchmove', moveImage);//在图片上触摸滑动触发
    
    document.querySelector('#image').addEventListener('touchend', leaveImage);//离开图片触发
    
    
    //进入图片的函数
    function enterImage(e) {
        e.target.setAttribute('index', 1);
        moveImage(e);
    }
    /*
        touch事件的event没有offsetX和offsetY
    */
    //鼠标在图片上面移动
    function moveImage(e) {
        let rect = e.target.getBoundingClientRect();
    
        //自己定义offsetX和offsetY
        let offsetX , offsetY ;
        if(['touchstart', 'touchmove', 'touchend'].includes(e.type)){
            offsetX = e.touches[0].pageX - rect.left;
            offsetY = e.touches[0].pageY - rect.top; 
            e.preventDefault()
        }else{
            offsetX = e.offsetX;
            offsetY = e.offsetY;
        }
    
        let x = offsetX / rect.width;  //获取图片在X轴的位移
        let y = offsetY / rect.height;  //获取图片在Y轴的位移
    
        e.target.style.setProperty('--x', x);
        e.target.style.setProperty('--y', y);
    }
    
    //鼠标在离开图片以后
    function leaveImage(e) {
        e.target.removeAttribute('index',1);
        moveImage(e);
    }
    
    

    心得

    • css变量

      # 解释
       - CSS 变量是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名,并使用特定的 var() 来访问。(比如  color: var(--main-color);)。
      # 解决问题
       在构建大型站点的时候,面对很多的重复使用信息,可以设定变量,重复使用
       CSS变量为我们带来一些预处理器的便利,并且不需要额外的编译。
      
      并使用特定的 var() 来访问。(比如  color: var(--main-color);)。
      
    • 鼠标事件

      mouseenter: 鼠标进入

      mousemove: 鼠标移动

      mouseleave: 鼠标离开

      addEventListener(‘event’,‘function’,useCapture)

       方法用于向指定元素添加事件句柄。
      

      参数:
      event: 必须。字符串,指定事件名。
      function: 指定要触发的函数名称
      useCapture: 可有可无,放置布尔值
      可能值:
      true - 事件句柄在捕获阶段执行
      false- 默认。事件句柄在冒泡阶段执行

      注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。

    • 形式参数e

      这里的e是参数的名字。参数分为:
      1.形参:形式参数,相当于函数声明的局部变量,实参把自己的值赋给形参,形参就保存了这个值
      2.形参只能在函数内部使用。

    • 移动端 touch事件
      Touch
      Touch对象代表一个触点,可以通过 event.touches[0]获取,每个触点包含位置,大小,形状,压力大小,和目标 element属性。

    展开全文
  • 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();
    	});
    }

     

    展开全文
  • 今天纠结了好一阵,为什么我放在ul...效果展示,鼠标到的位置图片,指定的图片放大尤其要主意其中的a,img 标签的display属性要记得设置哦!&lt;!DOCTYPE html&gt; &lt;html lang="en"&...

    今天纠结了好一阵,为什么我放在ul下面的图片会高度有所不同,这里面的难点display的使用方式了,深刻理解display显得狠重要了,从事前端开发已经有半年了。现在又在研究后台,前台的东西还得好好巩固一下啦!

    效果展示,鼠标到的位置图片,指定的图片放大


    尤其要主意其中的a,img 标签的display属性要记得设置哦!

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>图片提示信息</title>
        <script  type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
       
    	<style type="text/css" >
    	ul{
    		width: 980px;
    		margin: 30px auto;
    		box-sizing: border-box;
    	}
    	ul li{
    		list-style: none;
    		display: inline-block;
    		width: 300px;
            height: 300px;
            box-sizing: border-box;
            line-height: 300px;
            box-shadow: 1px 2px 5px rgba(0,0,0,.3) ;
    	}
             .tooltip{
             	display: block;
             	width: 300px;
                height: 300px;
                box-sizing: border-box;
             }	
             .tooltip img{
             	width: 100%;
             	display: block;
             	cursor: pointer;
             }	
              #tooltip{
              	position: absolute;
              	display: none;
                width:600px;
                height: 600px;
              }
               #tooltip img{
               	width: 100%;
               }
                #tooltip p{
                	height: 50px;
                	color: #fff;
                	font-size: 16px;
                	background-color: #000;
                	padding:0 0 0  20px;
                }
    	</style>
    </head>
    <body>
    	<ul>
    		<li><a href="img/312322.jpg" title="水果图片集" class="tooltip"><img src="img/312322.jpg" alt="水果"></a></li>
    		<li><a href="img/342354543.jpg" title="柿子" class="tooltip"><img src="img/342354543.jpg" alt="水果"></a></li>
    		<li><a href="img/8943823050.jpg" title="西红柿" class="tooltip"><img src="img/8943823050.jpg" alt="水果"></a></li>
    		<li><a href="img/74934954395.jpg" title="水果图片集" class="tooltip"><img src="img/74934954395.jpg" alt="水果"></a></li>
    		<li><a href="img/timg.jpg" title="水果图片集" class="tooltip"><img src="img/timg.jpg" alt="水果"></a></li>
    		<li><a href="img/timg.jpg" title="水果图片集" class="tooltip"><img src="img/timg.jpg" alt="水果"></a></li>
    	</ul>
    	<script type="text/javascript">
    		$(function(){
    	        var x = 10;
    	        var y = 20;
    	        $("a.tooltip").mouseover(function(e){
                      this.myTitle = this.title;
                      // console.log(this.myTitle);
                      this.title = " ";
                      var  imgTitle = this.myTitle? "<br>"+ this.myTitle:"";
                      var  tooltip = "<div id='tooltip'><img src=' " +this.href +"  'alt='产品预览图' />" + "<p>" +imgTitle +"</p></div>";
                      $('body').append(tooltip);
                      $('#tooltip').css({
                      	'top':(e.pageY+y)+'px',
                      	'left':(e.pageX+x)+'px'
                      }).show('fast');
    	        }).mouseout(function(){
    	        	this.title = this.myTitle;
    	        	$("#tooltip").remove();
    	        }).mousemove(function(e){
                    $('#tooltip').css({
                    	'top':(e.pageY+y)+'px',
                      	'left':(e.pageX+x)+'px'
                    });
                    console.log(e.pageX);
    	        });
    		})
    	</script>
    </body>
    </html>
    

    我的代码结构,希望能帮助到有疑惑的朋友们。


    展开全文
  • CSS仿艺龙首页鼠标移入图片放大,效果似乎没有js好。。。。。。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片放大</title> <style> ...
  • 功能和下面链接里的最新文章里的一样!直接放大我会,但是有个动画效果(慢慢放大不会) <p>axure.com.cn</p>  </p>
  • <script src="js/movement.js" type="text/javascript"> <script type="text/javascript"> window.onload = function(){ var oList = document.getElementById("list"); var aLi = oList.getElementsByTagName("li...
  • //移入显示大图 moveover = record => { var boximg = document.createElement(‘img’); boximg.style.width = ‘150px’; boximg.style.height = ‘150px’; boximg.style.position = ‘absolute’; boximg....
  • JS实现图片鼠标移放大,JS实现在复制图片功能,JS图片自动放大类,Javascriopt图片控制 考虑到程序的藕合度,可移植度,最好封装一个图片自动放大,点击复制JS类,对于所要操作放大的图象对象实现松藕合,即对WEB界面实现...
  • 鼠标移入放大图片,不影响文字

    千次阅读 2018-03-21 16:05:55
    鼠标移入图片放大,文字不变。鼠标移入图片的父元素让图片放大。html:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;...
  • #vueCSS实现鼠标移入图片放大效果以及缓慢过渡 需求:鼠标移入图片时,图片从中心向外面放大 使用到三行
  •  // 鼠标移入 暂停 自动轮播  carouselWrap  .mouseover(function () {  clearInterval(timer)  })  .mouseout(interval) // 鼠标移开 记录轮播  // 动画 主函数  function move(flag) {  if(!flag){  ...
  • 鼠标移入图片,部分区域放大

    千次阅读 2019-08-03 22:43:58
    原生JS方法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> *{ margin: 0; padding: 0; } .box{ ...
  • vue鼠标悬停图片风琴特效开篇下载链接那有什么东西都是可以照搬的 当然得有自己改的地方 开篇 日常切图搬砖中,不仅仅完成psd设计稿的样式,还需要增添一些效果增强交互效果 代码是晚上下载的,那为什么还要发呢 还...
  • 然后我换成 onmouseover = JavaScript:imgQuery(),结果第一次鼠标移图片上是正常的,就一张随着鼠标移动的图片,然后第二次就和onload一样的效果了。 最后我换成 onclick = JavaScript:imgQuery(),结果是鼠标...
  • 首先,看一下效果图: 页面加载的时候,图片是每隔1s进行一次切换的,当鼠标移入的时候图片放大,并且停止切换,当鼠标移出的时候,图片缩小为原大小,继续进行切换。关键代码:JS代码var myImage =...
  • <!DOCTYPE html> <... <head> ...meta charset="utf-8">...鼠标移入移出改变图片透明度</title> <style type="text/css"> #image { margin: 50px auto; width...
  • 1、scale(x,y) 对元素进行缩放,X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数 Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。 transform:scale(2,2.5);...
  • 比较适合产品图片列表页面的js特效,鼠标移上去时放大当前图片超出的小图片所占的位置时叠加在其他图片上,通过css的position: relative与z-index样式就可以方便的实现这个功能。在本实例中通过了一张透明圆角的png...
  • JS实现鼠标移入移出控制图片的切换效果

    万次阅读 热门讨论 2016-03-26 23:15:11
    背景 在看专业英语的时候,学习JS的Timer Event.... 页面加载的时候,图片是每隔1s进行一次切换的,当鼠标移入的时候图片放大,并且停止切换,当鼠标移出的时候,图片缩小为原大小,继续进行切换。 关键代
  •  <script type="text/javascript" src="script/jquery-1.8.3.min.js">    $(function () {  $("#clip>li").each(function () {  var $this = $(this).find("img");  var width = $this.width();  var height ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
  • function showbigimg(id,ishide){ if(ishide=='false'){ var x=-190; var y=-220; var imgOffset = $("#"+id).offset(); var divid = "d"+Math.floor(Math.random()*50); var tooltip = "<...
  • 摘要 腾兴网为您分享:CSS3实现鼠标移入移出时改变样式的效果,壹学车,小猿口算,网易uu,万步有约等软件知识,以及山西个税,自动伴奏软件,成都农商银行app,儿歌千千,抖音群控系统,qq领赞,2017英语全国卷1,卓...
  • 1.JavaScript的onmouseover和onmouseout &lt;!doctype html&gt; &lt;html&gt; &...鼠标移入移出&lt;/title&gt; &lt;style&gt; #d{ width:100px; heigh
  • .img-box{ width: 700px; height: 700px; overflow: hidden; } .img-box:hover .img{ transform:scale(1.3) } img{ width: 100%; height: 100%; transition:all .6s; }

空空如也

空空如也

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

js鼠标移入图片放大