JQuery实现放大镜
PS:由于无法上传文件,所以感兴趣的朋友可以搜索公众号“ITyuanshu”,回复“8”获取整套源码
<!DOCTYPE html5>
<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="demo/styles/index.css" />
<link rel="stylesheet" type="text/css" href="demo/styles/prism.css" />
</head>
<body>
<br><br><br>
<img src="demo/img/waldo.jpg" class="demo-img pos-center">
<p>鼠标移上去试试!</p>
<br>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/blowup.min.js"></script>
<script type="text/javascript" src="demo/scripts/prism.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".demo-img").blowup({
background : "#FCEBB6"
});
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</body>
</html>