<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常用代碼 > 圖片相冊

    jquery實現鼠標懸停圖片居中放大特效代碼

    發布時間:2015-09-25 13:53:55    您是第0位瀏覽者

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

    jquery實現鼠標懸停圖片居中放大特效代碼
    $(function() {
    	//模塊初始化
    	imgZoomInit();
    })
    
    function imgZoomInit() {
    	$('.piclist li.pic').append(function() {
    		ht = $(this).find('.in').html();
    		return "<div class='original'>" + ht + "</div>";
    	});
    
    	$(".piclist li.pic .in img").each(function(i) {
    		var img = $(this);
    		var realWidth; //原始寬度
    		var realHeight; //原始高度
    		var vs; //圖片寬高比
    
    		realWidth = this.width;
    		realHeight = this.height;
    		vs = realWidth / realHeight;
    
    		//縮略圖比例230:142(約等于1.62)
    		if (vs >= 1.62) { //橫圖則固定高度
    			$(img).css("width", "auto").css("height", "142px").css("marginLeft", 115 - (71 * realWidth / realHeight) + "px");
    		} else { //豎圖則固定寬度
    			$(img).css("width", "230px").css("height", "auto").css("marginTop", 71 - (115 * realHeight / realWidth) + "px");
    		}
    
    		//圖片放大水平垂直居中顯示
    		if (vs >= 1) { //橫圖或正方形
    			$(img).parent().parent().parent().find('.original img').height(260);
    			$(img).parent().parent().parent().find('.original img').width('auto');
    			$(img).parent().parent().parent().find('.original').css({
    				//此處需結合實際情況計算 左偏移:.original實際寬度的二分之一
    				marginLeft: function() {
    					return -(130 * realWidth / realHeight) - 6;
    				},
    				left: '50%'
    			})
    		} else { //豎圖
    			$(img).parent().parent().parent().find('.original img').width(260);
    			$(img).parent().parent().parent().find('.original img').height('auto');
    			$(img).parent().parent().parent().find('.original').css({
    				//此處需結合實際情況計算 上偏移:.original實際高度的二分之一
    				marginTop: function() {
    					return -(130 * realHeight / realWidth) - 36;
    				},
    				top: '50%'
    			});
    			$(img).parent().parent().parent().find('.original b').css('display', 'block')
    		}
    	});
    
    
    	$('.piclist li.pic').hover(function() {
    		$(this).addClass('on');
    	}, function() {
    		$(this).removeClass('on');
    	})
    
    	$(".piclist ul li:nth-child(4n)").addClass('r');
    }



    鼠標懸停 圖片居中 放大特效

    jquery鼠標懸停圖片高亮,從左邊滑動出標題信息顯示效果

    Css3鼠標懸停圖片高亮特效

    jQuery鼠標懸停導航底部邊框線條伸縮動畫效果

    jQuery鼠標懸停內容動畫切換效果

    jQuery鼠標懸停在圖片上顯示說明按鈕的HoverEx插件

    jquery hover網頁左側鼠標懸停列表改變菜單樣式特效

    jquery仿win8風格的圖片九宮格布局,鼠標懸停圖片文字切換特效

    jquery實現鼠標懸停九宮格圖片高亮顯示特效

    jquery實現中英文字切換導航條,鼠標懸停滑動下拉二級導航菜單

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

    jquery實現九宮格圖片鼠標懸停上下滑動切換特效

    js特仿flash導航條鼠標懸停上下文字滑動特效

    html5實現鼠標懸停圖片動畫展示特效

    jquery實現鼠標懸停彈出消息提示框特效

    jquery實現鼠標懸停圖片動畫顯示文字信息特效

    jquery實現鼠標懸停圖片突出顯示大圖,另外帶標簽關鍵詞功能

    css3實現鼠標懸停特效代碼

    jquery實現鼠標懸停圖片遮罩文字從左滑出特效代碼

    jquery鼠標懸停向上滑出顯示標題文字特效代碼

    jquery鼠標懸停縮略圖、實現放大跟隨展示大圖片特效代碼

    青海快3 www.jsjingming.com:金湖县| www.kpzhw.cn:南溪县| www.booksgratis.com:香格里拉县| www.steinblogger.com:高淳县| www.zlqfw.cn:合作市| www.divided-games.com:平湖市| www.sxshangle.com:西青区| www.myo89.com:灌南县| www.bbn365.com:蒲江县| www.cp7576.com:嘉定区| www.almadatech.com:宜都市| www.activin-t.com:舞阳县| www.legallois-ycymro.com:延边| www.979903.com:东城区| www.v8f4.com:连山| www.therapycenterkita.com:阿瓦提县| www.face53.com:万荣县| www.brushhairandmakeup.com:大邑县| www.webz-international.com:自贡市| www.geyikmakinesi.com:绥江县| www.danfcamera.com:望谟县| www.publicjusticeforum.org:年辖:市辖区| www.brnpx.com:普宁市| www.buycartierwatches.com:赤水市| www.mizu16.com:榆树市| www.soupesasoups.com:丁青县| www.51peiyi.com:六安市| www.troninvestlimited.com:筠连县| www.fulibat.com:吴忠市| www.rglc120.com:赣榆县| www.zghnfzw.com:连州市| www.bostonsalist.com:边坝县| www.dk992.com:凤山县| www.waitanka.com:台山市| www.ther15.com:博罗县| www.pikaglass.com:柳州市| www.bcsdi.com:五河县| www.aidu49.com:龙岩市| www.tangyangshop.com:舟山市| www.idccommunity.com:安义县| www.rncjw.cn:闵行区| www.curtisdemarce.com:玛纳斯县| www.acssecuritygroup.com:伽师县| www.tjmtw.com:金阳县| www.ykw100.com:宝山区| www.domshin.com:柳林县| www.liwreo.com:饶平县| www.pmdsales.com:伊金霍洛旗| www.nishiyama-shotengai.net:德兴市| www.nightsailer.com:镇雄县| www.midvalleyhosting.com:延寿县| www.r9892.com:新龙县| www.tynale.com:墨竹工卡县| www.gear168.com:卓尼县| www.fulibat.com:临洮县| www.timphimhay.com:张家口市| www.wine2africa.com:南召县| www.medicalspaofrye.com:中山市| www.firmware-drivers.com:柳江县| www.curvy-lady.com:孟津县| www.katepattison.com:玉林市| www.katherineboliek.com:沅江市| www.youetme.com:庆安县| www.voilayl.com:林口县| www.shblcht.com:黎城县| www.j5dd.com:香港| www.yongbeikeji.cn:昭觉县| www.82aaaa.com:宁德市| www.maestroluggage.com:麟游县| www.potap-nastya.net:莱州市| www.xingfu52.com:米易县| www.yysjx.com:连南| www.aacang.com:达拉特旗| www.wpudining.com:佛学| www.hohgcn.com:永泰县| www.tgtxw.com:利津县| www.lettresamontaigne.net:舟曲县| www.szmedspa.com:墨竹工卡县| www.cp9221.com:永宁县| www.a-leap-of-faith.com:泉州市| www.j5dd.com:西城区| www.clickablevideoads.com:平阳县| www.manytronics.com:温泉县| www.f9676.com:广州市|