<!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. 一个Sqrt函数引发的血案(转）

    作者: 码农1946  来源: 博客园  发布时间: 2013-10-09 11:37  阅读: 4556 次  推荐: 41   原文链接   [收藏]   好吧,我承认我标题党了,不过既然你来了, ...

  2. Php 使用 fsockopen发送http请求

    <?php function HTTP_Post($URL,$data, $referrer="") { // parsing the given URL $URL_Info ...

  3. 算法导论 6.5.9 堆实现K路归并问题

    问题: 设计一个时间复杂度为O(NlogK)的算法,它能够将K个有序链表合并为一个有序链表,这里的N为所有输入链表包含的总的元素个数 分析: 该问题为经典的利用堆完成K路归并的问题: 当K个序列满足一 ...

  4. Android_Dialog_设置Dialog窗体的大小

    /** * 设置Dialog窗体的大小 */ private void setWindowSize() { DisplayMetrics dm = new DisplayMetrics(); Wind ...

  5. Android 中文API （68） —— BluetoothClass.Service

    前言 本章内容是 android.bluetooth.BluetoothClass.Service,为Android蓝牙部分的章节翻译,版本为 Android 2.3   r1,翻译来自中山大学的&q ...

  6. 也谈.NET MVC 2 + ExtJS的部署问题

    由于业务需要,笔者刚进到一个项目组,由于没有美工,前台采用ExtJs + MVC 2 ,迭代1的项目做的还算比较顺利,至少在本机上是运行没有任何问题的, 但是为了给客户演示,我兴高采烈的将网站部署在I ...

  7. 特殊集合（stack、queue、hashtable的示例及练习）

    特殊集合:stack,queue,hashtable stack:先进后出,一个一个的赋值一个一个的取值,按照顺序. .count           取集合内元素的个数 .push()        ...

  8. CSS的float与clear

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  9. spoj 7001

    /*** 大意:计算gcd(x,y,z) =1 0<= x, y , z <= n 问有多少个这样的对 莫比乌斯反演:(反演: 用结果推原因) 函数m(m)的定义如下: 莫比乌斯反演: * ...

  10. 最短路径算法—Dijkstra(迪杰斯特拉)算法分析与实现(C/C++)

    Dijkstra算法 ———————————最后更新时间:2011.9.25———————————Dijkstra(迪杰斯特拉)算法是典型的最短路径路由算法,用于计算一个节点到其他所有节点的最短路径. ...