jQery放大镜效果
简单2:1的放大
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
#pic{
width: 200px;
height: 160px;
border: 3px solid #ccc;
position: relative;
float: left;
}
#pic img{
width: 200px;
height: 160px;
}
.mirror{
width: 100px;
height: 80px;
background: gold;
opacity: .5;
position: absolute;
left: 0;
top: 0;
display: none;
}
#bigbox{
width: 200px;
height: 160px;
float: left;
border: 3px solid #ccc;
overflow: hidden;
position: relative;
}
#bigbox img{
position: absolute;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#pic').on({
mousemove:function(e){
$('.mirror').css('display','block')
//获取当前鼠标按下的位置相对于box的偏移值
var _left = e.clientX - $('#pic').offset().left - $('.mirror').width()/2;
var _top = e.clientY - $('#pic').offset().top - $('.mirror').height()/2;
//判断不能超出边界
if(_left<0){
_left = 0
}
if(_left>=$('#pic').width() - $('.mirror').width()){
_left=$('#pic').width() - $('.mirror').width()
}
if(_top<0){
_top = 0
}
if(_top>=$('#pic').height() - $('.mirror').height()){
_top = $('#pic').height() - $('.mirror').height()
}
//在box中移动鼠标，改变放大镜的位置
($('.mirror')).css({'left':_left,'top':_top})
//根据放大镜的位置，算出右侧大图应该显示的部分
$('#img1').css({'left':-$('.mirror').position().left * 2,'top':-$('.mirror').position().top * 2})
},
//鼠标移出后，放大镜隐藏
mouseleave:function(){
$('.mirror').css('display','none') }
})
})
</script>
</head>
<body>
<div id="box">
<div id="pic">
<img src="img/6.jpg"/>
<p class="mirror"></p>
</div>
<div id="bigbox">
<img id="img1" src="img/6.jpg"/>
</div>
</div>
</body>
</html>
jQery放大镜效果的更多相关文章
- 关于jQuery中实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- 利用JS实现购物网站商品放大镜效果
大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...
- 【JavaScript】放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- jquery放大镜效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- 【HTML5】Canvas 实现放大镜效果
图片放大镜 效果 在线演示 源码 原理 首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化 <canvas id=&qu ...
- 照着别人的demo自己试着做了个放大镜效果
原理: A:放大镜 B:小图片 C:大图片可视区域 D:大图片 鼠标的位置应该在放大镜的中央,所以鼠标位置为:clientX=A.offsetLeft()+B.offsetLeft+1/2*A.o ...
随机推荐
- 应用c#读取带cookie的http数据
@(编程) private static string Login() { string url = string.Format("{0}/login-submit.html?identit ...
- How Tomcat Works（七）
本文接下来介绍并分析servlet容器,servlet容器是用来处理请求servlet资源,并为web客户端填充response对象的模块. servlet容器是org.apache.catalina ...
- Linux下的Shell编程
从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...
- Head First设计模式-单例模式
一.整体代码 Singleton.java public class Singleton { private static Singleton uniqueInstance; // other use ...
- C#用正则表达式 获取标签的属性或值
整理两个 在C#中,用正则表达式 获取网页源代码标签的属性或值的方法 : 1.获取标签中的值: string str="<a href=\"www.csdn.net\&quo ...
- （剑指Offer）面试题24：二叉搜索树的后序遍历序列
题目: 输入一个整数数组,判断该数组是不是某个二叉搜索树的后序遍历的结果,如果是则返回true,否则返回false. 假设输入的数组的任意两个数字都互不相同. 思路: 根据二叉搜索树的后序遍历特点,很 ...
- 解析Ceph: Snapshot
经常有开发者在邮件列表中会问到Ceph Snapshot的实现方式,受限于目前有限的实现文档和复杂的代码结构和代码量,弄清楚Ceph Snapshot并不是一件容易的事.正好最近在重构Ceph存储引擎 ...
- chrome内核浏览器缓存资源找回方法
曾几何时,用chrome浏览器看了某个图片,网页,视频等,当时没保存,后来再怎么找都找不到了,chrome还把缓存加密了,不能像ie那样找回,这世上有买后悔药的吗?还真有! 搜索chromeCache ...
- 关于Excel导入的HDR=YES; IMEX=1详解
于Excel导入的HDR=YES; IMEX=1详解2011年12月27日 星期二 11:17 参数HDR的值:HDR=Yes,这代表第一行是标题,不做为数据使用 ,如果用HDR=NO,则表示第一行不 ...
- 推荐大家使用的CSS书写规范及顺序
@设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...