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 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...
随机推荐
- python3【基础】-装饰器
要理解充分理解python的装饰器,有充分理解下述三个知识点为前提: python作用域规则 函数即对象 闭包 一.python作用域规则: 首先介绍python中的作用域规则.python的作用域规 ...
- Base64编码图片存取与前台显示
需求:将Base64编码图片以BLOB类型存入数据库,需要时取出显示 后台: String base64str=new String(log.getRequest_imgdata());//log为实 ...
- Fisherman`Team的任务看板
- c# 简单日志记录
FileStream fs = new FileStream(System.AppDomain.CurrentDomain.BaseDirectory + "log.txt",Fi ...
- (二)MySQL中级篇
1.视图view 视图是一个虚拟表,其内容由查询定义.定义视图的筛选可以来自当前或其它数据库的一个或多个表,或者其它视图. 视图的优点: ①简化了操作,把经常使用的数据定义为视图. ②安全性,用户只能 ...
- WebForm与MVC模式优缺点
Asp.net Web开发方式,分为两种: 1. WebForm开发 2. Asp.Net MVC开发 MVC是微软对外公布的第一个开源的表示层框架,MVC目的不是取代WebForm开发,只是web开 ...
- jQuery的滚动监听
jQuery的滚动监听 1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offs ...
- Charles安装及使用教程
一. 简介及安装 一.charles的使用 1.1 charles的说明 Charles其实是一款代理服务器,通过过将自己设置成系统(电脑或者浏览器)的网络访问代理服务器,然后截取请求和请求结果达到 ...
- mysql中联合查询
联合查询union 一个翻译问题的解释: 在mysql的手册中,将连接查询(Join)翻译为联合查询: 而联合查询(union),没有明确翻译. 但: 在通常的书籍或文章中,join被翻译为“连接”查 ...
- SQL Server bit数据类型
bit值保存为1/0,1代表true,0代表false读取数据库数据时,可以直接用bool型读取该字段,会直接转换为true/false 数据库表结构 CREATE TABLE [dbo].[BitT ...