滑動顯示大圖升級版

時間 2020-08-18

標籤滑動顯示升級版简体版

原文原文鏈接

以前作了一個滑動展現大圖片的demo，以後在大神博客發現大神也作過一個相似的插件。javascript

因而把插件摘了下來研究了一下。css

改動了插件顯示文本的部分並增長了一點註釋。效果比個人好用。html

點擊看效果demojava

插件源碼以下：jquery

(function($){
	$.fn.preview = function(){
		var xOffset = 10; //橫向偏移量
		var yOffset = 20; //縱向偏移量
		var w = $(window).width(); //頁面寬度
		$(this).each(function(){
			$(this).hover(function(e){

				//檢測圖片和文字來生成不一樣的容器
				if(/.png$|.gif$|.jpg$|.bmp$/.test($(this).attr("href"))){
					$("body").append("<div id='preview'><div><img src='"+$(this).attr('href')+"' /><p>"+$(this).attr('title')+"</p></div></div>");
				}else{
					$("body").append("<div id='preview'><div><p>"+$(this).text()+"</p></div></div>");
				}
				$("#preview").css({
					position:"absolute",
					padding:"4px",
					border:"1px solid #f3f3f3",
					backgroundColor:"#eeeeee",
					top:(e.pageY - yOffset) + "px", //鼠標位置減去縱向偏移量來定位到鼠標偏上的位置
					zIndex:1000
				});
				$("#preview > div").css({
					padding:"5px",
					backgroundColor:"white",
					border:"1px solid #cccccc"
				});
				$("#preview > div > p").css({
					textAlign:"center",
					fontSize:"12px",
					padding:"8px 0 3px",
					margin:"0"
				});
				if(e.pageX < w/2){

					//鼠標在頁面左側則靠左展現淡入
					$("#preview").css({
						left: e.pageX + xOffset + "px",
						right: "auto"
					}).fadeIn("fast");
				}else{

					//鼠標在右邊則靠左展現淡入
					$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast");	
				}
			},function(){

				//鼠標移出則刪除
				$("#preview").remove();
			}).mousemove(function(e){

				//在a元素上移動時進行位置改變
				$("#preview").css("top",(e.pageY - xOffset) + "px")
				if(e.pageX < w/2){
					$("#preview").css("left",(e.pageX + yOffset) + "px").css("right","auto");
				}else{
					$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left","auto");
				}
			});						  
		});
	};
})(jQuery);

　　demo源碼以下app

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圖片放大顯示的jQuery插件演示頁面</title>
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(function(){
	$("a.preview").preview();	  
});
</script>
<style type="text/css">
html{overflow-y:scroll;}
a.preview,a.preview:hover{text-decoration:none;}
a.preview img{margin:20px 10px;}
.img-list{
    padding:1em; 
    font-size:1.1em; 
    border-bottom:1px dashed #cccccc; 
    line-height:1.4; 
    overflow:hidden; 
    zoom:1;
}
</style>
</head>

<body>
    <div class="demo-container">
        <h3 class="method-title">圖片放大顯示的jQuery插件演示頁面</h3>
        <div class="img-list">
            <a class="preview" href="../../images/imgbig1.jpg">
                <img src="../../images/imgcommon1.jpg" />
            </a>
            <a class="preview" href="../../images/imgbig2.jpg">
                <img src="../../images/imgcommon2.jpg" />
            </a>
            <a class="preview" href="../../images/imgbig3.jpg">
                <img src="../../images/imgcommon3.jpg" />
            </a>
            <a class="preview" href="../../images/imgbig4.jpg">
                <img src="../../images/imgcommon4.jpg" />
            </a>
            <a class="preview" href="../../images/imgbig5.jpg">
                <img src="../../images/imgcommon5.jpg" />
            </a>
            <p>
                <a class="preview" href="http://www.zhangxinxu.com">請勿點擊</a>
            </p>
        </div>
    </div>
</body>
</html>

　　效果圖以下this

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。