当前位置:首页 > 热门标签 > 放大镜

放大镜

本标签包含:1篇文章

本专题中精选放大镜相关文档、视频、软件、源码等资源以及技术教程文章,更多相关内容陆续增加,建议收藏本栏目,本站整理包含放大镜的内容共计1个,剩余915个等待更新。

放大镜 笔记精选
网友NO.146696

JavaScript实现图片放大镜效果

本文实例为大家分享了js实现图片放大镜效果的具体代码,供大家参考,具体内容如下 1、结构布局HTML代码 div class="leftcon" id="left" img src="~/Content/images/风景-1.jpg" / div class="slide_box" id="box"/div/divdiv class="rightcon" id="right" img src="~/Content/images/风景-1.jpg" //div 2、修饰结构css样式代码 img {display: block;}.leftcon {width: 350px;height: 350px;margin: 100px 20px 0px 312px;float: left;position: relative;box-shadow: 3px 3px 10px 0 #111111; /*给图片施加阴影效果 */-webkit-box-shadow: 3px 3px 10px 0 #111111; /*兼容性处理*/-moz-box-shadow: 3px 3px 10px 0 #111111;}.leftcon img {width: 100%;height: 100%;}.leftcon .slide_box {display: none; /*将小方块盒子隐藏*/position: absolute;top: 0;left: 0;width: 175px;height: 175px;background: #000;opacity: 0.3;cursor: move; /*改变鼠标的形状*/}.rightcon {display: none; /*将右边div隐藏*/width: 350px;height: 350px;margin-top: 100px;float: left;overflow:……

网友NO.749578

纯js仿淘宝京东商品放大镜功能

效果图: 代码如下: htmlheadmeta http-equiv="Content-Type" content="text/html; charset=utf-8" / title无标题/title style *{ margin: 0px; padding: 0px; } .imgContent{ width: 420px; height: 300px; position: relative; margin-left: 50px; margin-top: 50px; } .imgContentimg{ width: 420px; height: 300px; } /style/headbody div class="imgcontent" id="imgContent1" img src="https://timgsa.baidu.com/timg?imagesize=b9999_10000di=e3c2b2a5c847d6051d8daaec9a9a2131src=http%3A%2F%2F2a.zol-img.com.cn%2Fproduct%2F174_1200x900%2F888%2FceeY9tJ1QRFLk.jpg" alt="iphone7" /div/bodyscript /*大致功能的思路:(完全按照自己的想法去实现的功能,肯定有很多地方优化,希望大家一起讨论) 1、有一个放原始图片的盒子 2、当鼠标移入这个盒子,在右侧创建一个相同大小的镜像盒子,镜像盒子里创建一个放大4倍的镜像图片,同时也在原始盒子里创建一个放大镜(若存在就display:block,若不存在就创建,镜像盒子……

网友NO.858636

Jquery实现图片放大镜效果的思路及代码(自写)

网上一大堆限制多,文档也难看懂,而且麻烦~自己写了个。大笑 算法: 第一步: 放大图片的位置=鼠标所在的容器的宽或者高除以容器自身的高度和宽度,求出鼠标在容器中移动的百分比 第二部: 得到百分比之后 x=-(x百分比*图片的宽度-显示容器的宽度/2); y=-(y百分比*图片的高度-显示容器的高度/2); 两个参数,x和y,就是大图的位置了,后面加了个显示容器的大小/2 是为了保证图片显示在中间。 效果图: 代码: !DOCTYPE HTML html head title商品信息/title /head style html,body,img,a,div{ margin: 0px; padding: 0px; border: 0px; font: 12px/150% Arial,Verdana,"宋体"; color: rgb(102, 102, 102); } div:after { clear: both; content: '.'; height:0; visibility: hidden; diplay: block; } div { zoom: 1; } .main-body{ text-align: center; padding: 15px; } .head-box{ height: 400px; border: #CCC 1px solid; } .head-box-left{ width: 300px; height: 390px; /*border: #C……

网友NO.267321

Javascript仿京东放大镜的效果

随便找一个图片吧。小伙伴们,想怎么玩就怎么玩(注意路径),亲自测试,绝对没问题。 话不多说,请看代码: htmlheadmeta charset="utf-8"style type="text/css"body,div{margin: 0; padding: 0;}#zhuti{ margin:50px;position: relative;}#small{width: 300px;height: 187px;border: 1px solid #000;}#big{border: 1px solid #666;overflow: hidden;width: 300px;height: 187px;position: absolute;left: 310px;top: 0px;display: none; /*默认隐藏*/}#jingtou{width: 50px;height: 50px;background: #666;opacity: 0.4;position: absolute;display: none; /*默认隐藏*/}#bigimg{position: absolute;}/style/headbodydiv id="zhuti"div id="small"div id="jingtou"/divimg src="img/ktm_small.jpg"/divdiv id="big"img src="img/ktm_big.jpg" id="bigimg"/div/divscript type="text/JavaScript"//封装一个函数(id形式参数)function $(id) {return document.getElementById(id);}var small =$('small');var big =$('big');var jingtou =$('jingtou');var zhuti =$('zhuti');var bigimg =$('bigimg');//监……

网友NO.618108

js图片放大镜效果实现方法详解

由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记... 效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -。-): 实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例): css: /* 图片容器 */ .imgBox{ width: 200px; /* 各位大老爷们看着办 */ height: 200px; /* 各位大老爷们看着办 */ position: relative; /* 必需 */ } /* 图片标签 */ .mainImg{ width: 100%; /* 各位大老爷们看着办,尽量100%好看些[斜眼笑] */ height: 100%; /* 各位大老爷们看着办,尽量100%好看些[斜眼笑] */ } /* 遮罩层-既放大区域 */ .glass{ position: absolute; /* 必需 */ width: 50px; /* 遮罩层宽度 此处是放大4倍,所以为200/4=50 */ height: 50px; /* 遮罩层高度 此处是放大4倍,所以为200/4=50 */ top: -9999px; /* 绝对位置,先放远些 */ left: -9999px; /* 绝对位置,先放远些 */ cursor: m……

网友NO.993152

JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】

本文实例讲述了JavaScript实现多张图片放大镜效果。分享给大家供大家参考,具体如下: 效果如下:可以展示图片列表的放大镜效果,图片尺寸没有要求会自动调整至水平垂直居中效果 代码如下,除了图片要替换一下,其它的可直接运行查看效果,enlarge是图片要放大查看的倍数,注意:.bigBox的宽高与.tool的宽高比值要与enlarge保持一致,比如本例中这个比值是4 !doctype htmlhtmlhead meta charset="UTF-8" titleDocument/title script function fontAuto() { document.documentElement.style.fontSize = document.documentElement.clientWidth / 19.2 + 'px'; } fontAuto(); window.onresize = function () { fontAuto(); } /script style type="text/css" * { margin: 0; padding: 0; } /*图片放大镜*/ .result-list li { float: left; width: 3rem; margin: 0.15rem; border: 1px solid #ddd; padding: 0.08rem; border-radius: 0.05rem; list-style-type: none; } .result-list li:hover { box-shadow: 0 0 10px ……

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com