编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

HTML5移动端触摸图片放大,非常实用的案例

wxchong 2024-06-28 10:27:15 开源技术 11 ℃ 0 评论

更多特效代码请添加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>

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表