JavaScript 图片放大看！- 放大镜效果 -鼠标放在图片上某个点：出现放大效果的图片





1张图片-放大镜:

缺点：1张图片若为小图，小图放大后图像不清晰（若为大图，则不存在这个问题）



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 1张图片 放大镜:</title>
    <style>
        /*    reset  css  样式重置 */
        body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,select,textarea,input{
            margin: 0;
            padding: 0;
        }
        body{font-size:16px;}
        table{border-collapse: collapse;}
        select,textarea,input{outline:none;  border: none; background:#fff;  }
        textarea{ resize: none; overflow: auto}
        a{  text-decoration: none;}
        li{ list-style: none; vertical-align: top}
        img{ border:none; vertical-align: top}
        /*  end  reset  css     */
        .wrap{
            position: relative;
            height: 400px;  width: 850px; margin:100px  0  0  400px   ;
            background: #ccc;
        }
        .wrap .smallImg,  .wrap .bigImg{
            position: absolute;
            top: 0;
            width: 400px;   height: 400px;   outline: 2px solid red;
            overflow: hidden;
        }
        .wrap .smallImg{
            left: 0;}
        .wrap .bigImg{
            left: 450px;
            display: none;
         }
        .wrap .bigImg img{
            position: absolute;
            left: 0;
            top: 0;
        }
        #shadow{
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100px;
            height: 100px;background: rgba(0,0,255,0.5)}

    </style>

    <script>
        window.onload = function(){

            var wrap    = document.getElementsByClassName("wrap")[0];
            var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
            var smallImg = smallImgBox.getElementsByTagName("img")[0];
            var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
            var bigImg = bigImgBox.getElementsByTagName("img")[0];
            var shadow = document.getElementById("shadow")

            smallImgBox.onmouseover = function () {
                shadow.style.display="block";
                bigImgBox.style.display="block";
            };
             smallImgBox.onmouseout = function () {
                 shadow.style.display="none";
                 bigImgBox.style.display="none";
             }

            smallImgBox.onmousemove = function (ev) {
                var ev = ev || window.event ;
                var x =  ev.clientX  -   smallImgBox.offsetLeft - wrap.offsetLeft   ;
                var y = ev.clientY  -    smallImgBox.offsetTop  -wrap.offsetTop;

                var l = x-shadow.offsetWidth/2 ;
                var t = y -shadow.offsetHeight/2 ;

                if( l <=0 ) { l=0; }
                else if(  l >=smallImgBox.offsetWidth - shadow.offsetWidth ){
                    l = smallImgBox.offsetWidth - shadow.offsetWidth ;
                }
                if(  t <=0 ){  t=0; }
                else if(  t>=smallImgBox.offsetHeight - shadow.offsetHeight )  {
                    t=   smallImgBox.offsetHeight - shadow.offsetHeight;
                }
                shadow.style.left= l +"px";
                shadow.style.top= t +"px";

               var  radioX = l /   (smallImgBox.offsetWidth - shadow.offsetWidth);
                var  radioY = t /  (smallImgBox.offsetHeight - shadow.offsetHeight) ;
                document.title =radioX+" "+ radioY ;
                bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
                bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";

/*               var  radioX = x /  (smallImgBox.offsetWidth - shadow.offsetWidth)  >=1? 1 : x /   (smallImgBox.offsetWidth - shadow.offsetWidth) ;
                var  radioY = y /  (smallImgBox.offsetHeight - shadow.offsetHeight) >=1? 1 :  y /  (smallImgBox.offsetHeight - shadow.offsetHeight);
                document.title =radioX+" "+ radioY ;
                bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
                bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";*/

            };
        };
    </script>

</head>
<body>
<div class="wrap">
    <div class="smallImg imgBox">
        <img src="images/bimg.jpg" width="400" alt="chothes"/>
        <div id="shadow"> </div>
    </div>
    <div class="bigImg imgBox">
        <img src="images/bimg.jpg" width="800" alt="chothes"/>
    </div>
</div>
</body>
</html>



　　


2张图片-放大镜

