适用于dojo1.x版本...
鱼眼特效是指当鼠标移动至该图标处,图标会逐渐变大.
首先是js和css代码:
<head>
<style type="text/css">
//2个相关样式
@import "dojo/dojo/resources/dojo.css";
@import "dojo/dojox/widget/FisheyeList/FisheyeList.css";
</style>
//引入必须的js 设置debug
<script type="text/javascript" src="dojo/dojo/dojo.js"
djConfig="isDebug:false, parseOnLoad: true"></script>
<script type="text/javascript" language="JavaScript">
//使用dojo的库
dojo.require("dojox.widget.FisheyeList");
dojo.require("dojo.parser");
//自定义脚本
<!--
function load_app(id){
if (id=="vwin"){
open("http://www.vwintech.com", "_self");
}
if (id=="163"){
open("http://www.163.com", "_self");
}
if (id=="xiaxin"){
open("http://www.xiashixin1985.51.com", "_self");
}
}
-->
</script>
</head>
和dojo相结合的html代码:
<body>
<%--
dojoType="dojox.widget.FisheyeList" dojoType设置
itemWidth/itemHeight:普通模式的宽和高
itemMaxWidth/itemMaxHeight:最大模式的宽和高
orientation:是否水平,默认为垂直方式
effectUnits:有效相关变化的单元数
itemPadding:调整每项的大小
attachEdge:icon跟随的方向 分为bottom,、center、top三种
labelEdge:标签的显示位置:bottom,和top
conservativeTrigger:进入图标才展现鱼眼效果
--%>
//主层
<div dojoType="dojox.widget.FisheyeList"
itemWidth="50"
itemHeight="50"
itemMaxWidth="200"
itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="top"
labelEdge="bottom"
conservativeTrigger="false">
//下面为包含在主层中的子层
<%--
dojoType="dojox.widget.FisheyeListItem" 设置为子项
--%>
<div dojoType="dojox.widget.FisheyeListItem"
iconsrc="image1.jpg" label="维远泰克">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
iconsrc="image2.jpg" label="网易">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
iconsrc="image3.jpg" label="夏新博客">
</div>
</div>
</body>
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
