网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 论文素材 设计下载 最新论文 下载排行 论文上传 在线投稿 联系我们
返回网学首页
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 网页素材 > AJAX代码 > 正文
兼容IE,Firefox,Chrome 的圆形放大镜效果
来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 11/01/18

先看演示地址:http://www.besteast.com/demo/1.htm

放大镜效果的原理简单,很多人都用过、写过。

 


难点在圆形,因为大图超出圆形区域的部分无法遮罩。

废话少说,直接爆原理:

 

1. Firefox和Chrome中,用 css

-moz-border-radius:105px;
-webkit-border-radius:105px;

来实现一个圆形DIV容器,然后把图片作为容器的背景图片,移动的时候,调整对象的 backgroundPosition;

 

2. IE中,用 Chroma 滤镜配合一个四角PNG来使四个圆角透明

<div style="filter:chroma(color=red);background:url("大图地址")"><img src="四个圆角区域为红色,中间圆形区域透明的PNG图片"/></div>

贴出完整源码

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:v="urn:schemas-microsoft-com:vml"
      xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>放大镜演示</title>
<!--[if !mso]>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<![endif]-->
<script type="text/javascript" src="http://admin.membrane-solutions.com/public/"></script>
<script type="text/javascript" src="http://admin.membrane-solutions.com/public/js/jquery.Drag.js"></script>
</head>
<body>

<div id="divBox" style="position:absolute;left:100px;top:100px;">
<div id="divBG" style="background:url(''sky.jpg'') no-repeat;width:512px;height:384px;position:absolute;left:0px;top:0px;"><img src=/uploadfile/201101/18/70105334173.jpg" width="512" height="384"/></div>
<div id="divMask" style="background:#FFF;width:512px;height:384px;position:absolute;left:0px;top:0px;"></div>
<div style="position:absolute;left:0px;top:0px;width:155px;height:158px;cursor:pointer;" id="divM">
    <div style="width:210px;height:210px;background:url(''sky.jpg'') no-repeat -100px -100px;position:absolute;-moz-border-radius:105px;-webkit-border-radius:105px;border-radius:105px;left:0px;top:0px;z-index:1;filter:chroma(color=red);" id="divP"><img src=/uploadfile/201101/18/04105334706.png"/></div>
    <div style="width:239px;height:239px;background:url(''r.png'') no-repeat;position:absolute;left:-13px;top:-13px;z-index:2;"></div>
</div>
</div>

</body>

<script language="javascript">
/*Copyright by 疯子阿飞 xiarugu@163.com */
function class_Form($)
{
    var divM=$("#divM");
    var divBox=$("#divBox");
    var divP=document.getElementById("divP");

    this.Init=function()
    {
        $("#divMask").fadeTo(0,0.7);
        if(!$.browser.msie)
            $(divP).find("img").hide();

        var pos=divBox.offset();
        divBox[0].pos=pos;
        //divBox.bind("mousemove",divM_Drag);
        divM.bind("drag",divM_Drag);
    }

    function divM_Drag(e)
    {
        //e.offsetX=e.clientX-this.pos.left-110;
        //e.offsetY=e.clientY-this.pos.top-110;
        var w=-50;
        var mX=512-155;
        var mY=384-155;
        var x=e.offsetX-divBox[0].pos.left;
        var y=e.offsetY-divBox[0].pos.top;

        if(x<w)
            x=w;
        else if(x>mX)
            x=mX;
        if(y<w)
            y=w;
        else if(y>mY)
            y=mY;

        divM[0].style.left=x+"px";
        divM[0].style.top=y+"px";

        x=x*2+100;
        y=y*2+100;

        divP.style.backgroundPosition=(-x)+"px "+(-y)+"px";
    }
}
$.Init(class_Form);
</script>
</html>

  • 下一篇资讯: js 清空所有checkbox
  • 网学推荐

    免费论文

    原创论文

    浏览:
    设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
    版权所有 电话:013574892963 QQ:3710167 邮箱:Educs@163.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2015 Www.myeducs.Cn All Rights Reserved
    湘ICP备09003080号