缺点：素材需要一张小图，一张大图共计两张图



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 2张图片- 放大镜</title>
    <style>
        /*    reset  css  样式重置 */
        body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,select,textarea,input{
            margin: 0;
            padding: 0;
        }
        body{font-size:16px;}
        table{border-collapse: collapse;}
        select,textarea,input{outline:none;  border: none; background:#fff;  }
        textarea{ resize: none; overflow: auto}
        a{  text-decoration: none;}
        li{ list-style: none; vertical-align: top}
        img{ border:none; vertical-align: top}
        /*  end  reset  css     */
        .wrap{
            position: relative;
            height: 400px;  width: 850px; margin:100px  0  0  400px   ;
            background: #ccc;
        }
        .wrap .smallImg,  .wrap .bigImg{
            position: absolute;
            top: 0;
            width: 400px;   height: 400px;   outline: 2px solid red;
            overflow: hidden;
        }
        .wrap .smallImg{
            left: 0;}
        .wrap .bigImg{
            left: 450px;
            display: none;
        }
        .wrap .bigImg img{
            position: absolute;
            left: 0;
            top: 0;
        }
        #shadow{
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100px;
            height: 100px;background: rgba(0,0,255,0.5)}

    </style>

    <script>
        window.onload = function(){

            var wrap    = document.getElementsByClassName("wrap")[0];
            var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
            var smallImg = smallImgBox.getElementsByTagName("img")[0];
            var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
            var bigImg = bigImgBox.getElementsByTagName("img")[0];
            var shadow = document.getElementById("shadow")

            smallImgBox.onmouseover = function () {
                shadow.style.display="block";
                bigImgBox.style.display="block";
            };
            smallImgBox.onmouseout = function () {
                shadow.style.display="none";
                bigImgBox.style.display="none";
            }

            smallImgBox.onmousemove = function (ev) {

                var ev = ev || window.event ;

                //鼠标在指定div里面的坐标:可视区里面鼠标坐标- div到文档边界的距离
              /*  var x =  ev.clientX  -   shadow.offsetParent.offsetLeft -shadow.offsetParent.offsetParent.offsetLeft   ;
                var y = ev.clientY  -    shadow.offsetParent.offsetTop  -shadow.offsetParent.offsetParent.offsetLeft;*/
                var x =  ev.clientX  -   smallImgBox.offsetLeft - wrap.offsetLeft   ;
                var y = ev.clientY  -    smallImgBox.offsetTop  -wrap.offsetTop;

                var l = x-shadow.offsetWidth/2 ;
                var t = y -shadow.offsetHeight/2 ;

                if( l <=0 ) { l=0; }
                else if(  l >=smallImgBox.offsetWidth - shadow.offsetWidth ){
                    l = smallImgBox.offsetWidth - shadow.offsetWidth ;
                }
                if(  t <=0 ){  t=0; }
                else if(  t>=smallImgBox.offsetHeight - shadow.offsetHeight )  {
                    t=smallImgBox.offsetHeight - shadow.offsetHeight;
                }
                shadow.style.left= l +"px";
                shadow.style.top= t +"px";

              /*  var  radioX = l /   (smallImgBox.offsetWidth - shadow.offsetWidth);
                var  radioY = t /  (smallImgBox.offsetHeight - shadow.offsetHeight) ;
                document.title =radioX+" "+ radioY ;
                bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
                bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";*/

                 var  radioX = x /  (smallImgBox.offsetWidth - shadow.offsetWidth)  >=1? 1 : x /   (smallImgBox.offsetWidth - shadow.offsetWidth) ;
                 var  radioY = y /  (smallImgBox.offsetHeight - shadow.offsetHeight) >=1? 1 :  y /  (smallImgBox.offsetHeight - shadow.offsetHeight);
                 document.title =radioX+" "+ radioY ;
                 bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
                 bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";

            };
        };
    </script>

</head>
<body>
<div class="wrap">
    <div class="smallImg imgBox">
        <img src="images/simg.jpg" width="400" alt="chothes"/>
        <div id="shadow"> </div>
    </div>
    <div class="bigImg imgBox">
        <img src="images/bimg.jpg" width="800" height="800" alt="chothes"/>
    </div>
</div>
</body>
</html>



　　


