jq的图片放大镜效果
<div class="imgbox">
<div class="probox">
<img src="" alt="">
<div class="hoverbox"></div>
</div>
<div class="showbox">
<img src="" alt="">
</div>
</div>
.imgbox {
position:relative;
margin-left:100px;
}
.probox {
width:300px;
height:300px;
border:1px solid #000;
}
.probox img {
width:300px;
height:300px;
vertical-align:top;
}
.showbox {
display:none;
position:absolute;
left:403px;
top:;
width:400px;
height:300px;
overflow:hidden;
border:1px solid #ccc;
}
.showbox img {
position:absolute;
height:1200px;
width:1200px;
}
.hoverbox {
display:none;
position:absolute;
top:;
background:#09f;
border:1px solid #09f;
height:75px;
width:100px;
cursor:move;
z-index:;
}
function Zoom(imgbox, hoverbox, l, t, x, y, h_w, h_h, showbox) {
var moveX = x - l - (h_w / 2);
var moveY = y - t - (h_h / 2);
if (moveX < 0) {
moveX = 0
}
if (moveY < 0) {
moveY = 0
}
if (moveX > imgbox.width() - h_w) {
moveX = imgbox.width() - h_w
}
if (moveY > imgbox.height() - h_h) {
moveY = imgbox.height() - h_h
}
var zoomX = showbox.width() / imgbox.width()
var zoomY = showbox.height() / imgbox.height()
showbox.css({
left: -(moveX * zoomX),
top: -(moveY * zoomY)
})
hoverbox.css({
left: moveX,
top: moveY
})
} function Zoomhover(imgbox, hoverbox, showbox) {
var l = imgbox.offset().left;
var t = imgbox.offset().top;
var w = hoverbox.width();
var h = hoverbox.height();
var time;
$(".probox img,.hoverbox").mouseover(function(e) {
var x = e.pageX;
var y = e.pageY;
$(".hoverbox,.showbox").show();
hoverbox.css("opacity", "0.3")
time = setTimeout(function() {
Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox)
}, 1)
}).mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
time = setTimeout(function() {
Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox)
}, 1)
}).mouseout(function() {
showbox.parent().hide()
hoverbox.hide();
})
}
$(function() {
Zoomhover($(".probox img"), $(".hoverbox"), $(".showbox img"));
})
引入jq就可以使用了
jq的图片放大镜效果的更多相关文章
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- WPF设置VistualBrush的Visual属性制作图片放大镜效果
原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...
- 原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果
实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- canvas知识02:图片放大镜效果
效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cx ...
- jQuery实现图片放大镜效果
实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...
- 用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果
1.前言 CSS3的出现解决了很多让人头疼的问题,至少我想很多童鞋都这样认为.css3的cursor属性大家用的应该是非常的多的,我想用的比较多的像cursor:pointer;cursor:help ...
- Jquery插件开发之图片放大镜效果(仿淘宝)
原网转载地址:http://www.cnblogs.com/hnvvv/archive/2011/11/19/2255197.html 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...
随机推荐
- 【Alpha】阶段第四次Scrum Meeting
[Alpha]阶段第四次Scrum Meeting 工作情况 团队成员 今日已完成任务 明日待完成任务 刘峻辰 获取课程评论接口 增加课程接口 赵智源 整合前端进行部署 整合前端进行部署 肖萌威 编写 ...
- Lucene 分词
在Lucene中很多数据是通过Attribute进行存储的 步骤是同过TokenStrem获取文本信息流 TokenStream stream = a.tokenStream("conten ...
- 使用docker国内镜像解决方案
1:蜂巢镜像 https://c.163yun.com/hub#/m/library/ 例如: docker pull hub.c.163.com/library/nginx:1.8 再次执行dock ...
- QQueue与QStack使用
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QQueue与QStack使用 本文地址:http://techieliang.com ...
- 使用union all 遇到的问题(俩条sql语句行数的和 不等于union all 后的 行数的和 !);遗留问题 怎么找到 相差的呐俩条数据 ?
create table buyer as SELECT b.id AS bankid FROM v_product_deal_main m, base_member b WHERE b.id = m ...
- 图文详解 IntelliJ IDEA 15 创建 Maven 构建的 Java Web 项目(使用 Jetty 容器)
图文详解 IntelliJ IDEA 15 创建 maven 的 Web 项目 搭建 maven 项目结构 1.使用 IntelliJ IDEA 15 新建一个项目. 2.设置 GAV 坐标 3. ...
- 关于jquery中on绑定click事件在苹果手机失效的问题(巨坑啊)
用一个div当做了一个按钮来使用. <div class="button"> <div class=" next_button button_left ...
- C#中的静态常量(const)和动态常量(static和readonly)用法和区别
C#中有两种常量类型,分别为readonly(运行时常量)与const(编译时常量),本文将就这两种类型的不同特性进行比较并说明各自的适用场景.工作原理 readonly为运行时常量,程序运行时进行赋 ...
- Strus默认跳转方式是请求转发 地址栏不变 与javaweb的内部转发一样
Strus默认跳转方式是请求转发 地址栏不变 与javaweb的内部转发一样
- 题解 P1469 【找筷子】
这题真是水 咳咳.. 基本思路:桶排 但是可以剪枝. 剪枝方法: 好几种,可以用set(集合),可以用stack(栈), 也可以像我一样的蒟蒻最大最小值...... 但是作者的毒瘤数据应该不会放过我们 ...