更多特效代码请添加HTML5前端交流群581549454
废话不多说上代码！
网站前端样式代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery手机微信端手指触摸图片放大代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
/* styles unrelated to zoom */
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
/* these styles are for the demo, but are not required for the plugin */
.zoom {
display:inline-block;
position: relative;
}
/* magnifying glass icon */
.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
background:url(img/icon.png);
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
#ex2 img:hover { cursor: url(img/grab.cur), default; }
#ex2 img:active { cursor: url(img/grabbed.cur), default; }
</style>
</head>
<body>
<div>
<span id='ex1'>
<img src='img/design.jpg' width='555' height='320' alt='web design'>
<p>Hover</p>
</span>
<span id='ex2'>
<img src='img/women.jpg' width='290' height='320' alt='women'>
<p>Grab</p>
</span>
<span id='ex3'>
<img src='img/horse.jpg' width='555' height='320' alt='horse'>
<p>Click to activate</p>
</span>
<span id='ex4'>
<img src='img/women2.jpg' width='290' height='320' alt='women2'>
<p>Click to toggle</p>
</span>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/jquery.zoom.js' type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
$('#ex3').zoom({ on:'click' });
$('#ex4').zoom({ on:'toggle' });
});
</script>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)