<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js放大镜特效</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
position: relative;
}
.smallimg{
width:300px;
height: 300px;
position: absolute;
top: 50px;
left: 50px;
}
.mark{
width:100px;
height:100px;
position: absolute;
z-index: 100;
top: 0;
background:rgba(0,0,0,.6);
display: none;
cursor: move;
}
.bigimg{
position: absolute;
top:50px;
left:400px;
width:300px;
height: 300px;
overflow: hidden;
display: none;
}
#img1{
width:300px;
height:300px;
display: block;
}
#img2{
width: 900px;
height: 900px;
display: block;
}
</style>
<body>
<div id="main">
<div class="smallimg">
<img src="img/1.jpg" id="img1"/>
<div class="mark">

</div>
</div>
<div class="bigimg">
<img src="img/1.jpg" id="img2"/>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){

if(!document.getElementsByClassName){
document.getElementsByClassName = function(className, element){
var children = (element || document).getElementsByTagName('*');
var elements = new Array();
for (var i=0; i<children.length; i++){
var child = children[i];
var classNames = child.className.split(' ');
for (var j=0; j<classNames.length; j++){
if (classNames[j] == className){
elements.push(child);
break;
}
}
}
return elements;
};
}

//以上代码有效解决IE7、8浏览器不支持document.getElementsByClassName的问题。

var smallimg=document.getElementsByClassName('smallimg')[0];
var bigimg=document.getElementsByClassName('bigimg')[0];
var mark=document.getElementsByClassName('mark')[0];
var img2=document.getElementById("img2");
smallimg.onmouseover=function(e){
bigimg.style.display="block";
mark.style.display="block";
show(e);
}
smallimg.onmousemove=function(e){
bigimg.style.display="block";
mark.style.display="block";
show(e);
}
smallimg.onmouseout=function(e){
bigimg.style.display="none";
mark.style.display="none";
}
function show(e){
var e=e||window.event;
var L=e.clientX-smallimg.offsetLeft-mark.offsetWidth/2; //小方块的中心点
var T=e.clientY-smallimg.offsetTop-mark.offsetHeight/2;
var minL=0;
var minT=0;
var maxL=smallimg.offsetWidth-mark.offsetWidth;  
var maxT=smallimg.offsetHeight-mark.offsetHeight; 
if(L<minL){    
L=0;
}else if(L>maxL){  //判断方块是否出边界
L=maxL;
}
if(T<minT){
T=0;
}else if(T>maxT){
T=maxT;
}
mark.style.left=L+'px'; //小方块移动
mark.style.top=T+'px';
img2.style.marginLeft=L*-3+'px';  //右边大图移动
img2.style.marginTop=T*-3+'px';
}
}
</script>
</html>

未封装的js放大镜特效的更多相关文章

  1. js放大镜特效

    在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效 下图是原图的样子                                 ...

  2. JS放大镜特效（兼容版）

    原理 1.鼠标在小图片上移动时,通过捕获鼠标在小图片上的位置,定位大图片的相应位置 设计 1.页面元素:小图片.大图片.放大镜 2.技术点:事件捕获.定位 1)onmouseover:会在鼠标指针移动 ...

  3. 案例：用JS实现放大镜特效

    案例:用JS实现放大镜特效 案例:用JS实现放大镜特效

  4. Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  5. 第五章 JS典型特效

    注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...

  6. 基于jQuery仿淘宝产品图片放大镜特效

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

  7. JQuery仿购物网站放大镜特效所遇问题及思考

    JQuery仿购物网站放大镜特效所遇问题及思考 先贴下效果图,然后描述起来也就不会不知道我在说什么了. 我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouse ...

  8. JsQuick--个人封装的Js库

    JsQuick 该库为本人封装的Js库,尚未进行浏览器兼容 /** * 快速框架 版本:1.0.0 * 日期:2015.02.26 * 作者:简楚恩 */ /** * 快速获取控件类 */ var $ ...

  9. js 时钟特效

      时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...

随机推荐

  1. 在sharepoint2013中如使用PowerView

    在sharepoint2013中如使用PowerView 安装前提 Sql sqlserver 2012 sp1 Sharepoint2013 Sql server 2012 sp1 PowerPiv ...

  2. 谈谈iOS app的线上性能监测

    在移动端开发者中最重要的KPI应该是崩溃率.当崩溃率稳定下来后,工作的重心就应该转移到性能优化上.那么问题来了,如果你的项目也没有接入任何性能监测SDK,没有量化的指标来衡量,那你说你优化了性能领导信 ...

  3. Android 6.0 权限管理最佳实践

    博客: Android 6.0 运行时权限管理最佳实践 github: https://github.com/yanzhenjie/AndPermission

  4. [转]File Descriptor泄漏导致Crash: Too many open files

    在实际的Android开发过程中,我们遇到了一些奇奇怪怪的Crash,通过sigaction再配合libcorkscrew以及一些第三方的Crash Reporter都捕获不到发生Crash的具体信息 ...

  5. MySQL 的相关语句（增删改查）（SQLyog软件实现）

    -- 创建雇员表:emp CREATE TABLE emp( empno INT, -- 员工编号 ename ), -- 员工姓名 job ), -- 员工工作 mgr INT, -- 领导编号 h ...

  6. android:使用RemoteView自定义Notification

    //网上相关内容较少,遂记录下来,备忘. //依然以音乐播放器demo为例. 效果截图 //锤子手机上的效果 step1 准备自定义layout 常规的实现方式,并不会因为是用于notificatio ...

  7. Linux磁盘空间监控告警

    Linux系统中需要监控磁盘各分区的使用情况,避免由于各种突发情况,造成磁盘空间被消耗殆尽的情况,例如某个分区被Oracle的归档日志耗尽,导致后续的日志文件无法归档,这时ORACLE数据库就会出现错 ...

  8. SQL Server解决孤立用户浅析

    孤立用户概念        所谓孤立用户即指在服务器实例上未定义或错误定义了其相应 SQL Server 登录名的数据库用户无法登录到实例. 这样的用户被称为此服务器实例上的数据库的"孤立用 ...

  9. Tomcat 启动报错：No default web.xml

    原因是:tomcat 中conf 目录中的 web.xml 被无意删除掉了.从其他tomcat中复制一个过来就行了. conf 目录 没有 web.xml 导致的问题是,server.xml 中配置的 ...

  10. YARN基本框架介绍

    YARN基本框架介绍 转载请注明出处:http://www.cnblogs.com/BYRans/ 在之前的博客<YARN与MRv1的对比>中介绍了YARN对Hadoop 1.0的完善.本 ...