-
等级
本版专家分：0结帖率 100% -
请教牛人，帮忙给写个京东商城的图片切换放大的代码，最好是ext的，纯js的也行，不要jquery的。帮个忙，谢谢！展开阅读全文
-
等级
本版专家分：7151 -
<style type="text/css">
#div1 { width: 120px; height: 90px; padding: 5px; border: 1px solid #ccc; position: relative; }
#div1 .small_pic { width: 120px; height: 90px; background: #eee; position: relative; }
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }
</style>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aTmp=[];
var i=0;
for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aTmp.push(aEle[i]);
}
}
return aTmp;
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oMark=getByClass(oDiv, 'mark')[0];
var oFloat=getByClass(oDiv, 'float_layer')[0];
var oBig=getByClass(oDiv, 'big_pic')[0];
var oSmall=getByClass(oDiv, 'small_pic')[0];
var oImg=oBig.getElementsByTagName('img')[0];
oMark.onmouseover=function ()
{
oFloat.style.display='block';
oBig.style.display='block';
};
oMark.onmouseout=function ()
{
oFloat.style.display='none';
oBig.style.display='none';
};
oMark.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
if(l<0)
{
l=0;
}
else if(l>oMark.offsetWidth-oFloat.offsetWidth)
{
l=oMark.offsetWidth-oFloat.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>oMark.offsetHeight-oFloat.offsetHeight)
{
t=oMark.offsetHeight-oFloat.offsetHeight;
}
oFloat.style.left=l+'px';
oFloat.style.top=t+'px';
var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
};
};
</script>
</head>
<body>
<div id="div1">
<div class="small_pic">
<span class="mark"></span>
<span class="float_layer"></span>
<img src="wall_s6.jpg" /></div>
<div class="big_pic"><img src="wall6.jpg" /></div>
</div>
</body>
</html>
-
等级
本版专家分：5386
-
-
等级
本版专家分：7151
-
再来一个Jquery版的，
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.3.2.min.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<style>
*
{
margin: 0;
padding: 0;
}
.zoomple
{
cursor: crosshair;
display: block;
width: 150px;
height: 150px;
overflow: hidden;
outline-style: none;
position: relative;
border: 1px solid #aaa;
}
.zoomple img
{
width: 150px;
height: 150px;
border: 0;
}
.zoomplePopup
{
background: #fff;
overflow: hidden;
opacity: 0.5;
filter: alpha(opacity = 50);
z-index: 10;
cursor: crosshair;
height: 40px;
width: 40px;
position: absolute;
top: 0px;
left: 0px;
display: none;
}
/*预览的大图的css*/
#preview
{
border: 1px solid #aaa;
width: 200px;
height: 200px;
position: absolute;
top: 200px;
left: 300px;
overflow: hidden;
display: none;
}
#preview img
{
width: 600px;
height: 600px;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
$(function () {
var zoompos = { x: 0, y: 0 }; //定义一个对象，缓存x,y变量.
var $pre = $("#preview");
var $preimg = $("#preview img");
var p_w = parseInt($preimg.css("width"), 10); //这里不能使用 $preimg.width(). width()方法对隐藏元素无效
var p_h = parseInt($preimg.css("height"), 10);
$(".zoomple").bind("mouseenter", function (e) {
var $this = $(this);
var $zoom = $this.find(".zoomplePopup");
$zoom.show();
$pre.show();
PositionPopupZoom($this, $zoom, e.pageX, e.pageY, p_w, p_h);
$this.bind("mousemove", function (e) {
setTimeout(function () {
PositionPopupZoom($this, $zoom, e.pageX, e.pageY, p_w, p_h);
}, 10);
});
}).bind("mouseleave", function () {
var $this = $(this);
var $zoom = $this.find(".zoomplePopup");
$zoom.hide();
$pre.hide();
$this.unbind("mousemove");
});
/*
wrap : 当前绑定的元素
zoom : 当前绑定的元素里的popupzoom元素
x, y : 当前鼠标在页面上的位置
w, h : 放大的图片的高度和宽度,用来计算比例
*/
function PositionPopupZoom(wrap, zoom, x, y, w, h) {
var wrapLeft = wrap.offset().left;
var wrapTop = wrap.offset().top;
var zoomWidth = zoom.width();
var zoomHeight = zoom.height();
var wrapWidth = wrap.width();
var wrapHeight = wrap.height();
//计算半透明层的x,y.确定它不超出图片
zoompos.x = x - wrapLeft - (zoomWidth / 2);
zoompos.y = y - wrapTop - (zoomHeight / 2);
if (zoompos.x <= 0) {
zoompos.x = 0;
}
if (zoompos.y <= 0) {
zoompos.y = 0;
}
if (zoompos.x + zoomWidth >= wrapWidth) {
zoompos.x = wrapWidth - zoomWidth;
}
if (zoompos.y + zoomHeight >= wrapHeight) {
zoompos.y = wrapHeight - zoomHeight;
}
//放大比例
var xRatio = w / wrapWidth;
var yRatio = h / wrapHeight;
//设置位置
zoom.css({ left: zoompos.x, top: zoompos.y });
$preimg.css({ left: -(zoompos.x * parseInt(xRatio, 10)), top: -(zoompos.y * parseInt(yRatio, 10)) });
}
});
</script>
</head>
<body>
<div style="width: 500px; margin: 20px auto;">
<a href="img/t_big.jpg" class="zoomple">
<img src="img/t.jpg" />
<div class="zoomplePopup">
</div>
</a>
<div id="preview">
<img src="img/t_big.jpg" />
</div>
</div>
</body>
</html>
-
等级
本版专家分：1269 -
-
等级
本版专家分：0
-
还有个底下有多张图片切换的效果，能不给弄下，谢谢！
-
等级
本版专家分：1500
-
1111111
-
等级
本版专家分：0
-
弄好后能不能给打个包，发下，我邮箱是tony_fugang@163.com 不胜感激！！！
-
等级
本版专家分：3225 -
mark
-
等级
本版专家分：23378勋章
-
- 黄花 2011年10月 .NET技术大版内专家分月排行榜第二
-
-
本来想写的，看见说不要用jquery，那算了
- myeclipse写简单bbs代码_贵阳一中学生“不小心”把作业做成了校园BBS？佩服！
贵阳市第一中学的8个学生硬将课题作业做成了校园BBS听起来是不是难以置信？今天的校园达人咱们就来扒一扒这几个让人惊呼“牛”的同学先剧透一下，这个BBS的名字叫“有风知南”，建设时间线如下：3月初着手建设论坛 ...
- 一位从“摸爬滚打”中自学成才的嵌入式牛人自述！
我姓古，毕业于广东一所不怎么知名的本科院校，在校期间就开始合伙开公司创业，目前是XX科技公司创始人兼技术总监在“摸爬滚打”中。我来自农村，从小，我就相信知识改变命运，但是...
- 已拿 offer！一个非 985/211 的普通二本学生从毕业季到职场的面经分享！
自己这么菜B那还值得写，那还好意思拿出来分享，加上抖音动不动就给我推送什么吴翰清，贾扬清这些大佬级别的人物，使我更是觉得自己来人间是充数的（此时让我又想起来了剑圣柳白对战昊天：我与人间全无敌，不与天斗...
- 推荐一位互联网领域的达人，可以工作、生活、写书三不误！
大家好今天如约给大家推荐一位牛人，他就是数据达人刘顺祥，顺祥老师曾在乙方咨询公司负责数十个品牌的数据业务分析，也在甲方电商公司从事互联网金融的分析和挖掘，目前在某外卖平台担任资深商业分析...
- 花百万年薪从阿里挖了个 P8 程序员！难道是“水货”？
点击“开发者技术前线”，选择“星标????”在看|星标|留言, 真爱来源 | InfoQ 作者丨小智 编辑 |可可大厦新搬进来一家创业公司，老板红...
- 他是阿里P11，靠写代码写成合伙人，身家几十亿，没有他，我们可能刷不了淘宝！...
点击“技术领导力”关注∆每天早上8:30推送作者|Mr.K 编辑| Emma来源|技术领导力(ID：jishulingdaoli)他是阿里的“扫地僧”，写代码级别最高的人，一...
- 牛人 就是这样锤炼出来的，中兴资深工程师，嵌入式专家韦东山是这样炼成的！
导读： 还在大学的你，不知道未来何去何从？都说迷茫是大事做不了，小事不想做。还在做程序袁的你，是不是也想创业？程序袁好创业吗？ Linux好学吗？ 学会了这个能找到咋样的工作？...先来个简历：
- 佩服！同样是24小时，他竟然可以做到工作、分享、写书三不误！
大家好,今天给各位推荐一位牛人，他就是数据达人刘顺祥，顺祥老师曾在乙方咨询公司负责数十个品牌的数据业务分析，也在甲方电商公司从事互联网金融的分析和挖掘。除了工作以外，他业...
- 我做错了什么？刚入职一星期，老板给了100块叫我赶紧走人！
所以我写这篇文章呢，就是想要分享一下这几年我总结出的几点心得，给那些正在职场中打拼和即将进入职场的小白们，一点点帮助。 职业路线 不知道大家有没有感触，这个年代虚的东西太多了，实在的东西越来越少。就...
- 再见！大数据！
大数据成神之路Spark/Kafka/Flink/ElasticSearch/Hadoop/Hbase/Hive/Yarn/Kylin/Redis/.../...大数据大神。【过往记忆大...
- 这个公众号到底有没有好文章？我整理了300篇，觉得不好我跪榴莲！
花了6个小时，总算整理好了，嗯，榴莲，真香！大数据成神之路Spark/Kafka/Flink/ElasticSearch/Hadoop/Hbase/Hive/Yarn/Kylin/Red...
- 揭秘前端工程师未来就业方向，年薪50w不是梦！
如今，人工智能技术发展...而火热的深度学习、机器学习、人工智能等岗位，给出的校招年薪25 万人民币，也只是白菜价。（跌镜） 看到这里，作为前端开发者的我们，是不是坐不住了。一阵唏嘘、感叹、羡慕后，什
- 这是谁写的，真实的职场啊，居然有人想去教小孩计算机！
80 后技术人的中年危机 2017年12月26日 00:00:00 ...这是我们终将迎来、走过的坎，只不过，过程各有滋味，在本文中，作者小猿搜题产品技术负责人唐巧分享了包括他在内的 4 个技术人的故事...
- 进了阿里，还是觉得自己很失败！！！
我，一个普普通通的人。普通本科毕业，来到北京成为了一个普通的程序员。 2013年，我本科毕业，然后就踏上了北漂的征程。 来之前想的很清楚。北京技术发达先进。我可以在这里工作三四年，学习成长自己的技术，然后回...
- 强烈推荐一位互联网界的分析达人，真材实料！
大家好今天给大家推荐一位牛人，他就是数据达人刘顺祥，顺祥老师曾在乙方咨询公司负责数十个品牌的数据业务分析，也在甲方电商公司从事互联网金融的分析和挖掘，目前在某外卖平台担任资深商业分析师。...
- 【廖雪峰】史上最浅显易懂的Git教程！
文章目录一瞥史上最浅显易懂的Git教程！1.Git简介Git是什么？Git有什么特点？那什么是版本控制系统？2.Git的诞生3.集中式vs分布式4.创建版本库把文件添加到版本库第...为什么要编写这个教程？因为我在学习Git的过程中，
- 《C++0x漫谈》系列之：Concept, Concept!
《C++0x漫谈》系列之：Concept, Concept! By 刘未鹏(pongba) C++的罗浮宫(http://blog.csdn.net/pongba) 《C++0x漫谈》系列导言 这个系列其实早就想写了，断断续续关注C++0...
- 阿里资深架构师推荐：架构师养成记，走向“人生巅峰”！
我是如何高质量学习的...一门技术，从了解到深入一定会有一个过程，如何做才能让这个学习的过程更快、更好呢？我们可以遵循“Why-How-What”黄金圈思维模式，明确自己做一件事情的目的，也就是为什么要做，想要达到...
- csdn的，精彩连载！
正文第一章 大学 作为一个真正的程序员，首先应该尊重编程，热爱你所写下的程序，他是你的伙伴，而不是工具。 /* */ 我放弃清华计算机专业的保送资格而选择参加高考的消息震撼了全校，从校长到班主任到各科目...
- 我也谈谈执行力(受益非浅)！
最近在博客园里面闲诳，发现谈执行力的两篇文章，这个我比较感兴趣，我也发表了一个评论，其主要主张就是管理者，管人是非常重要的，这个要比管理者自身所掌握的技术重要。我引了《史记》中刘邦说过的一段话“夫运...
- 身家几十亿还在做“码农”：没有他，我们可能刷不了淘宝！
点击“技术领导力”关注∆每天早上8:30推送来源：电商报（ID：kandianshang）韦小宝：“多隆，又是你出卖我？”多隆：“是的韦大人，又是我出卖了你！”阿里写代码级别最高的人...
- 说一件重要的事！菜鸟学Python有网站了
菜鸟学Python这个号累计已经有3年了，不知不觉发表了很多文章，从Python2一路写到Python3。从一开始的Python入门，到Python进阶，趣味游戏，Python爬虫，数据...
- 阿里大牛整理的六大Java进阶技术模块，看完茅塞顿开！
阿里大牛整理的六大Java进阶技术模块，看完茅塞顿开！ 金三银四跳槽旺季，每个人...还是继续每天坚持加班的桥写代码？？？？？？这些问题，只有你们能明白且自己解决。 现在正是需要我们认真考虑的时候，要如何提高...
- 7个方法快速提升你的技术领导力！
首先，我们来看一个问题：什么是优秀的技术领导者？回答这个问题之前，我引用一个技术论坛的招聘贴，“求一名技术经理，岗位要求：上得了厅堂，下得了机房，哄得了...
- Notepad++ 7.9.1
notepad++是一个免费的、开放源码的文本和源代码编辑器。notepad++是用c++编程语言编写的，它以减少不必要的功能和简化过程而自豪，从而创建了一个轻便高效的文本记事本程序。实际上，这意味着高速和易访问的、用户友好的界面。 notepad++已经存在了将近20年，没有任何迹象表明它的受欢迎程度会下降。记事本绝对证明了你不需要投资在昂贵的软件来编写代码从舒适的自己的家。自己尝试一下，你就会明白为什么Notepad能坚持这么久。
- 1天搞定Python进阶课程-数据分析库Pandas
pandas是python中非常常用的数据分析库，在数据分析，机器学习，深度学习等领域经常被使用。本课程会讲解到pandas中核心的一些知识点，包括Series以及DataFrame的构建，赋值，操作，选择数据，合并等等，以及使用pandas对文件进行读取和写入，使用pandas绘图等等。 让大家在短时间内快速掌握python的数据分析库pandas的使用。
- OCJP认证考试复习课
OCJP是甲骨文推出的的国际认证。 本课程由Java总监级讲师专注Java十三年，不但包含OCJP考试全部内容，还特意制作了很有针对性的阶段性项目让学习考取证书的同时获取一定的项目经验。 相关视频 OCJP(Oracle Certified Java Programmer)是Oracle认证的Java程序员的简称，即Sun被Oracle收购之前的SCJP，是Java语言的拥有厂商对全球的Java开发人员进行的 技术水平认证。该认证在国际上获得了IT 公司的普遍认可， 是目前国际上最热门的IT认证之一。
- javaweb mooc在线系统案例实战
讲解在线mooc系统的开发，从需求分析到类图设计，数据库设计，架构设计，代码编写等等。 掌握java web开发实战