jquery实现淘宝商品图片局部放大
本篇博文用于简单记录图片放大功能实现，供大家参考，具体内容如下
功能实现还存在一些小漏洞在文章结尾提出，希望各位指正
1、图片放大初考虑将图片转换为字体图片形式，然后进行放大处理，但最终本人技术不过关无法实现，后用width: 200%;进行一般的图片放大，所以当图片越大就存在一些失真；
2、图片放大后的显示为本次实现的关键，通过获取鼠标指针的位置从而获取指针在图片的那一个位置，再以当前位置进行图片放大，放大后将图片进行偏移，偏移量以鼠标指针在原图的位置上获取的left和top值乘以放大倍数就可以显示局部放大的功能了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
<style>
*{margin: 0;padding: 0;}
.div1{
width: 450px;
height: 300px;
overflow: hidden;
display: inline-block;
}
.div1>img{width: 100%;}
.div2{
width: 450px;
height: 300px;
border: 1px solid #A9A9A9;
overflow: hidden;
display: inline-block;
position: relative;
}
.div2>img{
position: absolute;
width: 200%;
height: 200%;
}
.list1{
width: 70px;
height: 50px;
float: left;
margin-left: 10px;
}
.list1>img{width: 100%;}
#zhezhao{
width: 100px;
height: 100px;
background: #BC8F8F;
opacity: 0.7;
display: none;
position: absolute;
}
</style>
</head>
<body>
<div class="div1">
<img src="../img/wall1.jpg" alt="" class="img1" />
<div id="zhezhao"></div>
</div>
<div class="div2"></div>
<div class="list">
<div class="list1">
<img src="../img/wall2.jpg" alt="" class="listimg1" />
</div>
<div class="list1">
<img src="../img/wall3.jpg" alt="" class="listimg2" />
</div>
<div class="list1">
<img src="../img/wall4.jpg" alt="" class="listimg3" />
</div>
<div class="list1">
<img src="../img/wall6.jpg" alt="" class="listimg4" />
</div>
<div class="list1">
<img src="../img/wall5.jpg" alt="" class="listimg5" />
</div>
</div>
<script>
$(function(){
$('.list1').mouseover(function(){
$('.div1').children()[0].src = $(this).children()[0].src;
});
$('.div1').mousemove(function(e){
$('#zhezhao').css({
left: e.clientX-50+'px',
top: e.clientY-50+'px',
display: 'block'
});
var $img = $('.div1').children().eq(0);
$('.div2').empty();
$('.div2').append($img.clone());
$('.img1').css({
left: -(e.clientX-50)*2+'px',
top: -(e.clientY-50)*2+'px'
});
if(50>e.clientX||e.clientX>450||50>e.clientY||e.clientY>300) {
$('#zhezhao').css({
display: 'none'
});
}else{ //(400<e.clientX&&e.clientX<450||250<e.clientY&&e.clientY<300)
$('#zhezhao').css({
left: e.clientX-50+'px',
top: e.clientY-50+'px',
display: 'block'
});
}
});
});
</script>
</body>
</html>
本功能在具体操作上还存在一些问题，当鼠标快速移开原图区域时，无法有效的监听到鼠标移出区域的事件，在考虑使用移出事件时，鼠标悬浮于原图上的遮罩层影响力鼠标在原图上的移出事件，无法很好的解决，希望各位帮忙移出事件。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于Jquery插件开发之图片放大镜效果(仿淘宝)
需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的p
-
jQuery插件zoom实现图片全屏放大弹出层特效
1.介绍 jQuery制作zoom图片全屏放大弹出层插件. 2.使用方法 1.引入以下的js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/zoom.min.js&quo
-
jQuery实现类似淘宝网图片放大效果的方法
本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>类似淘宝网的图片放大代码</title> <script type="
-
jQuery实现等比例缩放大图片让大图片自适应页面布局
在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"
-
jQuery当鼠标悬停时放大图片的效果实例
这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7"> <LI sizcach
-
基于jQuery仿淘宝产品图片放大镜代码分享
这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="
-
用JQuery模仿淘宝的图片放大镜显示效果
如图 今天我做的是利用JQuery模拟这个效果 源码如下 复制代码 代码如下: <head> <script type="text/javascript" src="Js/jquery-1.4.1.js"></script> <script type="text/javascript"> //假设data是从数据库取到的数据 var data = {"images/1_small.jpg&
-
基于jquery实现一张图片点击鼠标放大再点缩小
复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery-1.8.3.min.js"></script> <sc
-
基于jQuery仿淘宝产品图片放大镜特效
在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jquery.zoom等 这些组件大同小异. 大家感兴趣的话可以去百度一下. 本文主要是使用非组件方法来做放大镜效果. 每一张图片都要生成三种尺寸,否则放大镜的效果不会太明显,这里是 54X54 320X320 800X800. 首先看效果:鼠标经过小图时,大图随之切换. 首先是html <div c
-
jquery实现淘宝商品图片局部放大
本篇博文用于简单记录图片放大功能实现,供大家参考,具体内容如下 功能实现还存在一些小漏洞在文章结尾提出,希望各位指正 1.图片放大初考虑将图片转换为字体图片形式,然后进行放大处理,但最终本人技术不过关无法实现,后用width: 200%;进行一般的图片放大,所以当图片越大就存在一些失真: 2.图片放大后的显示为本次实现的关键,通过获取鼠标指针的位置从而获取指针在图片的那一个位置,再以当前位置进行图片放大,放大后将图片进行偏移,偏移量以鼠标指针在原图的位置上获取的left和top值乘以放大倍数就可
-
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
说起来做这个功能还真是一时好奇.前段时间在做一个淘客网站的时候,想到是否能抓取到淘宝商品的买家秀呢?经过一番折腾发现,淘宝商品用户评价信息是通过Ajax来调取的,通过嗅探网址发现,评论数据的请求接口是: https://rate.tmall.com/list_detail_rate.htm?itemId=524394294771&spuId=341564036&sellerId=100414600&order=3¤tPage=1&append=0&
-
JavaScript实现淘宝网图片的局部放大功能
本文实例为大家分享了JavaScript实现淘宝网图片的局部放大的具体代码,供大家参考,具体内容如下 要实现的效果如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo1</title> <style type="text/css"> *{
-
jQuery仿淘宝网产品品牌隐藏与显示效果
本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果.分享给大家供大家参考.具体如下: 这里演示jQuery实现产品品牌隐藏与显示效果,仿淘宝网商品列表的品牌显示与折叠功能,很实用的代码,看了就知道了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-taobao-product-hidden-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
基于JavaScript实现淘宝商品广告效果
本文实例为大家分享了JavaScript实现淘宝商品广告效果的具体代码,供大家参考,具体内容如下 CSS部分: ul{ margin: 0; padding: 0; } li{ list-style: none; } #ad{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; } #ad .listL{ float: left; } #ad .listR{ f
-
python爬虫爬取淘宝商品信息
本文实例为大家分享了python爬取淘宝商品的具体代码,供大家参考,具体内容如下 import requests as req import re def getHTMLText(url): try: r = req.get(url, timeout=30) r.raise_for_status() r.encoding = r.apparent_encoding return r.text except: return "" def parasePage(ilt, html): tr