<!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. selenium 学习笔记 ---新手学习记录（6） 问题总结（java）

    1.查看网页的cookie信息 //查看cookie 登录后的cookie Set<Cookie> setcoke= driver.manage().getCookies(); for(C ...

  2. ios 学习笔记(8) 控件 按钮(UIButton)的使用方法

    在实际开发中,对于开发者来说,更多的还是使用“自定义”按钮.将“按钮”对象的类型设置成UIButtonTypeCustom.这样一来,按钮的所有元素都将由开发者来配置和自定义. 对于一个自定义按钮来说 ...

  3. 一键搜索之Win10锁屏壁纸

    前天无意发现win10的锁屏壁纸挺漂亮的,就想着能不能保存下来?网上一搜果然有资料,当时参考的连接如下 http://jingyan.baidu.com/article/fedf07375ea2513 ...

  4. Apache RewriteCond RewriteRule 入门和Laravel去掉index.php

        Ci删除index.php办法: 创建.htaccess 文件放到网站的根目录下,文件中的内容如下: RewriteEngine onRewriteCond %{REQUEST_FILENAM ...

  5. HDU 2227 Find the nondecreasing subsequences

    题目大意:给定一个序列,求出其所有的上升子序列. 题解:一开始我以为是动态规划,后来发现离散后树状数组很好做,首先,c保存的是第i位上升子系列有几个,那么树状数组的sum就直接是现在的答案了,不过更新 ...

  6. C++模板：qsort

    void qsort(int l,int r){ int i,j,t,mid; mid=b[(l+r)>>1]; i=l; j=r; do{ while (b[i]<mid) i++ ...

  7. java代码发送JSON格式的httpPOST请求

    package com.test; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOE ...

  8. html相关介绍

    HTML(超文本标记语言)  超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言 XHTML1.0 可扩展超文本置标语言(eXtensi ...

  9. MD5算法【计算文件和字符串的MD5值】

    1. MD5算法是一种散列(hash)算法(摘要算法,指纹算法),不是一种加密算法(易错).任何长度的任意内容都可以用MD5计算出散列值.MD5的前身:MD2.MD3.MD4.介绍工具:CalcMD5 ...

  10. Median of Two Sorted Arrays-分治法

    题目意思很简单将两个有序数组合并之后的中位数找出来.题目要求使用log(m+n)的时间复杂度来做. 虽然言简意赅,但不得不承认这个题目我自己想了好久也没做出来,隐约觉得应该使用寻找第k大数的算法来做, ...