3 大图作为背景图片 - 放大镜缺点：需要知道背景图片数字大小不像前面两者能获取img样式宽高



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 2张图片- 放大镜</title>
    <style>
        /*    reset  css  样式重置 */
        body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,select,textarea,input{
            margin: 0;
            padding: 0;
        }
        body{font-size:16px;}
        table{border-collapse: collapse;}
        select,textarea,input{outline:none;  border: none; background:#fff;  }
        textarea{ resize: none; overflow: auto}
        a{  text-decoration: none;}
        li{ list-style: none; vertical-align: top}
        img{ border:none; vertical-align: top}
        /*  end  reset  css     */
        .wrap{
            position: relative;
            height: 400px;  width: 850px; margin:100px  0  0  400px   ;
            background: #ccc;
        }
        .wrap .smallImg,  .wrap .bigImg{
            position: absolute;
            top: 0;
            width: 400px;   height: 400px;   outline: 2px solid red;
            overflow: hidden;
        }
        .wrap .smallImg{
            left: 0;}
        .wrap .bigImg{
            left: 450px;
            display: none;
            background: url("images/bimg.jpg") no-repeat 0 0 ;
        }
        .wrap .bigImg img{
            position: absolute;
            left: 0;
            top: 0;
        }
        #shadow{
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100px;
            height: 100px;background: rgba(0,0,255,0.5)}

    </style>

    <script>
        window.onload = function(){

            var wrap    = document.getElementsByClassName("wrap")[0];
            var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
            var smallImg = smallImgBox.getElementsByTagName("img")[0];
            var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
            var bigImg = bigImgBox.getElementsByTagName("img")[0];
            var shadow = document.getElementById("shadow")

            smallImgBox.onmouseover = function () {
                shadow.style.display="block";
                bigImgBox.style.display="block";
            };
            smallImgBox.onmouseout = function () {
                shadow.style.display="none";
                bigImgBox.style.display="none";
            }

            smallImgBox.onmousemove = function (ev) {

                var ev = ev || window.event ;

                //鼠标在指定div里面的坐标:可视区里面鼠标坐标- div到文档边界的距离
              /*  var x =  ev.clientX  -   shadow.offsetParent.offsetLeft -shadow.offsetParent.offsetParent.offsetLeft   ;
                var y = ev.clientY  -    shadow.offsetParent.offsetTop  -shadow.offsetParent.offsetParent.offsetLeft;*/
                var x =  ev.clientX  -   smallImgBox.offsetLeft - wrap.offsetLeft   ;
                var y = ev.clientY  -    smallImgBox.offsetTop  -wrap.offsetTop;

                var l = x-shadow.offsetWidth/2 ;
                var t = y -shadow.offsetHeight/2 ;

                if( l <=0 ) { l=0; }
                else if(  l >=smallImgBox.offsetWidth - shadow.offsetWidth ){
                    l = smallImgBox.offsetWidth - shadow.offsetWidth ;
                }
                if(  t <=0 ){  t=0; }
                else if(  t>=smallImgBox.offsetHeight - shadow.offsetHeight )  {
                    t=smallImgBox.offsetHeight - shadow.offsetHeight;
                }
                shadow.style.left= l +"px";
                shadow.style.top= t +"px";

              /*
               var  radioX = x /  (smallImgBox.offsetWidth - shadow.offsetWidth)  >=1? 1 : x /   (smallImgBox.offsetWidth - shadow.offsetWidth) ;
               var  radioY = y /  (smallImgBox.offsetHeight - shadow.offsetHeight) >=1? 1 :  y /  (smallImgBox.offsetHeight - shadow.offsetHeight);
               document.title =radioX+" "+ radioY ;
               bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
               bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";
              */

                var  radioX = l /   (smallImgBox.offsetWidth - shadow.offsetWidth);
                var  radioY = t /  (smallImgBox.offsetHeight - shadow.offsetHeight) ;
                document.title =radioX+" "+ radioY ;

                /* 背景图片缺点：  这里需要知道背景图片具体大小-数字 800*800  */
                bigImgBox.style.backgroundPositionX=-radioX*( 800- bigImgBox.offsetWidth) +"px";
                bigImgBox.style.backgroundPositionY=-radioY*( 800- bigImgBox.offsetHeight) +"px";

            };
        };
    </script>

