jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错
<!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写的放大镜效果 ~~效果不错的更多相关文章
- 使用原生JS，实现鼠标点击爱心效果 ！！！
使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...
- 告别组件之教你使用原生js和css写移动端轮播图
在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
- 原生JS实战：写了个斗牛游戏，分享给大家一起玩！
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5869953.html 该程序是本人的个人作品,写的不好,未经本人允许,请 ...
- 原生JS实战：写了个一边玩游戏，一边记JS的API的游戏
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...
- 原生JS实现移动端的轮播效果
首先 我们想实现的效果是在手指按下拖动的时候图片能够跟随移动(无动画效果)然后松开手指后判断图片移动的位置 和某一个值进行比较 在这里我们默认定为盒子的1/3宽度 当x轴的移动位置大于1/3的时候图片 ...
- 原生js和css写虚拟键盘
代码来源忘记是哪个大神的了,抱歉抱歉 放上源码: <!-- 虚拟键盘 --> <!DOCTYPE html> <html> <head> <met ...
- 原生js通过prottype写的一个简单拖拽
<!DOCTYPE html> <head> <meta charset="utf-8"/> <title></title&g ...
- 原生js 基于canvas写一个简单的前端 截图工具
先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 【转载】用原生JS和html5进行视频截图并保存到本地
支持并尊重原创!原文地址:http://www.cnblogs.com/xieshuxin/p/6731637.html <!doctype html> <html> < ...
随机推荐
- java面试题系列12
1.面向对象的特征有哪些方面 a.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节.抽象 ...
- 飘逸的python - 一个最简单的服务器
python拥有这种单独起一个服务器监听端口的能力,用标准库的wsgiref就行. from wsgiref.simple_server import make_server def simple_a ...
- 令人作呕的OpenSSL
在OpenSSL心脏出血之后,我相信非常多人都出了血,而且流了泪...网上瞬间出现了大量吐嘈OpenSSL的文章或段子,仿佛内心的窝火一瞬间被释放了出来,跟着这场疯闹,我也吐一下嘈,以雪这些年被Ope ...
- mybatis级联查询
1.定义四个实体.User Role Privilege Resource,他们之间的对于关系为 2.需求:我通过用户名username查找出该用户对应的角色以及角色对应的权限和资源 3 ...
- js字符串大小写转换
var str = 'hello world'; alert(str.toUpperCase());//将字符串转换为大写. alert(str.toLowerCase());//将字符串转换为小写. ...
- google chrome字体最小12px的问题
解决Google浏览器不支持12px以下的字体大小的问题,有时设定了12PX,可在浏览器看时确不起作用 网络出现内核的浏览器有微软的Internet Explorer, Mozilla的Firefox ...
- HTML5 Web Storage使用实例
很久没写文章了,忙加懒实在没办法,之前也看过关于Web Storage的文章,当时就觉得各各浏览器的支持跟上来还早着呢,像我们这样做门户网站的一时半会儿也用不上,毕竟用户群体鱼目混杂嘛,最近各各浏览器 ...
- java 自定义BufferedReader_readLine
import java.io.FileNotFoundException; import java.io.FileReader; import java.io.IOException; import ...
- json在PHP中应用技巧
一.json_encode() 该函数主要用来将数组和对象,转换为json格式.先看一个数组转换的例子: $arr = array ('a'=>1,'b'=>2,'c'=>3,'d' ...
- JSON 数组格式
JSON 数据格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人 ...