-------------------------------------

一,布局

一个大的div,包括下面:

左边是小图div,小图中有可移动的面板.右边是大图div,

学到的内容:fiter 滤镜 这里;  overflow 这里

offsetLeft(HTML DOM 元素对象) 这里

<style type="text/css">
#div1{
width: 200px;
height: 200px;
padding: 5px;
border: 1px solid #ccc;
position: relative;
}
#div1 .small_pic{
width: 200px;
height: 200px;
background: #eee;
position: relative;
}
#div1 .float_layer{
width: 50px;
height: 50px;
border:1px solid #;
background: #fff;
filter: alpha(opacity:); //滤镜
opacity: 0.3;
position: absolute;
top: 0px;
left: 0px;
display: none;
}
#div1 .mark{
width: %;
height:%;
position: absolute;
z-index: ;
left: 0px;
top: 0px;
background: red;
filter: alpha(opacity:);
opacity: ;
}
#div1 .big_pic{
position: absolute;
top: -1px;
left: 215px;
width: 250px;
height: 250px;
overflow: hidden;
border: 2px solid #ccc;
display: none; }
#div1 .big_pic img{
position: absolute;
top: 0px;
left: 0px; }
</style>
<body>
<div id="div1">
<div class="small_pic">
<span class="mark"></span>
<span class="float_layer"></span>
<img src="data:images/small.png" alt="放大图片1">
</div>
<div class="big_pic">
<img src="data:images/big.png" alt="放大图片2">
</div>
</div>
</body>

-------------------------------------

二,JS操作-获得元素

写获得class函数

function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aTmp=[];
var i=0; for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aTmp.push(aEle[i]);
}
} return aTmp;
}

-------------------------------------

三,控制大图及面板的出现和隐藏.

mouseover mouseout

    oMark.onmouseover=function()
{
oFloat.style.display='block';
oBig.style.display='block'; };
oMark.onmouseout=function(){
oFloat.style.display='none';
oBig.style.display='none';
};

-------------------------------------

四,让面板随着鼠标移动

mousemove

鼠标位置

下面是确定面板的left

var oEvent=ev||event;
var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
oFloat.style.left=l+'px';
oFloat.style.top=t+'px';

-------------------------------------

五,控制面板的可移动范围

判断 超出时强制为某值

if(l<-5)
{
l=-5;
}
else if (l>oMark.offsetWidth-oFloat.offsetWidth+5){l=oMark.offsetWidth-oFloat.offsetWidth+5;}//参考面板left的确定 这里if(t<-5)
{
t=-5;
}

-------------------------------------

六,大图动起来

按照一个比例

面板在小图里可以移动范围除以小图的宽度,

var tempX=l/(oMark.offsetWidth-oFloat.offsetWidth);
var tempY=t/(oMark.offsetHeight-oFloat.offsetHeight); document.title=tempX;
oImg.style.left=-tempX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
oImg.style.top=-tempY*(oImg.offsetHeight-oBig.offsetHeight)+'px';

下面是效果图.请把鼠标放在图片上

 -------------------------------------

七,代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
padding: 5px;
border: 1px solid #ccc;
position: relative;
}
#div1 .small_pic{
width: 200px;
height: 200px;
background: #eee;
position: relative;
}
#div1 .float_layer{
width: 50px;
height: 50px;
border:1px solid #000;
background: #fff;
filter: alpha(opacity:30);
opacity: 0.3;
position: absolute;
top: 0px;
left: 0px;
display: none;
}
#div1 .mark{
width: 100%;
height:100%;
position: absolute;
z-index: 2;
left: 0px;
top: 0px;
background: red;
filter: alpha(opacity:0);
opacity: 0;
}
#div1 .big_pic{
position: absolute;
top: -1px;
left: 215px;
width: 250px;
height: 250px;
overflow: hidden;
border: 2px solid #ccc;
display: none; }
#div1 .big_pic img{
position: absolute;
top: 0px;
left: 0px; }
</style>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aTmp=[];
var i=0; for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aTmp.push(aEle[i]);
}
} return aTmp;
} window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oMark=getByClass(oDiv, 'mark')[0];
var oFloat=getByClass(oDiv,'float_layer')[0];
var oBig=getByClass(oDiv,'big_pic')[0];
var oSmall=getByClass(oDiv,'small_pic')[0];
var oImg=oBig.getElementsByTagName('img')[0];
oMark.onmouseover=function()
{
oFloat.style.display='block';
oBig.style.display='block'; };
oMark.onmouseout=function(){
oFloat.style.display='none';
oBig.style.display='none';
};
oMark.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2; if(l<-5)
{
l=-5;
}
else if (l>oMark.offsetWidth-oFloat.offsetWidth+5){l=oMark.offsetWidth-oFloat.offsetWidth+5;} if(t<-5)
{
t=-5;
}
else if (t>oMark.offsetHeight-oFloat.offsetHeight+5){t=oMark.offsetHeight-oFloat.offsetHeight+5;} oFloat.style.left=l+'px';
oFloat.style.top=t+'px';
var tempX=l/(oMark.offsetWidth-oFloat.offsetWidth);
var tempY=t/(oMark.offsetHeight-oFloat.offsetHeight); document.title=tempX;
oImg.style.left=-tempX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
oImg.style.top=-tempY*(oImg.offsetHeight-oBig.offsetHeight)+'px'; } }; </script>
</head>
<body>
<div id="div1">
<div class="small_pic">
<span class="mark"></span>
<span class="float_layer"></span>
<img src="data:images/small.png" alt="放大图片1">
</div>
<div class="big_pic">
<img src="data:images/big.png" alt="放大图片2">
</div>
</div>
</body>
</html>

