- 浏览: 367892 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
云卷云舒灬:
...
Java读取XML配置文件详细总结(dom4j方式) -
ancoa:
多谢博主分享
jQuery实现多选下来框(multiple select) -
aa51513:
图片看不成
java利器---jodd -
wanggang0321:
正在学习中,看完文章了,谢谢写的教程!!!
Tomcat负载均衡和集群环境的搭建 -
yasyas001:
引用
如何实现双(多)语种网站内容的国际化?
闲着无聊,自己做了一个关于淘宝放大镜的效果,方便自己和大家以后急需的时候直接拿过去就可以用。两种方法实现,第一种js,第二种jquery
JS实现
JQ实现
JS实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> body{padding:0px;margin:0px;background:#aaaaaa;} #small_pic{ margin:10px 0 0 10px;width:375px;height:275px;cursor:crosshair; } #zoom{ border:1px solid red;width:120px;height:120px;background:#FFFFFF;position:absolute;top:20px;left:20px; opacity:0.5;filter:alpha(opacity=50); display:none; } #big_pic{ width:240px;height:240px;border:1px solid red;position:absolute;top:10px;left:500px;overflow:hidden;display:none; } </style> <script type="text/javascript"> window.onload = function(){ var small_pic = document.getElementById('small_pic'); var big_pic = document.getElementById('big_pic'); var zoomer = document.getElementById('zoom'); var pic2 =document.getElementById('pic2'); //移动跟随 small_pic.onmousemove = mouseMove; function mouseMove(ev){ ev = ev || window.event; var l = ev.clientX-small_pic.offsetLeft-zoomer.offsetWidth/2; var h = ev.clientY-small_pic.offsetTop-zoomer.offsetHeight/2; if(l<0){l=0;} else if(l>small_pic.offsetWidth-zoomer.offsetWidth){l=small_pic.offsetWidth-zoomer.offsetWidth+1;} if(h<0){h=0;} else if(h>small_pic.offsetHeight-zoomer.offsetHeight){h=small_pic.offsetHeight-zoomer.offsetHeight+1;} document.getElementById("zoom").style.left = l+small_pic.offsetLeft+"px"; document.getElementById("zoom").style.top = h+small_pic.offsetTop+"px"; var percent = big_pic.clientWidth/zoomer.clientWidth; pic2.style.left = big_pic.style.left-percent*l+'px'; pic2.style.top = big_pic.style.top-percent*h+'px'; } small_pic.onmouseover = function(){ zoomer.style.display = 'block'; big_pic.style.display = 'block'; mouseMove(); }; small_pic.onmouseout = function(){ zoomer.style.display ='none'; big_pic.style.display='none'; }; }; </script> </head> <body> <div id="small_pic"> <img id="pic1" src="images/00001.jpg" style="width:375px;height:275px;border:1px solid #aaaaaa;"> <span id="zoom"> </span> </div> <div id="big_pic"> <img id="pic2" src="images/00001.jpg" style="width:750px;height:550px;position:absolute;"> </div> </body> </html>
JQ实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <style> *{ padding:0px; margin:0px; border:0px;} .all{ margin:0 auto; width:960px; } .big{ float:left; width:160px; height:160px; border:2px solid #CCC; padding:3px; margin-top:100px;} .big .small{ width:50px; height:50px; position:absolute; top:0px; left:300px; background:#CFF; opacity:0.75; display:none;} .big .show{ width:275px; height:150px; padding:3px; position:absolute; top:100px; left:500px; display:none; background:url(images/00001.jpg) no-repeat left top; border:1px solid #666;} </style> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script> var topset=0; var leftset=0; $(document).ready(function(e) { $(".big").mouseleave(function(){ $(".small").css({"top":LTY,"left":LTX,"display":"none"}); $(".show").css("display","none"); }).mousemove(function(e){ topset=$(this).offset().top; leftset=$(this).offset().left; if(e.pageX<185) LTX=160; else if(e.pageX>301) LTX=276; else LTX=e.pageX-25; if(e.pageY<125) LTY=100; else if(e.pageY>241) LTY=221; else LTY=e.pageY-25; $(".small").css({"top":LTY,"left":LTX,"display":"block"}); position_x="-"+Math.round((LTX-160)/160*550)+"px"; position_y="-"+Math.round((LTY-100)/160*375)+"px"; pl=position_x+" "+position_y; $(".show").css({"display":"block","background-position":pl}); }); }); </script> <body> <div class="all"> <div class="big"> [img]images/00001.jpg" width="160px;" height="160px[/img] <div class="small"></div> <div class="show"></div> </div> </div> </body> </html>
评论
2 楼
nicegege
2012-06-28
1 楼
coding1688
2012-06-28
推荐jqZoom插件,下面是它的演示站点
http://www.mind-projects.it/projects/jqzoom/demos.php#demo1
http://www.mind-projects.it/projects/jqzoom/demos.php#demo1
发表评论
-
jQuery实现多选下来框(multiple select)
2013-05-28 15:25 15757<script type="text/j ... -
Jquery选择器,选择ID以"某某"字符开头的一组文本框只能输入数字
2013-05-28 14:56 12543<script type="text/ ... -
Jackson 框架,轻易转换JSON
2013-04-27 10:12 1204本文章转自:http://www.cnblogs.com/h ... -
highcharts 时间少8小时问题
2013-02-21 16:43 1718highcharts 中默认开启了UTC(世界标准时间),由 ... -
highcharts中x轴曲线不连续时的解决办法
2013-01-25 12:09 8551如上所示,两点之间发生断裂。 两个点之间差距过大时,显示 ... -
Highcharts和Highstock实例(包括折线图,饼图,柱状图)
2013-01-24 15:35 160831. highcharts实例代码,其中导出功能没有配置本地 ... -
选择框(select)添加或者减少选项(option)操作的js代码
2012-11-13 11:17 987选择框(select)添加或者减少选项(option)操作的j ... -
js 数组对象的操作方法
2012-10-31 17:06 1113注意:以下是按操作来分类的,有的方法有多个用途,就有重复 1 ... -
js 数组对象的操作方法
2012-10-31 17:03 952注意:以下是按操作来分类的,有的方法有多个用途,就有重复 1 ... -
Jquery解析json
2012-08-16 18:11 1113jQuery解析JSON,通过异步调用的方式从服务器端获取对象 ... -
Jquery JSON操作应用
2012-08-16 18:07 1703今天闲暇时间没事,看到群里有人询问json数据操作,然后回顾一 ... -
下拉列表,动态初始化前天日期
2012-07-18 10:51 983此段代码效果为:在首次访问该页面的时候,下拉列表,自动选中前天 ... -
纯js分页
2012-07-03 18:33 1209做项目时偶尔有需求:数据一次性加载到页面同时还要实现分页,此时 ... -
js的时间比较大小
2012-07-03 15:45 15992js对于2011-10-10 00:10:26时间类型格式进行 ... -
Jquery常用方法总结
2012-05-10 10:11 1204$(”p”).addClass(css中定义的样式类型); 给 ... -
jquery 根据name属性获取对象(=document.getElementByName("") )
2012-05-10 10:04 6540<html> <h ... -
jquery 根据name属性获取对象(=document.getElementByName("") )
2012-05-10 10:02 0<html> <h ... -
Jquery和JS的加载事件区别
2012-05-08 11:42 12581.执行时间: window ... -
JS时间控件
2012-05-02 14:57 1918附件为JS的一个时间控件,可直接下载使用,移植性强。 同时 ... -
JS时间比较
2012-05-02 14:48 3614js日期比较函数: 和大家分享一下一个js时间比较的js函数 ...
相关推荐
jquery图片放大镜插件是一款简单实用的jQuery图片放大镜效果,点击缩略图可以切换大图,鼠标划过大图出现放大镜图片,可拖动放大镜区域查看图片细节,类似淘宝放大镜代码,适用于电子商务网站使用。
代码简介:电商网站jQuery放大镜代码是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。
jquery图片放大镜插件是一款简单实用的jQuery图片放大镜效果,点击缩略图可以切换大图,鼠标划过大图出现放大镜图片,可拖动放大镜区域查看图片细节,类似淘宝放大镜代码,适用于电子商务网站使用。
android 图片的放大镜功能 源代码(正方形放大镜) 类似淘宝 简单实现
js实现放大镜 (可以点击切换图片)
jQuery实现类似淘宝商品图片展示、图片放大镜,鼠标移动至图片时放大该图片当前鼠标停留位置!
类似淘宝详情页的放大镜效果,模板代码,拿过来修改即可使用
jquery图片放大镜插件是一款简单实用的jQuery图片放大镜效果,点击缩略图可以切换大图,鼠标划过大图出现放大镜图片,可拖动放大镜区域查看图片细节,类似淘宝放大镜代码,适用于电子商务网站使用。
android 图片的放大镜功能 源代码(正方形放大镜) 类似淘宝 简单实现.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
电商网站jQuery放大镜代码是一款基于jquery elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。
jQuery商品放大镜预览代码是一款类似淘宝商品主图放大显示特效下载。
电商网站jQuery放大镜代码是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。
类似与淘宝产品展示的放大图效果 点击小图展示大图,大图上有商品放大镜的js特效
jQuery商品放大镜预览代码是一款类似淘宝商品主图放大显示特效下载。
JS实现局部放大效果(类似于淘宝商品显示局部放大)
类似于淘宝宝贝描述详情页中,查看宝贝图片时,鼠标移上去出现的放大镜效果。
简单实用jQuery图片放大镜效果,点击缩略图可以切换大图,鼠标经过大图出现放大镜图片效果,可拖动放大镜区域查看图片细节,类似淘宝放大镜代码,适用于电子商务网站使用。代码附带详细中文注释,方便用户修改。