类似淘宝放大镜代码

中国凉茶

浏览: 374197 次
性别:
来自: 北京

最近访客更多访客>>

chouldie

ningxianti

slowfishcolor

henryxlx

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery
JS Code

html jquery js 放大镜

闲着无聊，自己做了一个关于淘宝放大镜的效果，方便自己和大家以后急需的时候直接拿过去就可以用。两种方法实现，第一种js，第二种jquery
JS实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{padding:0px;margin:0px;background:#aaaaaa;}
#small_pic{
margin:10px 0 0 10px;width:375px;height:275px;cursor:crosshair;
}
#zoom{
border:1px solid red;width:120px;height:120px;background:#FFFFFF;position:absolute;top:20px;left:20px;
opacity:0.5;filter:alpha(opacity=50);
display:none;
}
#big_pic{
width:240px;height:240px;border:1px solid red;position:absolute;top:10px;left:500px;overflow:hidden;display:none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var small_pic = document.getElementById('small_pic');
var big_pic = document.getElementById('big_pic');
var zoomer = document.getElementById('zoom');
var pic2 =document.getElementById('pic2');
//移动跟随
 
small_pic.onmousemove = mouseMove;
function mouseMove(ev){
    ev = ev || window.event;
    var l = ev.clientX-small_pic.offsetLeft-zoomer.offsetWidth/2;
    var h = ev.clientY-small_pic.offsetTop-zoomer.offsetHeight/2;
    if(l<0){l=0;}
    else if(l>small_pic.offsetWidth-zoomer.offsetWidth){l=small_pic.offsetWidth-zoomer.offsetWidth+1;}
    if(h<0){h=0;}
    else if(h>small_pic.offsetHeight-zoomer.offsetHeight){h=small_pic.offsetHeight-zoomer.offsetHeight+1;}
 
    document.getElementById("zoom").style.left = l+small_pic.offsetLeft+"px";
    document.getElementById("zoom").style.top = h+small_pic.offsetTop+"px";
     
    var percent = big_pic.clientWidth/zoomer.clientWidth;
    pic2.style.left = big_pic.style.left-percent*l+'px';
    pic2.style.top = big_pic.style.top-percent*h+'px';
}
 
small_pic.onmouseover = function(){
    zoomer.style.display = 'block';
    big_pic.style.display = 'block';
    mouseMove();
};
small_pic.onmouseout = function(){
    zoomer.style.display ='none';
    big_pic.style.display='none';
};
};
</script>
</head>
<body>
<div id="small_pic">
<img id="pic1" src="images/00001.jpg" style="width:375px;height:275px;border:1px solid #aaaaaa;">
<span id="zoom">
</span>
</div>
<div id="big_pic">
<img id="pic2" src="images/00001.jpg" style="width:750px;height:550px;position:absolute;">
</div>
</body>
</html>

