<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.imgBox{
width: 1000px;
margin: auto;
text-align: center;
}
.small,.large{
font-size: 0;
outline: 1px solid burlywood;
margin: auto;
}
.small{
margin: 20px auto;
}
.large{
/*display: none;*/
}
.small,.small img,.large{
width: 300px;
height: 200px;
overflow: hidden;
}
.large img{
width: 900px;
height: 600px;
}
.small,.large{
position: relative;
}
.mark{
opacity: 0.5;
background-color: #DEB887;
z-index: 55;
width: 100px;
height: 66.666666666px;
display: none;
}
.mark,.large img{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="imgBox">
<div class="small">
<img src="img/img_14.jpg"/>
<div class="mark"></div>
</div>
<div class="large">
<img src="img/img_14.jpg"/>
</div>
</div>

<script type="text/javascript">
$(function(){
var $small = $(".small"),
$mark = $(".mark"),
$large = $(".large");
$small.on("mousemove",function(e){
// 在鼠标移到小图片中显示出mark
$mark.css("display","block");
// $large.css("display","block");
// 获取mark的一半宽度高度
var hw = $mark.width()/2,
hh = $mark.height()/2;
// 获取鼠标在当前图片中的位置
var lf = e.pageX-$small.offset().left-hw,
tt = e.pageY-$small.offset().top-hh;
// 获取mark的想x,y轴偏移率
var ix = lf/$small.width(),
iy = tt/$small.height();
// 获取边缘线
var lb = 1-hw/$small.width()*2,
tb = 1-hh/$small.height()*2;
// 计算和边缘的关系
var ix = ix<lb?ix>0?ix:0:lb,
iy = iy<tb?iy>0?iy:0:tb;
// 进行大图和小图百分比计算
$mark.css("left",ix*100+"%").css("top",iy*100+"%");
$large.children().css("left",-ix*300+"%").css("top",-iy*300+"%");
}).on("mouseout",function(){
// 鼠标移出后mark隐藏
$mark.css("display","none");
// $large.css("display","none");
})
})
</script>
</body>
</html>

js实现放大镜特效的实现方法的更多相关文章

  1. 案例：用JS实现放大镜特效

    案例:用JS实现放大镜特效 案例:用JS实现放大镜特效

  2. js图片放大镜特效代码

    <script language="JavaScript"> <!-- var srcX = 1024; //原图长宽 var srcY = 768; var b ...

  3. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  4. js放大镜特效

    在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效 下图是原图的样子                                 ...

  5. 基于jQuery仿淘宝产品图片放大镜特效

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

  6. JQuery仿购物网站放大镜特效所遇问题及思考

    JQuery仿购物网站放大镜特效所遇问题及思考 先贴下效果图,然后描述起来也就不会不知道我在说什么了. 我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouse ...

  7. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  8. 原生js实现架子鼓特效

    这是代码完成的效果,按下abcd会出现对应的架子鼓音乐的效果. 简单的介绍下代码思路,html和css部分就不多说了. 重要的是js部分. 大致是这样的, 首先获取到所有的按钮为一个数组,然后遍历整个 ...

  9. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

随机推荐

  1. mysql TO_DAYS()

    mysql TO_DAYS(date) 函数 TO_DAYS(date) 给定一个日期date, 返回一个天数 (从年份0开始的天数 ). mysql> SELECT TO_DAYS(95050 ...

  2. Android基础控件ScrollView滚动条的使用

    1.简介 ScrollView是一个FrameLayout的容器,不过在他的基础上添加了滚动,允许显示的比实际多的内容!另外,只能够往里面放置一个子元素,可以是单一的组件,又或者一个布局包裹着的复杂的 ...

  3. Sping中的AOP

    AOP(Aspect Oriented Programming)面向切面编程,什么是切面.形象的说,我们编写的代码都是一种有序的流程,比如产品管理,订单管理,而切面就是垂直于这些流程的. 比如日志服务 ...

  4. PAT甲级——A1091 Acute Stroke【30】

    One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...

  5. Redis系列一之《Redis设计与实践》整体观感

    笔者别的Redis方面的书没有读过,读完这一本,力荐,作者黄建宏,对Redis不太熟悉的,但是对编程稍微有些基础的,全部 读下来应该无压力.作者的编写和讲解非常详细,覆盖的面基本上都讲到,之前一直都是 ...

  6. <scrapy爬虫>基本知识-修改链接-中间件

    rules = ( Rule(LinkExtractor(allow=r'/films/\d+'),process_links='deal_links' ,callback='parse_maoyan ...

  7. kafka comsumer

    kafka的顺序消费只保证在同一个partition中而已

  8. HZOI20190902模拟35题解

    题面: A:公园 DAG上想拓扑dp 然而博主记忆化搜索了一下 设f[i][j]表示从i节点走j个点出公园所用的最小时间 则$f[u][i]=min(f[v][j-1]+dis_{u,v})$; 然后 ...

  9. [CQOI2011]放棋子--DP

    题目描述: 输入格式 输入第一行为两个整数n, m, c,即行数.列数和棋子的颜色数.第二行包含c个正整数,即每个颜色的棋子数.所有颜色的棋子总数保证不超过nm.N,M<=30 C<=10 ...

  10. JavaSE_04_JDK1.8新特性Lambda表达式

    1.1体验Lambda的更优写法 借助Java 8的全新语法,上述Runnable接口的匿名内部类写法可以通过更简单的Lambda表达式达到等效: 1.2 Lambda标准格式 Lambda省去面向对 ...