当前路径: 星河码客 » 插件特效 » jquery图片拖拽查看jquery图片自适应屏幕大小特效

jquery图片拖拽查看jquery图片自适应屏幕大小特效

$(document).ready(function(){ $(".down_showpic").css("width",$(window).width()); $(window).resize(function(){ $(".down_showpic").css("width",$(window).width()); $(".pictio").width($("#picbbox").width()).height($("#picbbox").height()); });});var p_w;var p_h;$(".down_showpic>img").load(function(){ p_w=$(this).width(); p_h=$(this).height(); $(".pictio").width($("#picbbox").width()).height($("#picbbox").height()).css({top:$(this).position().top,left:0}).fadeTo(100, 0.05);})dragpic=-1;dragpicy=-1;$(".pictio").bind({ mousedown: function(e){ //e=event?event:window.event; dragpic=e.pageX || (e.clientX); dragpicy=e.pageY || (e.clientY); if (e.stopPropagation){ // this code is for Mozilla and Opera e.stopPropagation(); e.preventDefault(); }; }, mouseup: function(){ dragpic=-1; },mousemove: function(e){ if(dragpic>=0){ //e=event?event:window.event; dqsb=e.pageX || (e.clientX ); dqsby=e.pageY || (e.clientY ); $(".down_showpic").scrollLeft($(".down_showpic").scrollLeft()+(dragpic-dqsb)) $(document).scrollTop($(document).scrollTop()+(dragpicy-dqsby)) dragpic=dqsb dragpicy=dqsby } },mouseout: function(){ dragpic=-1; }});$(".arc_push1").click(function(){ $(".pictio").width($("#picbbox").width()).height($("#picbbox").height()); $(".down_showpic>img").css({"width":"auto","height":"auto"}); $(document).scrollTop($(".down_showpic").position().top); return false;});$(".arc_push2").click(function(){ w=p_w; h=p_h; boxw=$(window).width() boxh=$(window).height() $(".pictio").width(boxw).height(boxh-$(".downbom").height()); if(w(boxw/boxh)){ $(".down_showpic>img").css({"width":boxw,height:"auto"}); }else{ //$(".down_showpic>img").css("width",boxw); $(".down_showpic>img").css({"width":"auto","height":boxh-$(".downbom").height()}); } } $(document).scrollTop($(".down_showpic").position().top); return false;});$(".arc_push5").click(function(){ w=p_w; h=p_h; boxw=$(window).width() boxh=$(window).height() $(".pictio").width($("#picbbox").width()).height($("#picbbox").height()); if(wimg").css({"width":boxw,height:"auto"}); } $(document).scrollTop($(".down_showpic").position().top); return false;});

jquery图片拖拽查看jquery图片自适应屏幕大小特效

在线演示        积分下载        6毛下载        砍两刀下载       

文件目录······
暂无数据
 猜你喜欢 更多»
 工具推荐 更多»