Archive

‘JavaScript’ 分類過的Archive

[jQuery] drag image in div (仿facebook編輯大頭圖)

2012年1月19日 尚無評論

在玩facebook時,覺得他的編輯大頭圖及編輯動態時報的大banner滿好玩的

索性也來玩一下,基本的DEMO在這邊

http://rdandy.tw/imagemagick/drag.php

CSS:

<style type="text/css">
<!--
body {
	margin:0;
}
#container {
	width:300px;
	height:300px;
	border:0;
	margin:0;
	padding:0;
	position: relative;
}
#smallwindow {
	overflow:hidden;
	width:300px;
	height:300px;
	position: relative;
	border:0;
	margin:0;
	padding:0;
	cursor:move;
}
#dragimage {
	position:relative;
	border:0;
}
-->
</style>

HTML body:

<input type="text" id="x" value="">
<input type="text" id="y" value="">
<input type="text" id="w" value="">
<input type="text" id="h" value="">
<br />
crop left: <input type="text" id="realleft" value="">
crop top: <input type="text" id="realtop" value="">
<table>
  <tr>
    <td>拖拉圖</td>
    <td><div id="smallwindow" align="center"><img src="yaya.jpg" id="dragimage" draggable="false" onclick="javascript:return false;" onmousedown="javascript:return false;" onmouseup="javascript:return false;" /></div></td>
  </tr>
</table>

JavaScript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() 
{
	var max_size = 1920;
	var smallwindow = $("#smallwindow");
	var smallwindowwidth = smallwindow.width();
	var smallwindowheight = smallwindow.height();
	var smallwindowleft = smallwindow.offset().left;
	var smallwindowtop = smallwindow.offset().top;
	
    var imgwidth = $("#dragimage").width();
	var imgheight = $("#dragimage").height();
	
	var limitleft = smallwindowleft - (imgwidth - smallwindowwidth);
	var limittop = smallwindowtop - (imgheight - smallwindowheight);
	var limitright = smallwindowleft;
	var limitbottom = smallwindowtop;

	$("#dragimage").draggable({containment:[limitleft,limittop,limitright,limitbottom]});
	
	$("#dragimage").mouseup(function() {
		//var pos = $("#dragimage").position();
		
		var offset = $("#dragimage").offset();
  		$("#x").val(offset.left - smallwindowleft);
		$("#y").val(offset.top - smallwindowtop);
		$("#w").val($("#dragimage").width());
		$("#h").val($("#dragimage").height());
  		$("#realleft").val((offset.left - smallwindowleft) * -1);
		$("#realtop").val((offset.top - smallwindowtop) * -1);
	});
	
	var rleft = smallwindowleft - ((imgwidth - smallwindowwidth) / 2);
	var rtop = smallwindowtop - ((imgheight - smallwindowheight) / 2);
	$("#dragimage").offset({left: rleft, top:rtop })
	
});

</script>
Categories: JavaScript, 程式設計 Tags: ,

A JavaScript Sound API – Soundmanager 2

2011年10月27日 尚無評論

在找支援html5及js控制的mp3 player時
找到這個站

Categories: JavaScript, 程式設計 Tags:

SyntaxHighlighter使程式語法清楚顯示

2010年1月22日 尚無評論

最近又想到要在文章中顯示程式時,如果要顯示CSS、ASP、PHP等等的語法時,可以不用自己去打上各個顏色的html code,所以找回了之前用過的SyntaxHighlighter,但這在Google裡的程式版本應該是很舊的了
現在已經有新版

這裡整理給自己做個筆記~

下載點:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

安裝:
下載後,解壓縮到網站目錄下,例如:/網站目錄/js/syntaxhighlighter

設定:

在<head>…</head>區中加入css設定

<head>
<link href="/js/syntaxhighlighter/styles/shCore.css" type="text/css" rel="stylesheet" />
<link href="/js/syntaxhighlighter/styles/shThemeDefault.css" type="text/css" rel="stylesheet" />
</head>

再來是js的添加,可以放在最後再載入,以確保在內容載入後才執行

<!-- 必要項 -->
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shCore.js"></script>
<!-- 底下是一般常用的 -->
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushVb.js"></script>
<!-- xml是包含了html的格式 -->
<script src="/js/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript">
<!-- 這個是載入複製用的flash,要是不載入也沒關係,同時也不會出現複製功能的按鈕 -->
SyntaxHighlighter.config.clipboardSwf = "/js/syntaxhihglighter/scripts/clipboard.swf";
<!-- 執行js使設定啟用 -->
SyntaxHighlighter.All();
</script>

使用:

Categories: CSS, HTML, JavaScript Tags: