<cite id="uab1u"></cite><rp id="uab1u"><nav id="uab1u"></nav></rp>
  1. <tt id="uab1u"><form id="uab1u"><delect id="uab1u"></delect></form></tt><tt id="uab1u"><form id="uab1u"><delect id="uab1u"></delect></form></tt>
  2. <tt id="uab1u"><noscript id="uab1u"><delect id="uab1u"></delect></noscript></tt>
  3. js代碼_js特效免費下載_JS特效代碼網   網頁特效   鼠標特效   js圖片相冊   js特效代碼大全
    當前位置:首頁 > 網頁特效 > JS常用代碼 > 圖片相冊

    js實現圖片放大鏡展示特效代碼

    發布時間:2015-09-10 20:50:22    您是第0位瀏覽者

    本js特效代碼兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等瀏覽器

    js實現圖片放大鏡展示特效代碼
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
    <html xmlns="http://www.w3.org/1999/xhtml">    
    <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <title>js實現圖片放大鏡展示特效代碼</title>    
    <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 .small_pic img{width: 120px; height: 90px;}    
    #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: 140px; 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>



    放大鏡

    jqzoom仿京東商品詳細頁產品圖片放大鏡特效

    jquery仿淘寶圖片放大鏡特效

    jquery實現圖片放大鏡插件,鼠標懸停局部圖片放大鏡頭顯示特效

    jquery實現圖片放大鏡效果制作變焦鏡頭圖片放大查看特效

    jquery實現input表達輸入文字,文字放大鏡特效

    js實現圖片放大鏡展示特效代碼

    jQuery商城網站商品放大鏡查看效果特效代碼

    js放大鏡 _jquery圖片放大鏡特效插件_移動鼠標圖片特效代碼_商城源碼

    青海快3 www.peregrinereads.org:新巴尔虎右旗| www.viralcoins.com:凌源市| www.544680.com:泰兴市| www.pchelpdoc.com:江孜县| www.egehannakliyat.com:伊吾县| www.romanyrestaurant.com:清原| www.oxycodonestore.com:牡丹江市| www.vacationsmaker.com:垣曲县| www.aggielandmarks.com:贡山| www.eprsdxx.com:厦门市| www.pieelectronics.com:金山区| www.projectstarshipx.com:昌都县| www.geile-sexdate.com:兰西县| www.bwpha.com:大连市| www.hokhauhanoi24h.com:宁国市| www.q8685.com:资兴市| www.ccnaexamstudy.com:逊克县| www.zhiweifurniture.com:湟中县| www.akpartiguzelbahce.com:奈曼旗| www.rcybgg.com:乌兰察布市| www.ipslo.com:乐安县| www.lnkqxx.com:怀远县| www.creantik.com:溧阳市| www.dawntoner.com:大化| www.022tjhj.com:海盐县| www.citiestoashes.com:静乐县| www.hflsggc.com:邓州市| www.3eew.com:凌源市| www.xishimeiecuador.com:察雅县| www.305182.com:洞头县| www.jiahaoco.com:手机| www.elliswoodcollection.com:沾益县| www.sijitc.com:屏东市| www.kitchentechnique.net:普宁市| www.uncanventional.com:全椒县| www.5i7du.com:衡东县| www.plg-light.com:张掖市| www.biberhapisatinal.com:桦甸市| www.114767.com:车险| www.unichina-tech.com:德令哈市| www.zgfysy.com:新化县| www.bestpicsforyou.com:鲁山县| www.vincentgrison.com:理塘县| www.ericemily.com:赤水市| www.fzjiaolun.com:惠水县| www.diextro.com:翁源县| www.temp-abc.com:缙云县| www.specificatii.com:阿克陶县| www.aw368.com:万安县| www.bjxdby.com:筠连县| www.e-andac.com:淮北市| www.shermantheband.com:西宁市| www.silviatenenti.com:灌南县| www.hongtaitiyu.com:桂阳县| www.cyber-sst.com:阿勒泰市| www.imageislife.com:三明市| www.geile-sexdate.com:蕉岭县| www.autocrz.com:弥勒县| www.w-wha.org:固安县| www.farukfunclub.com:新巴尔虎右旗| www.groupe-avram.com:清丰县| www.booksgratis.com:顺昌县| www.ikanbawal.com:巴彦淖尔市| www.cdynz.cn:类乌齐县| www.640206.com:板桥市| www.storevalentine.com:九龙城区| www.hitsandlyrics.com:谷城县| www.akaeno.com:河津市| www.jswenzhuomjg.com:广汉市| www.hg20704.com:永泰县| www.maltavizesi.net:长武县| www.dg-dacheng.com:长乐市| www.mfnxb.com:竹溪县| www.classifiedscolumn.com:聊城市| www.charlescountytoday.com:进贤县| www.merryzoe.com:荣昌县| www.z5838.com:清水县| www.chevroletbandung.com:白城市| www.rpgint.com:永城市| www.douooo.com:夏河县| www.kk43kk.com:博乐市| www.wentiangouwu.com:贵州省| www.bearmouthrvpark.com:汉川市| www.cp0855.com:霸州市|