<!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. QT Sleep（最佳的平衡：一边发送消息，一边睡眠）

    转自:http://xiangjie88.iteye.com/blog/898417 sleep()//秒msleep()//毫秒usleep()//微秒以前为了模拟鼠标点击用过这些函数,可以让进程中 ...

  2. ajenti试用感受

    ajenti试用感受_展现技术动态_百度空间 ajenti试用感受   今天看开源中国介绍一款名为"服务器管理系统"的开源软件发布了,名为ajenti,页面感觉不错,对机器的采集信 ...

  3. cocos2d-x删除vs2010项目模板

    假设你切换cocos2d-x版本号的话. 要将之前版本号的vs模板删除掉.方法例如以下: 进入下面文件夹(依据自己的vs版本号): VS2008: C:\Program Files\Microsoft ...

  4. win7 64位下如何安装配置mysql-5.7.4-m14-winx64

    win7 64位下如何安装配置mysql-5.7.4-m14-winx641. mysql-5.7.4-m14-winx64.zip下载 官方网站下载地址:http://dev.mysql.com/g ...

  5. Oracle表解锁

    网搜 --第一步 查看被锁表 select b.owner,b.object_name, b.object_id,l.session_id,l.locked_mode from v$locked_ob ...

  6. C#_会员管理系统：开发七（用户分类）

    登录界面(VIPLogin.cs)详细代码: using System; using System.Collections.Generic; using System.ComponentModel; ...

  7. MongoDB Linux下的安装和启动(转)

    1. 下载MongoDB,此处下载的版本是:mongodb-linux-i686-1.8.1.tgz.tar. http://fastdl.mongodb.org/linux/mongodb-linu ...

  8. vs 2010 网站项目和asp.net 应用程序引用webservice

    项目需要做对接,对方提供的是一个webservice接口,自己建了个网站项目,然后添加web 引用,一切正常. 当实际编码的时候,发现一些类.方法找不到. 百思不得其解,只得对照对方提供的demo 看 ...

  9. Python3 将configparser从ini文件中读取的内容转换成字典格式

    因为写脚本的用到了,所以研究了下怎么将configparser从ini文件中读取的内容转换成字典格式. 整理一下,希望能对大家有帮助. 从http://stackoverflow.com/questi ...

  10. 循环结构中break、continue、return和exit的区别

    1. break break语句的使用场合主要是switch语句和循环结构.在循环结构中使用break语句,如果执行了break语句,那么就退出循环,接着执行循环结构下面的第一条语句.如果在多重嵌套循 ...