JavaScript DHTML/Dojo toolkit/Fisheye
Create fish eye list
<html>
<head>
<link rel="StyleSheet" href="js/dojo/dojox/widget/FisheyeList/FisheyeList.css" type="text/css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.widget.FisheyeList");
dojo.require("dojox.storage");
dojo.addOnLoad(function(){
dojo.parser.parse(dojo.byId("divMain"));
});
</script>
</head>
<body >
<center>
<div id="divMain" class="cssMain" style="width:100%;">
<div class="outerbar">
<div dojoType="dojox.widget.FisheyeList"
itemWidth="64"
itemHeight="64"
itemMaxWidth="128"
itemMaxHeight="128"
orientation="horizontal"
effectUnits="1"
itemPadding="10"
attachEdge="top"
labelEdge="bottom">
<div dojoType="dojox.widget.FisheyeListItem"
onclick="alert("1")"
label="New Contact"
iconSrc="img/icon_new.gif">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
label="Label"
iconSrc="img/transPix.gif">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
onclick="alert("2")"
label="Save"
iconSrc="img/icon_save.gif">
</div>
</div>
</div>
</body>
</html>
Fish eye on text
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojox.widget.FisheyeLite");
dojo.addOnLoad(function(){
dojo.query("b", dojo.byId("my")).forEach(function(n){
new dojox.widget.FisheyeLite({
properties:{
fontSize:1.50,
letterSpacing:2.00
}
},n);
}).connect("onclick",dojo,"stopEvent");
});
</script>
</head>
<body class="tundra">
<p id="my">
text <b>text</b>another text<b>text</b>
</p>
</body>
</html>