一个简单的放大镜
来源:互联网 发布:淘宝图标图片 编辑:程序博客网 时间:2024/05/29 09:12
<script>
var box=document.getElementById("box");
var sm=box.children[0];
var lg=box.children[1];
var mask=sm.children[1];
sm.onmouseover=function(){
mask.style.display = 'block';
lg.style.display = "block";
}
sm.onmouseleave=function(){
mask.style.display = 'none';
lg.style.display = "none";
}
sm.onmousemove=function(event){
var event=event||window.event;
var pagex=event.pageX||event.clientX+scroll().left;
var pagey=event.pageY||event.clientY+scroll().top;
var x=pagex-sm.parentNode.offsetLeft-mask.offsetWidth/2;
var y=pagey-sm.parentNode.offsetTop-mask.offsetHeight/2;
if (x<0) {
x=0;
}else if (x>sm.offsetWidth-mask.offsetWidth) {
x=sm.offsetWidth-mask.offsetWidth;
}
if (y<0) {
y=0;
}else if (y>sm.offsetHeight-mask.offsetHeight) {
y=sm.offsetHeight-mask.offsetHeight;
}
mask.style.left=x+'px';
mask.style.top=y+"px";
var lgImg=lg.children[0];
var lgx=(lgImg.offsetWidth-lg.offsetWidth)/(sm.offsetWidth-mask.offsetWidth);
console.log(lgx);
lgImg.style.marginLeft = -x*lgx+"px";
lgImg.style.marginTop = -y*lgx+"px";
}
function scroll(){
if (window.pageYOffset!=null) {
return {
left:window.pageXOffset,
top:window.pageYOffset
}
}else if (document.compatMode==="CSS1Compat") {
return {
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}return {
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
</script>
var box=document.getElementById("box");
var sm=box.children[0];
var lg=box.children[1];
var mask=sm.children[1];
sm.onmouseover=function(){
mask.style.display = 'block';
lg.style.display = "block";
}
sm.onmouseleave=function(){
mask.style.display = 'none';
lg.style.display = "none";
}
sm.onmousemove=function(event){
var event=event||window.event;
var pagex=event.pageX||event.clientX+scroll().left;
var pagey=event.pageY||event.clientY+scroll().top;
var x=pagex-sm.parentNode.offsetLeft-mask.offsetWidth/2;
var y=pagey-sm.parentNode.offsetTop-mask.offsetHeight/2;
if (x<0) {
x=0;
}else if (x>sm.offsetWidth-mask.offsetWidth) {
x=sm.offsetWidth-mask.offsetWidth;
}
if (y<0) {
y=0;
}else if (y>sm.offsetHeight-mask.offsetHeight) {
y=sm.offsetHeight-mask.offsetHeight;
}
mask.style.left=x+'px';
mask.style.top=y+"px";
var lgImg=lg.children[0];
var lgx=(lgImg.offsetWidth-lg.offsetWidth)/(sm.offsetWidth-mask.offsetWidth);
console.log(lgx);
lgImg.style.marginLeft = -x*lgx+"px";
lgImg.style.marginTop = -y*lgx+"px";
}
function scroll(){
if (window.pageYOffset!=null) {
return {
left:window.pageXOffset,
top:window.pageYOffset
}
}else if (document.compatMode==="CSS1Compat") {
return {
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}return {
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
</script>
阅读全文
0 0
- 一个简单的放大镜
- 一个简单的放大镜功能
- 一个简单的JavaScript放大镜
- 简单的放大镜效果
- 用js做一个简单的电商放大镜效果
- android 放大镜的简单实现
- 用JS做一个简单的电商产品放大镜功能
- javascript放大镜效果的简单实现
- JavaScript学习之简单的放大镜
- 简单的js实现放大镜效果
- 关于一个放大镜效果的代码解释
- 一个iOS下的放大镜例子
- 简单放大镜 demo
- js简单放大镜
- 一个图片局部放大镜
- jQuery轻量级简单实用的图片放大镜特效
- 介绍一个十分好用的JQUERY图片放大镜插件
- 介绍一个十分好用的JQUERY图片放大镜插件
- codeup 1817 A+B
- 浅拷贝和深拷贝
- HTTP相关知识
- 前端工程化初识
- 禁用和启用windows defender
- 一个简单的放大镜
- MQL4 语言入门。简单词组中的难题。
- 2017.07.24-0811 没写日记
- linux学习之旅(十八)&深入DNS服务器
- java的各种类型转换汇总
- 【sckit-learn学习(0)】numpy基础
- 7.测试hadoop安装成功与否,并跑mapreduce实例
- iOS 数组转化为字符串~总结
- 那些年我追过的“女孩”