请教牛人给写个代码！！！！！！！！！！！-CSDN论坛

⋅咨询下搞开发的下一代是不是生的女孩居多！！ ⋅请教牛人给写个代码！！！！！！！！！！！ ⋅工作了，可是不知道该做什么！ 更多帖子 关注空间博客 tony_fugang 本版专家分：0 结帖率 100%: 请教牛人，帮忙给写个京东商城的图片切换放大的代码，最好是ext的，纯js的也行，不要jquery的。帮个忙，谢谢！

0 2011-10-14 13:18:05

回复数 21 只看楼主引用举报楼主

⋅求sql 语句或解决方案 ⋅求救 ⋅定时执行事件 更多帖子 关注空间博客 aiya1229 本版专家分：135: 呵呵居然没人稀罕

0 2011-10-14 13:31:35

只看TA 引用举报 #1 得分 5

⋅多年没有回来了，看看老朋友 ⋅(转):论人生、论理想 ⋅小苍天天发蛋贴cao斑竹加分，我也发一个试试 更多帖子 关注空间博客 弦弦 本版专家分：7156



<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>

0 2011-10-14 13:31:56

只看TA 引用举报 #2 得分 20

⋅这个oracle函数的字符拼接怎么做 ⋅请教下json字符串转datatable出现问题 ⋅job不执行了 更多帖子 关注空间博客 CalvinR 本版专家分：5391: 0 2011-10-14 13:37:22

只看TA 引用举报 #3 得分 0

⋅多年没有回来了，看看老朋友 ⋅(转):论人生、论理想 ⋅小苍天天发蛋贴cao斑竹加分，我也发一个试试 更多帖子 关注空间博客 弦弦 本版专家分：7156

再来一个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>

0 2011-10-14 13:37:37

只看TA 引用举报 #4 得分 10

⋅用.NET或C#如何实现生产看板，原理是什么？ ⋅VS2012引用OracleClient失败，如何连接Oracle数据库 ⋅MVC跨控制器Controller访问\调用\跳转，问题请教 更多帖子 关注空间博客 翘楚时代 本版专家分：1269: 0 2011-10-14 13:37:56

只看TA 引用举报 #5 得分 5

⋅咨询下搞开发的下一代是不是生的女孩居多！！ ⋅请教牛人给写个代码！！！！！！！！！！！ ⋅工作了，可是不知道该做什么！ 更多帖子 关注空间博客 tony_fugang 本版专家分：0: 还有个底下有多张图片切换的效果，能不给弄下，谢谢！

引用 2 楼 nevermore_0923 的回复:
HTML code

<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……

0 2011-10-14 13:58:34

只看TA 引用举报 #6 得分 0

⋅=== sswp7这种大学生真没素质，建议管理员封杀他 === ⋅大家评理！！！现在的大学生好狂啊！！！ ⋅麻痹！！！北大青鸟这么悲剧吗？ 更多帖子 关注空间博客 sihonglaoren 本版专家分：1500: 1111111

0 2011-10-14 13:59:36

只看TA 引用举报 #7 得分 5

⋅咨询下搞开发的下一代是不是生的女孩居多！！ ⋅请教牛人给写个代码！！！！！！！！！！！ ⋅工作了，可是不知道该做什么！ 更多帖子 关注空间博客 tony_fugang 本版专家分：0: 弄好后能不能给打个包，发下，我邮箱是tony_fugang@163.com 不胜感激！！！

0 2011-10-14 14:01:02

只看TA 引用举报 #8 得分 0

⋅求 paypal 退款 api 示例 asp.net 版本 ⋅css3 试下天猫首页加载那个换衣服的加载中的效果 ⋅边框上下左右不同颜色的问题 更多帖子 关注空间博客 暗尘掩月 本版专家分：3225: mark

0 2011-10-14 14:02:16

只看TA 引用举报 #9 得分 5

⋅ob_end_clean 出错了，求教！！！ ⋅JS动态设置IMG的SRC，Firebug使用查看问题 ⋅咨询一下Mono新版本信息、是否支持EF和前景 更多帖子 关注空间博客 风骑士之怒 本版专家分：23388 黄花 2011年10月 .NET技术大版内专家分月排行榜第二: 本来想写的，看见说不要用jquery，那算了

0 2011-10-14 14:04:51

只看TA 引用举报 #10 得分 5

⋅咨询下搞开发的下一代是不是生的女孩居多！！ ⋅请教牛人给写个代码！！！！！！！！！！！ ⋅工作了，可是不知道该做什么！ 更多帖子 关注空间博客 tony_fugang 本版专家分：0: jquery和项目里有可能会有冲突，所以不让用！

引用 10 楼 wknight_it 的回复:
本来想写的，看见说不要用jquery，那算了

0 2011-10-14 14:06:27

只看TA 引用举报 #11 得分 0

⋅ob_end_clean 出错了，求教！！！ ⋅JS动态设置IMG的SRC，Firebug使用查看问题 ⋅咨询一下Mono新版本信息、是否支持EF和前景 更多帖子 关注空间博客 风骑士之怒 本版专家分：23388 黄花 2011年10月 .NET技术大版内专家分月排行榜第二: 引用 11 楼 tony_fugang 的回复:
jquery和项目里有可能会有冲突，所以不让用！

引用 10 楼 wknight_it 的回复:
本来想写的，看见说不要用jquery，那算了

怎么可能，不要告诉我是$冲突，，，
这个是可以替换的

0 2011-10-14 14:07:52

只看TA 引用举报 #12 得分 5

⋅咨询下搞开发的下一代是不是生的女孩居多！！ ⋅请教牛人给写个代码！！！！！！！！！！！ ⋅工作了，可是不知道该做什么！ 更多帖子 关注空间博客 tony_fugang 本版专家分：0: 引用 12 楼 wknight_it 的回复:
引用 11 楼 tony_fugang 的回复:
jquery和项目里有可能会有冲突，所以不让用！