</head>
<body>
<div class="wrap">
    <div class="smallImg imgBox">
        <img src="images/simg.jpg" width="400" alt="chothes"/>
        <div id="shadow"> </div>
    </div>
    <div class="bigImg imgBox">
      <!--  <img src="images/bimg.jpg" width="800" height="800" alt="chothes"/>-->
    </div>
</div>
</body>
</html>



　　


				


				
时间： 2024-10-17 01:38:33 

		


		


	

	
	

		


		
JavaScript 图片放大看！- 放大镜效果 -鼠标放在图片上某个点：出现放大效果的图片的相关文章


								

		

			

                当鼠标放在按钮上时让指针变为手型
			

		

		

									

				首先添加样式: <style>.hand {cursor:hand}</style><body> <a class="hand" href="http://www.vbinfo.net">我的家园</a></body> 对应属性: cursor:hand 与 cursor:pointer 的区别 cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标			

		

	

				

		

			

                怎样可以实现鼠标放在网页上的文字时，不出现I形状的标记，并且不能选则文字
			

		

		

									

				css.让这部分区域的 cursor: default; 可以不显示I型的鼠标光标 不能选择文字.这个需求只能满足现代浏览器,老旧的IE8及以下的浏览器不能实现.以下上让某个div里的文字不能选中 1 2 3 4 5 6 div{     user-select: none;      -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select:none; }			

		

	

				

		

			

                鼠标放在菜单上下拉列表
			

		

		

									

				$(".wrap li").hover(function () { $(this).children("ul").slideToggle(); }); }); </script></head><body> <div class="wrap"> <ul> <li> <a href="#">一级菜单1</a> <ul> &l			

		

	

				

		

			

                Discuz升级！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）
			

		

		

									

				图片查看是网站中的常用功能,用于展示详细的图片.在discuz图片插件的基础上进行了改造,因此这篇文章主要从以下几个方面来讨论图片查看插件.希望可以帮助到大家,有不对的地方也欢迎大家给以正确的指导. (1)discuz的实现过程及效果 (2)discuz的局限性 (3)discuz的改进步骤 (4)兼容性及最后效果 (5)总结(常见问题) demo示例:http://zyk3.ataw.cn/discuz/index.html 一.discuz的实现过程及效果 点击图片,弹出层有大图,同时有在新			

		

	

				

		

			

                Bootstrap3基础 disabled 多选框 鼠标放在方框与文字上都出现禁止标识
			

		

		

									

				礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Firefox / Chrome   bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu			

		

	

				

		

			

                js鼠标控制图片的特效，滚轮控制放大、缩小、鼠标拖动、聚焦。。。
			

		

		

									

				项目需要做一个js控制图片的特效,滚轮控制放大.缩小.鼠标拖动等效果,网上找方法,各种报错.不兼容...最终自己研究出一套方案如下: 代码直接从项目中拷了,就不整理格式了 <script type="text/javascript"> //图片特效 by jifei_mei //图片大小,记录放大或缩小图片前的大小 var pic_size = { width:0, height:0 }; //绑定滚轮滚动事件 if (window.addEventListener) {			

		

	

				

		

			

                CSS如何实现当鼠标放在图片上时改变边框
			

		

		

									

				CSS如何实现当鼠标放在图片上时改变边框:建议:尽可能的手写代码,可以有效的提高学习效率和深度.很多网页都有这样的效果,当鼠标放在图片链接上的时候,图片的边框会发生变化.下面就简单介绍一下如何实现此种效果.实例代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww			

		

	

				

		

			

                鼠标移动链接上，滑动展开/隐藏图片效果
			

		

		

									

				<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ			

		

	

				

		

			

                WPF技术触屏上的应用系列（五）: 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果
			

		

		

									

				原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体机.要求有很炫的展示效果,要有一定的视觉冲击力,可触控操作.当然满足客户的要求也可以有其它途径.但鉴于咱是搞 .NET技术的,首先其冲想到的微软WPF方面,之前对WPF的了解与学习也只是停留在比较浅的层面,没有进一步深入学习与应用.所以在项目接来以后,也就赶鸭子上架了,经过努力