JS 放大镜

http://www.elevateweb.co.uk/image-zoom/examples

HTML
<img id="zoom_05" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
JAVASCRIPT
$("#zoom_05").elevateZoom({
  zoomType				: "inner",
  cursor: "crosshair"
});

原文地址：https://www.cnblogs.com/haoxuanchen2014/p/9924620.html

时间： 2024-11-06 07:17:26

JS 放大镜的相关文章

原生js放大镜效果

效果: 1.  鼠标放上去会有半透明遮罩.右边会有大图片局部图 2.  鼠标移动时右边的大图片也会局部移动 放大镜的关键原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置: 放大镜的移动方向和大图片的移动方向:横向和纵向都是相反,才可以保证同步: 页面元素: 技术点:事件捕获,定位 难点:计算 需要元素:小图片和大图片,存放小图片和大图片的容器,有一个放大镜: 涉及到的技术点: (1)       鼠标事件的捕获:onmouseover(进入).onmouseout

js放大镜

  <!DOCTYPE html>   <html>   <head>   <meta charset="UTF-8">   <title></title>   <style type="text/css">   *{   margin:0px;   padding:0px;   border:0px;   }   #demo{   width:800px;   height:800

JS放大镜特效（兼容版）

原理 1.鼠标在小图片上移动时,通过捕获鼠标在小图片上的位置,定位大图片的相应位置 设计 1.页面元素:小图片.大图片.放大镜 2.技术点:事件捕获.定位 1)onmouseover:会在鼠标指针移动到指定的对象上时发生 2)onmouseout:会在鼠标指针移出指定的对象时发生 3)onmousemove:会在鼠标指针移动时发生 4)各边距表示 5)ofgsetLeft与style.left对比 style.left返回的是字符串,比如:30px,offsetLeft返回的是数值30 styl

最全js 放大镜效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js放大镜特效

原理分析:当鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置.(同时,当鼠标在小图片上移动时,右侧大图片往相反的方向移动.) 放大镜特效设计: ①页面元素:小图片,大图片以及盛放图片的容器 ②事件捕获:onmouseover(当鼠标指针移动到指定对象上时发生).onmouseout(当鼠标指针移除指定对象时发生).onmousemove(当鼠标指针移动时发生) ③技术难点:offsetLeft(相对于父元素的左位移).offsetTop (相对于父元素的顶部位移) 注:o

JS 放大镜特效

放大镜特效 放大镜在商城网站经常会看到,作为前端,写这么一个肯定是小case,本人就献丑了.如果没有一点思路的同学,可以先学DOM事件里的事件位置.距离.宽高各种方法属性. 那么直接上代码,代码里各种注释相当完备: 栗子代码链接 <!doctype html> <title>放大镜</title> <meta charset="utf-8"> <style> *{ margin:0; padding:0; list-style

js放大镜效果

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com"> <meta name="copyright" content="智能社 - zhinengshe.com"> <title

javascript -- (js放大镜效果)

<style> * { margin: 0; padding: 0; } </style> <script type = "text/javascript" > var body = document.getElementsByTagName('body')[0]; var box1 = document.createElement('div'); var box2 = document.createElement('div'); var mask

原生js实现的放大镜效果

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style&