引用 10 楼 wknight_it 的回复:
本来想写的，看见说不要用jquery，那算了

怎么可能，不要告诉我是$冲突，，，
这个是可以替换的

经理不让用我也没办法，就让搞js的或者ext的。

0 2011-10-14 14:11:39

只看TA 引用举报 #13 得分 0

⋅咨询下搞开发的下一代是不是生的女孩居多！！ ⋅请教牛人给写个代码！！！！！！！！！！！ ⋅工作了，可是不知道该做什么！ 更多帖子 关注空间博客 tony_fugang 本版专家分：0: 没有人了吗？还没解决啊！快来人啊！

0 2011-10-19 09:34:50

只看TA 引用举报 #14 得分 0

⋅如何自己拦截有哪些sql语句执行了. 类似miniprofiler功能. ⋅asp有哪些好的开发框架? ⋅[散粉]莫言, 莫言, 莫言, 呃, 挺多的. 更多帖子 关注空间博客 kkbac 本版专家分：13871: 上面不是给出代码了吗?

0 2011-10-19 10:19:37

只看TA 引用举报 #15 得分 5

⋅咨询下搞开发的下一代是不是生的女孩居多！！ ⋅请教牛人给写个代码！！！！！！！！！！！ ⋅工作了，可是不知道该做什么！ 更多帖子 关注空间博客 tony_fugang 本版专家分：0: 那个效果出不来呢？

引用 15 楼 kkbac 的回复:
上面不是给出代码了吗?

0 2011-10-20 10:53:35

只看TA 引用举报 #16 得分 0

⋅咨询下搞开发的下一代是不是生的女孩居多！！ ⋅请教牛人给写个代码！！！！！！！！！！！ ⋅工作了，可是不知道该做什么！ 更多帖子 关注空间博客 tony_fugang 本版专家分：0: 这个要实现两个功能，一个是有图片的列表，还有就是要放大的功能！！！！大家帮帮忙吧！

0 2011-10-20 10:56:22

只看TA 引用举报 #17 得分 0

⋅小女子求救--关于数据库远程问题.谢谢! ⋅vb.net中如何将类变量赋值给接口变量呢？？？急！！！ ⋅win7 下配置dsn连接SQL数据库总是不成功，怎么回事呢？？？求救！！！急急急~！！！ 更多帖子 关注空间博客 邢海芳 本版专家分：212: [<html>
<head>
<title>JS图片放大特效</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body {
background: #000;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#screen span {
position:absolute;
overflow:hidden;
border:#FFF solid 1px;
background:#FFF;
}
#screen img{
position:absolute;
left:-32px;
top:-32px;
cursor: pointer;
}
#caption, #title{
color: #FFF;
font-family: georgia, 'times new roman', times, veronica, serif;
font-size: 1em;
text-align: center;
}
#caption b {
font-size: 2em;
}
</style>
<script type="text/javascript">
</script></head><body>
<div style="position: absolute; left: 50%; top: 50%;">
<div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;"></div>
<div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></div>
<div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" alt=""></span>
<span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" alt=""></span>
<span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" alt=""></span>
<span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" alt=""></span>
<span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" alt=""></span>
<span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" alt=""></span>
<span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" alt=""></span>
<span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im18.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im18.jpg" alt=""></span>
<span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im8.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im8.jpg" alt=""></span>
<span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im10.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im10.jpg" alt=""></span>
<span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im12.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im12.jpg" alt=""></span>
<span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im17.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im17.jpg" alt=""></span>
<span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im14.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im14.jpg" alt=""></span>
<span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im15.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im15.jpg" alt=""></span>
<span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im16.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im16.jpg" alt=""></span>
<span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im9.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im9.jpg" alt=""></span>
</div>
<div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;"><b>carefully</b> weight the options</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>

][/code]

再改改代码中图片的地址，最后再以html类型保存就可以了

0 2011-10-20 11:33:15

只看TA 引用举报 #18    得分 30

⋅你，他，她，它 ⋅匆匆过去了5年 ⋅悲催的程序员 更多帖子 关注空间博客 七爷 本版专家分：1089: 引用 13 楼 tony_fugang 的回复:
经理不让用我也没办法，就让搞js的或者ext的。

jquery归根到底不还是js,埃，懒得说

0 2011-10-20 11:53:38

只看TA 引用举报 #19 得分 5

⋅咨询下搞开发的下一代是不是生的女孩居多！！ ⋅请教牛人给写个代码！！！！！！！！！！！ ⋅工作了，可是不知道该做什么！ 更多帖子 关注空间博客 tony_fugang 本版专家分：0: 挺好看的我很喜欢！！

引用 18 楼 xhf55555 的回复:
[<html>
<head>
<title>JS图片放大特效</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body {
background: #000;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height:……

0 2011-10-21 09:36:47

只看TA 引用举报 #20 得分 0

⋅咨询下搞开发的下一代是不是生的女孩居多！！ ⋅请教牛人给写个代码！！！！！！！！！！！ ⋅工作了，可是不知道该做什么！ 更多帖子 关注空间博客 tony_fugang 本版专家分：0: 这个没办法啊！好像是框架的原因，说不好！

引用 19 楼 woainikeaibibi 的回复:
引用 13 楼 tony_fugang 的回复:

经理不让用我也没办法，就让搞js的或者ext的。

jquery归根到底不还是js,埃，懒得说

0 2011-10-21 09:37:34

只看TA 引用举报 #21 得分 0

请教牛人给写个代码！！！！！！！！！！！ [问题点数：100分，结帖人tony_fugang]