图片放大镜(像淘宝浏览商品一样)JS操作的更多相关文章

  1. JS淘宝浏览商品

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  2. ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐功能

    如今随便上个网都能够看到淘宝.京东等各大电商平台的双十一购物狂欢宣传,从2009年開始淘宝愣是把11.11这一天打造成了全民购物狂欢节.阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是100 ...

  3. 简单的抓取淘宝关键字信息、图片的Python爬虫|Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇)

    Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇) 淘宝改字段,Bugfix,查看https://github.com/hunterhug/taobaoscrapy.git 由于Gith ...

  4. 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...

  5. iOS 集成阿里百川最新版(3.1.1.96) 实现淘宝授权登录以及调用淘宝客户端商品详情页

      公司最近要做第三方登录,由于是做导购项目,必不可少的有淘宝的授权登录.本来就是一个授权登录,没什么大不了的.但淘宝的无线开放业务——阿里百川更新的最新版本3.1.1.96,开发文档不是不详细,是很 ...

  6. selenium+PhantomJS 抓取淘宝搜索商品

    最近项目有些需求,抓取淘宝的搜索商品,抓取的品类还多.直接用selenium+PhantomJS 抓取淘宝搜索商品,快速完成. #-*- coding:utf-8 -*-__author__ =''i ...

  7. python推荐淘宝物美价廉商品

    完成的目标: 输入搜索的商品 以及 淘宝的已评价数目.店铺的商品描述(包括如实描述.服务态度.快递的5.0打分): 按要求,晒选出要求数量的结果,并按"物美价廉算法"排序后输出 思 ...

  8. python推荐淘宝物美价廉商品 2.0

    改动: 新增功能 :可选择只看天猫或淘宝 代码模块化封装,参数配置或输入单独在一个py文件管理,主函数功能只留出参数传入在setting配置的py文件里. main.py代码: # -*- codin ...

  9. android 数据重构(仿淘宝浏览记录,足迹)

    数据结构 ->数据重构 原因 处理这个数据的主要原因是,后台服务器返回的数据格式在ios那边因为其控件可以对数据进行分区显示,可以直接处理,而在android上我们显示控件就是listview, ...

随机推荐

  1. zookeeper的安装和启动

    最近的手上一个项目要用到dubbo,顺便研究下zookeeper 1.下载 下载地址:http://www.apache.org/dyn/closer.cgi/zookeeper/,下载解压到D:\t ...

  2. Thread Pool Engine, and Work-Stealing scheduling algorithm

    http://pages.videotron.com/aminer/threadpool.htm http://pages.videotron.com/aminer/zip/threadpool.zi ...

  3. flash builder 4.6使用profile(概要分析)调试性能

    最近用调试flex的性能,发现fb自带有性能调试工具profile,折腾好一段时间终于成功用上 环境:flash builder 4.6,myeclipse 10(fb装独立版,再以插件形式绑定到my ...

  4. ArcGIS Desktop 10.0 直连 ArcSDE 10.2

    环境 客户端:win7 64位 sp1,oracle11.2 32位客户端,ArcGIS Desktop 10.0 服务端:win7 64位 sp1,oracle11.2 64位服务端,ArcSDE ...

  5. 战舰少女 黑暗炼钢 按键精灵 代码及apk下载

    注: 该代码仅仅适用于1920*1080分辨率的android手机,因为我只有这个分辨率的手机TnT 代码其实蛮简单的,都是比较简单的模拟就好了…… 要改也比较轻松吧 APK下载地址:链接: http ...

  6. 大话数据结构—平衡二叉树(AVL树)

    平衡二叉树(Self-Balancing Binary Search Tree/Height-Balanced Binary Search Tree),是一种二叉排序树,当中每个节点的左子树和右子树的 ...

  7. Ubuntu 14.04 Android 使用Maven二 创建自己的Mavenproject

    依据https://code.google.com/p/maven-android-plugin/wiki/GettingStarted 介绍,有两种方法能够创建Mavenproject. 第一种方法 ...

  8. linux脚本^M: bad interpreter:解决方法

    转自:http://blog.csdn.net/huiguixian/article/details/6386774 在Linux中执行.sh脚本,异常提示/bin/sh^M: bad interpr ...

  9. 可以将一些配置信息已json格式存在数据库中读取的时候序列化。

    public partial class json序列化 : System.Web.UI.Page    {        protected void Page_Load(object sender ...

  10. Ubuntu下安装FTP服务及使用(VSFTPD详细设置)(二)

    vsftpd 作为一个主打安全的FTP服务器,有很多的选项设置.下面介绍了vsftpd的配置文件列表,而所有的配置都是基于vsftpd.conf这个配置文件 的.本文将提供完整的vsftpd.conf ...