html javascript css放大镜 [英] html javascript css Magnifying glass
本文介绍了html javascript css放大镜的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
$（document）.ready（function（）{var native_width = 0; var native_height = 0; //现在mousemove函数$ {//当用户在图像上悬停时，脚本将首先计算//原生维度（如果它们不存在），只有在原生维度可用后，脚本才会显示缩放版本if（！native_width &&&！native_height）{//这将创建一个与.small中的图像相同的新图像对象//我们无法直接从.small获取尺寸，因为html中指定的宽度为200px。要获得我们已经创建的这个图像对象的实际尺寸var image_object = new Image（）; image_object.src = $（。small）。attr（src）; //这段代码包装在。加载函数是重要的//如果在//加载图像之前访问对象的宽度和高度将返回0。 native_width = image_object.width; native_height = image_object.height; } else {//鼠标的x / y坐标//这是.magnify相对于文档的位置。 var magnify_offset = $（this）.offset（）; //我们将从相对于文档的鼠标位置中减去.magnify的位置，以获得相对于//container(.magnify）的鼠标位置var mx = e.pageX - magnify_offset.left; var my = e.pageY - magnify_offset.top; //最后，如果鼠标位于容器外，if（mx< $（this）.width（）&&& my< $（this）.height（）&& mx > 0&&& my> 0）{$（large）。fadeIn（100）; } else {$（。large）。fadeOut（100）; } if（$（。large）。is（：visible））{// .large的背景位置将根据鼠标在.small图像上的位置而改变。因此，我们将获得相对于图像的鼠标指针下的像素的比率，并使用该比率将大图像放置在放大镜内。var rx = Math.round（mx / $（small） .width（）* native_width - $（。large）。width（）/ 2）* - 1; var ry = Math.round（my / $（。small）。height（）* native_height - $（large）。height（）/ 2）* - 1; var bgp = rx +px+ ry +px; //用鼠标移动放大镜的时间var px = mx - $（。large）。width（）/ 2; var py = my - $（。large）。height（）/ 2; //现在玻璃随鼠标移动//逻辑是从//鼠标坐标中扣除玻璃的宽度和高度的一半，使它的中心位于鼠标的坐标//如果你现在悬停在图像上，应该看到放大镜在操作$（。large）。css（{left：px，top：py，backgroundPosition：bgp}）; }}}）}） * {margin：0; padding：0;}。magnify {width：200px; margin：50px auto; position：relative;} / *允许创建放大镜* /。large {width：175px; height：175px; position：absolute; border-radius：100％; / *多个box阴影实现玻璃效果* / box-shadow：0 0 0 7px rgba（255，255，255，0.85），0 0 7px 7px rgba（0，0，0，0.25），inset 0 0 40px 2px rgba（0，0，0，0.25）; / *让我们先加载大图片* / background：url（'http://thecodeplayer.com/uploads/media/iphone.jpg'）no-repeat; / *隐藏玻璃默认情况下* / display：none;} / *解决放大时边缘的重叠bug * /。small {display：block; }
<！ - 让一个简单的图像放大镜 - >< div class =magnify> < div>我要放大整页包括文字图片和所有内容< / div> <！ - 这是放大镜将包含原始/大版本 - > < div class =large>< / div> <！ - 这是小图片 - > < img class =smallsrc =http://thecodeplayer.com/uploads/media/iphone.jpgwidth =200/> < / div><！ - 让加载前缀prefixfree来处理CSS3供应商前缀 - >< script src =http://thecodeplayer.com/uploads/js/prefixfree.jstype =text / javascript>< / script><！ - 您可以从http://leaverou.github.com/prefixfree/ - ><！ - Time for jquery action - > script src =http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.jstype =text / javascript>< / script>
我想放大镜放大整个网页，不仅仅是图片。放大镜放大一切页面图象文本录影。
这里是jsfiddle ...
a href =http://jsfiddle.net/ckc5r7sp/ =nofollow> JsFiddle
解决方案
我使用任何物品完成你所需要的。它能够放大文本和图像。
这里是您可以了解更多关于它及其文档的地方
AnythingZoomer
HTML
< p>< strong>带有文字演示的图片< / strong>< / p&
< div id =zoom>
< div class =small>
< p> hello< / p>
< img src =http://thecodeplayer.com/uploads/media/iphone.jpg/>
< / div>
< div class =large>
< p> hello< / p>
< img src =http://thecodeplayer.com/uploads/media/iphone.jpg/>
< / div>
< / div>
CSS
/ *这是放大到一个圆的样式* /
.az-windowed {
overflow：hidden;
position：absolute;
border-radius：100％;
box-shadow：0 0 0 7px rgba（255，255，255，0.85），
0 0 7px 7px rgba（0，0，0，0.25），
inset 0 0 40px 2px rgba（0，0，0，0.25）;
}
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
//Now the mousemove function
$(".magnify").mousemove(function(e){
//When the user hovers on the image, the script will first calculate
//the native dimensions if they don't exist. Only after the native dimensions
//are available, the script will show the zoomed version.
if(!native_width && !native_height)
{
//This will create a new image object with the same image as that in .small
//We cannot directly get the dimensions from .small because of the
//width specified to 200px in the html. To get the actual dimensions we have
//created this image object.
var image_object = new Image();
image_object.src = $(".small").attr("src");
//This code is wrapped in the .load function which is important.
//width and height of the object would return 0 if accessed before
//the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
}
else
{
//x/y coordinates of the mouse
//This is the position of .magnify with respect to the document.
var magnify_offset = $(this).offset();
//We will deduct the positions of .magnify from the mouse positions with
//respect to the document to get the mouse positions with respect to the
//container(.magnify)
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
//Finally the code to fade out the glass if the mouse is outside the container
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))
{
//The background position of .large will be changed according to the position
//of the mouse over the .small image. So we will get the ratio of the pixel
//under the mouse pointer with respect to the image and use that to position the
//large image inside the magnifying glass
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
//Time to move the magnifying glass with the mouse
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
//Now the glass moves with the mouse
//The logic is to deduct half of the glass's width and height from the
//mouse coordinates to place it with its center at the mouse coordinates
//If you hover on the image now, you should see the magnifying glass in action
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
/*Some CSS*/
* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}
/*Lets create the magnifying glass*/
.large {
width: 175px; height: 175px;
position: absolute;
border-radius: 100%;
/*Multiple box shadows to achieve the glass effect*/
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
/*Lets load up the large image first*/
background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
/*hide the glass by default*/
display: none;
}
/*To solve overlap bug at the edges during magnification*/
.small { display: block; }
<!-- Lets make a simple image magnifier -->
<div class="magnify">
<div>I want to magnify whole page Including text image and everything</div>
<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large"></div>
<!-- This is the small image -->
<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>
</div>
<!-- Lets load up prefixfree to handle CSS3 vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<!-- You can download it from http://leaverou.github.com/prefixfree/ -->
<!-- Time for jquery action -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
I want magnifying glass magnify whole webpage not only image. the magnifying glass magnify everything on page images text video. And doesn't disappear when nothing on div or webpage.
Here is the jsfiddle...
解决方案
Im using anythingzoomer to accomplish what you need. It is able to magnify text and images. It requires to have duplicate html elements to complete the magnify.
Here is where you can learn more about and its documentation AnythingZoomer
HTML
<p><strong>Image with Text Demo</strong></p>
<div id="zoom">
<div class="small">
<p>hello</p>
<img src="http://thecodeplayer.com/uploads/media/iphone.jpg" />
</div>
<div class="large">
<p>hello</p>
<img src="http://thecodeplayer.com/uploads/media/iphone.jpg" />
</div>
</div>
CSS
/* This is where to style the magnification to a circle*/
.az-windowed {
overflow: hidden;
position: absolute;
border-radius:100%;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
}
这篇关于html javascript css放大镜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
