我的页面上有一个放大玻璃。当您在图像上执行鼠标悬停时，它会向您显示放大镜，其中包含缩放的图像部分，您还可以将放大镜移动到图像上。唯一的问题是此代码不适用于移动设备，因为它们不使用鼠标悬停。
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
$(".large").css("background","url('" + $(".thumb").attr("src") + "') no-repeat");
$(".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 = $(".thumb").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/$(".thumb").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".thumb").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});
}
}
})
});html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body {
background: #e4e4e4 url('images/binding_light.png'); /* http://subtlepatterns.com/binding-light/ */
font-size: 62.5%;
line-height: 1;
padding-bottom: 65px;
padding-top: 35px;
}
::selection { background: #d0ccf1; }
::-moz-selection { background: #d0ccf1; }
::-webkit-selection { background: #d0ccf1; }
br { display: block; line-height: 2.2em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 {
position: relative;
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 3.65em;
line-height: 2.0em;
padding: .2em 0;
font-weight: bold;
color: #5d6c81;
margin-bottom: 10px;
overflow: hidden;
white-space: nowrap;
text-align: center;
text-overflow: ellipsis;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 2px;
vertical-align: middle;
background: #5d6c81;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
h2 {
font-family: Geneva, Tahoma, Verdana, sans-serif;
font-size: 3.1em;
line-height: 1.7em;
font-weight: normal;
font-style: italic;
color: #777;
margin-bottom: 5px;
}
p,span { font-family: 'Lato', Helvetica, Arial, sans-serif; color: #424242; }
p { font-size: 1.7em; line-height: 1.4em; }
a { text-decoration: none; color: #577ccf; }
a:hover { text-decoration: underline; }
/** layout contents **/
#w {
display: block;
width: 800px;
margin: 0 auto;
padding: 13px 22px;
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/** images **/
.imgbox {
display: block;
width: 100%;
text-align: center;
margin-bottom: 40px;
}
.imgbox img {
-webkit-box-shadow: 1px 4px 9px -1px rgba(0,0,0,0.65);
-moz-box-shadow: 1px 4px 9px -1px rgba(0,0,0,0.65);
box-shadow: 1px 4px 9px -1px rgba(0,0,0,0.65);
}
.credits { text-align: center; margin-bottom: 20px; }
.magnify {width: 600px; margin: 50px auto; position: relative; cursor: none;}
/* Let's create the magnifying glass */
.large {
display: none;
width: 175px;
height: 175px;
position: absolute;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
/* box shadows to achieve the glass effect */
-webkit-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);
-moz-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);
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)
}
/* To solve overlap bug at the edges during magnification */
.thumb { display: block; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Image Zoom Viewer Demo</title>
<link rel="shortcut icon" href="http://spyrestudios.com/favicon.ico">
<link rel="icon" href="http://spyrestudios.com/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<div id="w">
<h1>Image Magnify Effect</h1>
<p>Just hover over the image below to see a full-scaled zoomed effect.</p>
<div class="magnify">
<div class="large"></div><!-- This is the magnifying glass which will contain the original/large version -->
<!-- Image source http://www.flickr.com/photos/rustyangel/4509569191/ -->
<div class="imgbox"><img src="https://s18.postimg.org/arieodetl/01-psx-controller.jpg" width="600" height="398" class="thumb" /></div>
</div><!-- @end .magnify -->
</div><!-- @end #w -->
</body>
</html>
答案 0 :(得分：1)
JS 你可以去：
$("yourElementGoesHere").addEventListener("touchstart", function(){}, true);
CSS ，您可以选择：element:hover, element:active { your properties here; -webkit-user-select: none; -webkit-touch-callout: none}