<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>原生Js结合html5做出放大镜的效果</title>
<style>
img{
margin:100px 500px;
}
div{
width:200px;
height:200px;
display:none;
border:1px solid #ccc;
border-radius:100px;
z-index:1000;
pointer-events:none;
}
</style>
</head>
<body>
<img src="http://d.hiphotos.baidu.com/image/w%3D2048/sign=529c3afe39c79f3d8fe1e3308e99cc11/7a899e510fb30f24d9069302ca95d143ad4b0316.jpg" onload="core(this)"></img>
<div id="showImg"></div>
<script>
//图片加载完成之后，触发这个方法
function core(obj){
//加载完成之后，就将图片大小设置完成
obj.width = "400";
var new_div = document.getElementById("showImg");
//现在图片的大小
var width_changed = obj.width;
var height_changed = obj.height;
//得到原图的真正的宽高
var img = new Image();
img.src = obj.src;
var width_start = "";
var height_start = "";
//需要在加载完成之后再获取到原图的宽高
img.onload = function(){
width_start = img.width;
height_start = img.height;
//在最开始就设置背景图片
new_div.style.backgroundImage = "url("+this.src+")";
obj.onmousemove = function(e){
obj.style.opacity = 0.7;
//获取鼠标的位置(获取相对位置)
//鼠标在图片上的位置
var pageX_changed = e.pageX - 500;
var pageY_changed = e.pageY - 100;
//根据鼠标在改变宽高的图片的位置，计算鼠标在原图的位置
var pageX_start = parseInt(pageX_changed/width_changed*width_start);
var pageY_start = parseInt(pageY_changed/height_changed*height_start);
//定位一下div
new_div.style.display = "block";
new_div.style.position = "absolute";
new_div.style.left = parseInt(e.pageX - 100) + "px";
new_div.style.top = parseInt(e.pageY - 100) + "px";
new_div.style.overflow = "hidden";
new_div.style.width = "200px";
new_div.style.height = "200px";
//设置div的背景图片的位置
new_div.style.backgroundPosition = -(pageX_start-100) + "px " + -(pageY_start-100) + "px";
new_div.style.backgroundRepeat = "no-repeat";
}
obj.onmouseout = function(){
document.getElementById("showImg").style.display = "none";
obj.style.opacity = 1;
}
};

}
</script>
</body>
</html>

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

用于商品详情页的商品图放大镜

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

Imgzoom.prototype = {
constructor: Imgzoom,
init: function(){
this.createHtml();
this.bindEvents();
},
createHtml: function(){
if($('#'+this.previewId).length) return;
var $container = $(this.container);
!$container.length && console && console.log('can not find element, param "container" need checked.');
var $zoomDiv = $('<div id="' + this.previewId + '" class="zoomDiv" ><div class="zoomDiv-con"><img class="bigimg" width="100%" height="100%" /></div></div>');

$zoomDiv.css({"position":"absolute","top":$container.offset().top,"width":this.prevW, "height":this.prevH, "overflow":"hidden", "display":"none", "border":"1px solid #aaa", "zIndex":1000}).appendTo('body');
$container.css({"position":"relative"});

var $holder = $('<div class="zoomglass" id="zoomglass" />').css({"position":"absolute", "background":"#FFF27E", "top":$container.offset().top, "left":$container.offset().left, "zIndex":10, "opacity":0.5, "display":"none", "border":"1px dashed hotpink", "cursor":"crosshair", "width":this.prevW/this.scale, "height": this.prevH / this.scale}).appendTo('body');

if( this.dir == 'right'){
$zoomDiv.css({'left': $container.offset().left + $container.outerWidth() + this.margin});
}else if(this.dir == 'bottom'){
$zoomDiv.css({"top": $container.offset().top + $container.outerHeight() + this.margin, "left": $container.offset().left });
}

this.zoomDiv = $zoomDiv;
this.holder = $holder;
this.container = $(this.container);
},
bindEvents: function(){
var $simg, scale = this.scale, $zoomDiv = this.zoomDiv, $wrapper = $zoomDiv.find('.zoomDiv-con');
var $container = this.container, $holder = this.holder;
var offset = $container.offset();
var halfW = $holder.outerWidth()/2, halfH = $holder.outerHeight()/2;
var leftMin = offset.left+halfW, leftMax = leftMin+$container.width()-2*halfW;
var topMin = offset.top+halfH, topMax = topMin + $container.height()-2*halfH;
var leftBind = leftMin - halfW, rightBind = leftMax + halfW;
var topBind = topMin - halfH, btmBind = topMax + halfH;
var diffX= leftMax - leftMin, diffY = topMax -topMin;
var min = Math.min, max= Math.max;
// debugger;
$container.mouseenter(function(e){//初始化 大图
$holder.show(); $zoomDiv.show();
if($(e.target).hasClass('zoomimg')){
$simg = $(e.target);
$wrapper.css({"width": scale * $simg.outerWidth(), "height":scale * $simg.outerHeight()});//大图的大小
$zoomDiv.find('.bigimg').attr('src', $simg.attr('src')); //大图路径
}
});
$('body').mousemove(function(e){
// $holder.css({'left':e.pageX-halfW, 'top':e.pageY-halfH});
var x,y,position;
if(e.pageX < leftBind || e.pageX > rightBind || e.pageY < topBind || e.pageY > btmBind){
if(!$holder.ishide){ $holder.ishide=true; $holder.hide(); $zoomDiv.hide();}
return;
}else {
$holder.ishide = false;
x = min( max(e.pageX-halfW, leftBind), leftMax-halfW);
y = min( max(e.pageY-halfH, topBind), topMax-halfH);
$holder.css({"left":x,"top":y});
position = $holder.position();
$wrapper.css({"marginLeft":scale * (offset.left - position.left), "marginTop": scale * (offset.top - position.top)});
}
});
}
}
// $('.viewport').css({"outline":"1px solid red"});
var iz = new Imgzoom({scale:3, prevW:500, prevH:500});

jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错的更多相关文章

  1. 使用原生JS，实现鼠标点击爱心效果 ！！！

    使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...

  2. 告别组件之教你使用原生js和css写移动端轮播图

    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...

  3. 原生JS实战：写了个斗牛游戏，分享给大家一起玩！

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5869953.html 该程序是本人的个人作品,写的不好,未经本人允许,请 ...

  4. 原生JS实战：写了个一边玩游戏，一边记JS的API的游戏

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...

  5. 原生JS实现移动端的轮播效果

    首先 我们想实现的效果是在手指按下拖动的时候图片能够跟随移动(无动画效果)然后松开手指后判断图片移动的位置 和某一个值进行比较 在这里我们默认定为盒子的1/3宽度 当x轴的移动位置大于1/3的时候图片 ...

  6. 原生js和css写虚拟键盘

    代码来源忘记是哪个大神的了,抱歉抱歉 放上源码: <!-- 虚拟键盘 --> <!DOCTYPE html> <html> <head> <met ...

  7. 原生js通过prottype写的一个简单拖拽

    <!DOCTYPE html> <head> <meta charset="utf-8"/> <title></title&g ...

  8. 原生js 基于canvas写一个简单的前端 截图工具

    先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  9. 【转载】用原生JS和html5进行视频截图并保存到本地

    支持并尊重原创!原文地址:http://www.cnblogs.com/xieshuxin/p/6731637.html <!doctype html> <html> < ...

随机推荐

  1. （Problem 46）Goldbach's other conjecture

    It was proposed by Christian Goldbach that every odd composite number can be written as the sum of a ...

  2. qt 国际化（翻译时会触发changeEvent）

    1. 修改工程文件 .pro ,加入翻译源文件 hello_world.ts: TRANSLATIONS += \        Resource/translations/hello_world.t ...

  3. 基于Visual C++2013拆解世界五百强面试题--题13-找最大公共子字符串

    编程实现:找出两个字符串中最大公共子字符串,如"abccade"和"dgcadde"的最大子字符串为"cad". 如果不考虑效率的话直接比较 ...

  4. android LinearLayout和RelativeLayout实现精确布局

    先明确几个概念的区别: padding margin:都是边距的含义,关键问题得明白是什么相对什么的边距padding:是控件的内容相对控件的边缘的边距． margin  :是控件边缘相对父空间的边距 ...

  5. Node安装及搭建简单服务器

    注:本文安装系统为mac,windows及其他系统下载对应安装包 ,mac下载后的安装包为apk文件,windows为msi文件. 安装 1.在网上下载node安装包,官方网站2.双击下载文件,按步骤 ...

  6. codeforces#FF DIV2C题DZY Loves Sequences（DP）

    题目地址:http://codeforces.com/contest/447/problem/C C. DZY Loves Sequences time limit per test 1 second ...

  7. c 输出9x9乘法口诀表 这个学for循环绕不开的一题

    #include<stdio.h> int main(void) { int i,j; ;i<=;i++) { ;j<=i;j++) { printf("%d*%d= ...

  8. Visual Studio Tip: Get Public Key Token for a Strong Named Assembly

    The first 3 parts are easy to get. I should know the name, version, and culture for the assembly sin ...

  9. MapReduce的C#实现及单元测试（试验）

    MapReduce.cs类文件代码  MapReduce的执行方法 using System; using System.Collections.Generic; //using System.Lin ...

  10. iOS离线打包

    预备环境 iOS开发环境,Mac OS.XCode 7.2以上版本: 下载HBuilder离线打包iOS版SDK(5+ SDK下载). SDK目录说明 HBuilder-Hello:离线打包演示应用: ...