解决方案
批量建站
数据采集
数据服务
关键词挖掘
定制网站
  • 模板中心
  • 建站软件
  • 联系我们
  • 教程与帮助
    教程中心
    升级日志
    建站论坛
  • 您现在的位置: 365建站网 > 365学习 > 利用jQuery UI 实现图片局部放大

    利用jQuery UI 实现图片局部放大

    文章来源:365jz.com     点击数:741    更新时间:2009-09-18 10:15   参与评论
    图示


    与 “利用jQuery UI 实现图片部份截取 ”相同,只是代码微有调整

    HTML
    id="quen" 为截取框
    id="c" 为整个图片框
    id="e" 为截取后的框

    <div style='width:732px;height:458px' id='c'>
        
    <div id='quen' style='position:absolute;top:0px;left:0px;border:solid 2px blue;width:100px;height:100px'>
            
    <div id='quen2' style='background:red;width:100%;height:100%'></div>
        
    </div>
        
    <img src='1.jpg' />
    </div>
    <br/><br/><br/>
    <div style='position:absolute;overflow:hidden;width:200px;height:200px'>
        
    <div id='e' style='position:relative;'>
            
    <img src='1.jpg' width='1464' height='916'/>
        
    </div>
    </div>

    JS

    $(function() {
        $(
    "#quen2").CSS({opacity:0}); //初始化移动框为透明
        $(
    "#quen").css({top:$("#c img").offset().top,left:$("#c img").offset().left}) //移动框的初始位置放在图片顶部
        
    .draggable({
            containment
    :"parent", //只能在父元素中拖动
            drag
    :function(e,ui){
                
    //动态改变取图框的位置
                $(
    "#e").css({left:"-"+ui.position.left*2+"px",top:"-"+ui.position.top*2+"px"});
            }
        })
        
    .resizable({
            handles
    :"n,e,s,w,se,sw,ne,nw",
            minHeight
    :30,
            minWidth
    :30,
            maxHeight
    :458,
            maxWidth
    :732,
            resize
    :function(e,ui){
                
    //动态改变图框的大小
                $(
    "#e").parent().css({width:ui.size.width*2,height:ui.size.height*2});
            }
        });
    });

    结果演示

    下载范例

    收藏与分享
    Tag标签: jQueryUI

    如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


    发表评论 (741人查看0条评论)
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码: 点击我更换图片
    最新评论
    ------分隔线----------------------------