JQ实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<style>
		*{  
    padding:0px;  
    margin:0px;  
    border:0px;}  
	.all{  
	    margin:0 auto;  
	    width:960px;  
	    }  
	.big{  
	    float:left;  
	    width:160px;  
	    height:160px;  
	    border:2px solid #CCC;  
	    padding:3px;  
	    margin-top:100px;}  
	.big .small{  
	    width:50px;  
	    height:50px;  
	    position:absolute;  
	    top:0px;  
	    left:300px;  
	    background:#CFF;  
	    opacity:0.75;  
	    display:none;}  
	.big .show{  
	    width:275px;  
	    height:150px;  
	    padding:3px;  
	    position:absolute;  
	    top:100px;  
	    left:500px;  
	    display:none;  
	    background:url(images/00001.jpg) no-repeat left top;  
	    border:1px solid #666;} 
		
	</style>
	<script src="jquery-1.7.2.js" type="text/javascript"></script>
	<script>
		var topset=0;  
    	var leftset=0;  
	    $(document).ready(function(e) {  
	        $(".big").mouseleave(function(){  
	            $(".small").css({"top":LTY,"left":LTX,"display":"none"});  
	            $(".show").css("display","none");  
	        }).mousemove(function(e){  
	            topset=$(this).offset().top;  
	            leftset=$(this).offset().left;  
	            if(e.pageX<185)  
	                LTX=160;  
	            else if(e.pageX>301)  
	                LTX=276;  
	            else  
	                LTX=e.pageX-25;  
	            if(e.pageY<125)  
	                LTY=100;  
	            else if(e.pageY>241)  
	                LTY=221;  
	            else  
	                LTY=e.pageY-25;  
	            $(".small").css({"top":LTY,"left":LTX,"display":"block"});  
	              
	            position_x="-"+Math.round((LTX-160)/160*550)+"px";  
	            position_y="-"+Math.round((LTY-100)/160*375)+"px";  
	            pl=position_x+" "+position_y;  
	            $(".show").css({"display":"block","background-position":pl});  
	        });  
	    });  
		
	</script>
	<body>  
    <div class="all">  
        <div class="big">  
            [img]images/00001.jpg" width="160px;" height="160px[/img]  
            <div class="small"></div>  
            <div class="show"></div>  
        </div>  
    </div>  
    </body>
</html>

10
顶

3
踩

分享到：

js的时间比较大小 | Java基础 write方法应用

2012-06-28 10:28
浏览 4196
评论(2)
分类:Web前端
查看更多

2 楼 nicegege 2012-06-28

1 楼 coding1688 2012-06-28

推荐jqZoom插件，下面是它的演示站点
http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

东营市乡镇边界，矢量边界，shp格式: 矢量边界，行政区域边界，精确到乡镇街道，可直接导入arcgis使用

Java SSM 商户管理系统客户管理库存管理销售报表项目源码本商品卖的是源码，合适的地方.zip: 毕业设计

075.JSP+SQL宿舍管理系统.zip: 毕业设计

经验贝叶斯EB的简单例子: 经验贝叶斯EB的简单例子

69页-智慧园区综合管理平台解决方案.pdf: 智慧园区，作为现代城市发展的新形态，旨在通过高度集成的信息化系统，实现园区的智能化管理与服务。该方案提出，利用智能手环、定制APP、园区管理系统及物联网技术，将园区的各类设施与设备紧密相连，形成一个高效、便捷、安全的智能网络。从智慧社区到智慧酒店，从智慧景区到智慧康养，再到智慧生态，五大应用板块覆盖了园区的每一个角落，为居民、游客及工作人员提供了全方位、个性化的服务体验。例如，智能手环不仅能实现定位、支付、求助等功能，还能监测用户健康状况，让科技真正服务于生活。而智慧景区的建设，更是通过大数据分析、智能票务、电子围栏等先进技术，提升了游客的游玩体验，确保了景区的安全有序。尤为值得一提的是，方案中的智慧康养服务，展现了科技对人文关怀的深刻体现。通过智慧手环与传感器，自动感知老人身体状态，及时通知家属或医疗机构，有效解决了“空巢老人”的照护难题。同时，智慧生态管理系统的应用，实现了对大气、水、植被等环境要素的实时监测与智能调控，为园区的绿色发展提供了有力保障。此外，方案还提出了建立全域旅游营销平台，整合区域旅游资源，推动旅游业与其他产业的深度融合，为区域经济的转型升级注入了新的活力。总而言之，这份智慧园区建设方案以其前瞻性的理念、创新性的技术和人性化的服务设计，为我们展示了一个充满智慧与活力的未来园区图景。它不仅提升了园区的运营效率和服务质量，更让科技真正融入了人们的生活，带来了前所未有的便捷与舒适。对于正在规划或实施智慧园区建设的决策者而言，这份方案无疑提供了一份宝贵的参考与启示，激发了他们对于未来智慧生活的无限遐想与憧憬。

数学建模相关主题资源2: 数学建模相关主题资源2

SQL编程语言在数据科学领域的面试技巧及核心功能解析: 内容概要：本文围绕SQL在求职和实际工作中的应用展开，详细解析了SQL的重要性及其在不同行业中不可替代的地位。文章首先强调了SQL作为“一切数据工作的起点”，是数据分析、数据挖掘等领域必不可少的技能，并介绍了SQL与其他编程语言在就业市场的对比情况。随后重点探讨了SQL在面试过程中可能出现的挑战与应对策略，具体涉及到询问澄清问题、正确选择JOIN语句类型、恰当使用GROUP BY及相关过滤条件的区别、理解和运用窗口函数等方面，并给出了详细的实例和技巧提示。另外提醒面试者要注意重复值和空值等问题，倡导与面试官及时沟通。文中引用IEEE Spectrum编程语言排行榜证明了SQL不仅广泛应用于各行各业，在就业市场上也最受欢迎。适用人群：从事或打算转入数据科学领域（包括但不限于数据分析师、数据科学家、数据工程师等职业方向），并对掌握和深入理解SQL有一定需求的专业人士，尤其是正准备涉及SQL相关技术面试的求职者。使用场景及目标：帮助用户明确在面对复杂的SQL查询题目时能够更加灵活应对，提高解题效率的同时确保准确性；同时让用户意识到SQL不仅仅是简单的数据库查询工具，而是贯穿整个数据处理流程的基础能力之一，进而激发他们进一步探索的热情。其他说明：SQL在性能方面优于Excel尤其适用于大规模数据操作；各知名企业仍将其视为标准数据操作手段。此外还提供了对初学者友好的建议，针对留学生普遍面临的难题如零散的学习资料、昂贵且效果不佳的付费教程以及难以跟上的纯英教学视频给出了改进的方向。

COMSOL仿真揭示石墨烯临界耦合光吸收特性：费米能级调控下的光学性能探究,COMSOL仿真揭示石墨烯临界耦合光吸收特性：费米能级调控下的光学性能探究,COMSOL 准 BIC控制石墨烯临界耦合光吸收: COMSOL仿真揭示石墨烯临界耦合光吸收特性：费米能级调控下的光学性能探究,COMSOL仿真揭示石墨烯临界耦合光吸收特性：费米能级调控下的光学性能探究,COMSOL 准 BIC控制石墨烯临界耦合光吸收。 COMSOL 光学仿真，石墨烯，光吸收，费米能级可调下图是仿真文件截图，所见即所得。 ,COMSOL; 准BIC; 石墨烯; 临界耦合光吸收; 光学仿真; 费米能级可调。,COMSOL仿真：石墨烯光吸收的BIC控制与费米能级调节

Labview与Proteus串口仿真下的温度采集与报警系统：Keil单片机程序及全套视频源码解析,Labview与Proteus串口仿真温度采集及上位机报警系统实战教程：设定阈值的Keil程序源码分: Labview与Proteus串口仿真下的温度采集与报警系统：Keil单片机程序及全套视频源码解析,Labview与Proteus串口仿真温度采集及上位机报警系统实战教程：设定阈值的Keil程序源码分享,labview 和proteus 联合串口仿真温度采集上位机报警设定阈值单片机keil程序整套视频仿真源码 ,关键词：LabVIEW；Proteus；串口仿真；温度采集；上位机报警；阈值设定；Keil程序；视频仿真源码。,LabVIEW与Proteus联合串口仿真：温度采集与报警系统，Keil程序与阈值设定全套视频源码

整车性能目标书：涵盖燃油车、混动车及纯电动车型的十六个性能模块目标定义模板与集成开发指南,整车性能目标书：涵盖燃油车、混动车及纯电动车型的十六个性能模块目标定义模板与集成开发指南,整车性能目标书，汽车: 整车性能目标书：涵盖燃油车、混动车及纯电动车型的十六个性能模块目标定义模板与集成开发指南,整车性能目标书：涵盖燃油车、混动车及纯电动车型的十六个性能模块目标定义模板与集成开发指南,整车性能目标书，汽车性能目标书，十六个性能模块目标定义模板，包含燃油车、混动车型及纯电动车型。对于整车性能的集成开发具有较高的参考价值 ,整车性能目标书;汽车性能目标书;性能模块目标定义模板;燃油车;混动车型;纯电动车型;集成开发;参考价值,《汽车性能模块化目标书：燃油车、混动车及纯电动车的集成开发参考》

面板数据熵值法Stata代码（附样本数据和结果）.rar: 熵值法stata代码（含stata代码+样本数据）面板熵值法是一种在多指标综合评价中常用的数学方法，主要用于对不同的评价对象进行量化分析，以确定各个指标在综合评价中的权重。该方法结合了熵值理论和面板数据分析，能够有效地处理包含多个指标的复杂数据。

“电子电路”仿真资源（Multisim、Proteus、PCB等）: “电子电路”仿真资源（Multisim、Proteus、PCB等）

107_xee_water_consumption.txt: 在 GEE（Google Earth Engine）中，XEE 包是一个用于处理和分析地理空间数据的工具。以下是对 GEE 中 XEE 包的具体介绍：主要特性地理数据处理：提供强大的函数和工具，用于处理遥感影像和其他地理空间数据。高效计算：利用云计算能力，支持大规模数据集的快速处理。可视化：内置可视化工具，方便用户查看和分析数据。集成性：可以与其他 GEE API 和工具无缝集成，支持多种数据源。适用场景环境监测：用于监测森林砍伐、城市扩展、水体变化等环境问题。农业分析：分析作物生长、土地利用变化等农业相关数据。气候研究：研究气候变化对生态系统和人类活动的影响。

C++指针与内存管理详解：避免常见错误及最佳实践: 内容概要：本文介绍了C++编程中常见指针错误及其解决方案，并涵盖了模板元编程的基础知识和发展趋势，强调了高效流操作的最新进展——std::spanstream。文章通过一系列典型错误解释了指针的安全使用原则，强调指针初始化、内存管理和引用安全的重要性。随后介绍了模板元编程的核心特性，展示了编译期计算、类型萃取等高级编程技巧的应用场景。最后，阐述了C++23中引入的新特性std::spanstream的优势，对比传统流处理方法展现了更高的效率和灵活性。此外，还给出了针对求职者的C++技术栈学习建议，涵盖了语言基础、数据结构与算法及计算机科学基础领域内的多项学习资源与实战练习。适合人群：正在学习C++编程的学生、从事C++开发的技术人员以及其他想要深入了解C++语言高级特性的开发者。使用场景及目标：帮助读者掌握C++中的指针规则，预防潜在陷阱；介绍模板元编程的相关技术和优化方法；使读者理解新引入的标准库组件，提高程序性能；引导C++学习者按照有效的路径规划自己的技术栈发展路线。阅读建议：对于指针部分的内容，应当结合实际代码样例反复实践，以便加深理解和记忆；在研究模板元编程时，要从简单的例子出发逐步建立复杂模型的理解能力，培养解决抽象问题的能力；而对于C++23带来的变化，则可以通过阅读官方文档并尝试最新标准特性来加深印象；针对求职准备，应结合个人兴趣和技术发展方向制定合理的学习计划，并注重积累高质量的实际项目经验。

Java读写FM1208CPU卡源码: JNA、JNI， Java两种不同调用DLL、SO动态库方式读写FM1208 CPU卡示例源码，包括初始化CPU卡、创建文件、修改文件密钥、读写文件数据等操作。支持Windows系统、支持龙芯Mips、LoongArch、海思麒麟鲲鹏飞腾Arm、海光兆芯x86_Amd64等架构平台的国产统信、麒麟等Linux系统编译运行，内有jna-4.5.0.jar包，vx13822155058 qq954486673

Linux系统入门到精通：从基础命令到服务管理和日志解析: 内容概要：本文全面介绍了Linux系统的各个方面，涵盖入门知识、基础操作、进阶技巧以及高级管理技术。首先概述了Linux的特点及其广泛的应用领域，并讲解了Linux环境的搭建方法（如使用虚拟机安装CentOS），随后深入剖析了一系列常用命令和快捷键，涉及文件系统管理、用户和权限设置、进程和磁盘管理等内容。此外，还讨论了服务管理的相关指令（如nohup、systemctl）以及日志记录和轮替的最佳实践。这不仅为初学者提供了一个完整的知识框架，也为中级和高级用户提供深入理解和优化系统的方法。适合人群：适用于有意深入了解Linux系统的学生和专业技术人员，特别是需要掌握服务器运维技能的人群。使用场景及目标：本文适合初次接触Linux的操作员了解基本概念；也适合作为培训教材，指导学生逐步掌握各项技能。对于有一定经验的技术人员而言，则可以帮助他们巩固基础知识，并探索更多的系统维护和优化可能性。阅读建议：建议按照文章结构循序渐进地学习相关内容，尤其是结合实际练习操作来加深记忆和理解。遇到复杂的问题时可以通过查阅官方文档或在线资源获得更多帮助。

企业绩效考核制度详解：运维部门绩效管理流程规范及其应用: 内容概要：本文档详细介绍了企业在规范运维部门绩效管理过程中所建立的一套绩效考核制度。首先阐述了绩效考核制度设立的目的为确保绩效目标得以衡量与追踪，并确保员工与公司共同成长与发展。其次规定范围覆盖公司所有在职员工，并详细列明了从总经理到一线员工在内的不同角色的职责范围。再则描述了完整的绩效工作流程，即从年初开始制定绩效管理活动计划，经过与每个员工制定具体的绩效目标，在绩效考核周期之内对员工的工作进展和问题解决状况进行持续的监督跟进，并且在每周期结束前完成员工绩效的评估和反馈工作，同时利用绩效评估结果对员工作出保留或异动的相关决定，最后进行绩效管理活动总结以为来年提供参考。此外还强调了整个过程中必要的相关文档保存，如员工绩效评估表。适合人群：企业管理层，HR专业人士及对现代企业内部运营管理感兴趣的读者。使用场景及目标：①管理层需要理解如何规范和有效实施企业内部绩效管理，以提高公司运营效率和员工满意度；②HR人士可以通过参考此文档来优化自己公司的绩效管理体系；③对企业和组织管理有兴趣的研究员亦可借鉴。阅读建议：读者应重点关注各个层级管理者和员工在整个流程中的角色和责任，以期更好地理解

基于MATLAB Simulink的LCL三相并网逆变器仿真模型：采用交流电流内环PR控制与SVPWM-PWM波控制研究,基于MATLAB Simulink的LCL三相并网逆变器仿真模型研究：采用比例: 基于MATLAB Simulink的LCL三相并网逆变器仿真模型：采用交流电流内环PR控制与SVPWM-PWM波控制研究,基于MATLAB Simulink的LCL三相并网逆变器仿真模型研究：采用比例谐振控制与交流SVPWM控制策略及参考文献解析,LCL_Three_Phase_inverter：基于MATLAB Simulink的LCL三相并网逆变器仿真模型，交流电流内环才用PR（比例谐振）控制，PWM波采用SVPWM控制，附带对应的参考文献。仿真条件：MATLAB Simulink R2015b，前如需转成低版本格式请提前告知，谢谢。 ,LCL三相并网逆变器; LCL_Three_Phase_inverter; MATLAB Simulink; PR控制; SVPWM控制; 仿真模型; 参考文献; 仿真条件; R2015b版本,基于PR控制与SVPWM的LCL三相并网逆变器Simulink仿真模型研究

内点法求解标准节点系统最优潮流计算的稳定程序，注释清晰，通用性强,内点法用于标准节点系统的最优潮流计算：稳定、通用且注释清晰的matlab程序,内点法最优潮流程序matlab 采用内点法对14标准节点: 内点法求解标准节点系统最优潮流计算的稳定程序，注释清晰，通用性强,内点法用于标准节点系统的最优潮流计算：稳定、通用且注释清晰的matlab程序,内点法最优潮流程序matlab 采用内点法对14标准节点系统进行最优潮流计算，程序运行稳定，注释清楚，通用性强 ,内点法; 最优潮流程序; MATLAB; 14标准节点系统; 稳定运行; 清晰注释; 通用性强。,Matlab内点法最优潮流程序：稳定高效，通用性强，适用于14节点系统

17suiea3.apk?v=1741006890849: 17suiea3.apk?v=1741006890849

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

类似淘宝放大镜代码

评论

发表评论

相关推荐

jQuery实现多选下来框(multiple select)

Jquery选择器,选择ID以"某某"字符开头的一组文本框只能输入数字

Jackson 框架，轻易转换JSON

highcharts 时间少8小时问题

highcharts中x轴曲线不连续时的解决办法

Highcharts和Highstock实例(包括折线图，饼图，柱状图)

选择框(select)添加或者减少选项(option)操作的js代码

js 数组对象的操作方法

js 数组对象的操作方法

Jquery解析json

Jquery JSON操作应用

下拉列表，动态初始化前天日期

纯js分页

js的时间比较大小

Jquery常用方法总结

jquery 根据name属性获取对象（=document.getElementByName("") )

jquery 根据name属性获取对象（=document.getElementByName("") )

Jquery和JS的加载事件区别

JS时间控件

JS时间比较

最近访客更多访客>>