适用于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>
分享到：
相关推荐
Dojo 是一个强大的JavaScript工具库，它为Web开发提供了丰富的功能和组件，涵盖了从DOM操作、事件处理到AJAX通信等多个方面。Dojo的核心在于它的模块化系统，这使得开发者可以按需加载代码，提高应用的性能和可维护...
dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档
Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo学习笔记--ValidationTextbox Dojo学习笔记--dijit.Dialog Dojo学习笔记--dijit.Menu Dojo学习笔记--dijit.TitlePane Dojo学习笔记--dijit...
Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo学习笔记--ValidationTextbox Dojo学习笔记--dijit.Dialog Dojo学习笔记--dijit.Menu Dojo学习笔记--dijit.TitlePane Dojo学习笔记--dijit...
Dojo 是一个功能丰富的 JavaScript 库，它提供了一系列模块化、面向对象的工具，用于构建高性能的 Web 应用程序。在 Dojo 中，模块和包的概念是核心组成部分，它们帮助开发者组织和管理代码，使其更易于维护和重用。...
Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo学习笔记--ValidationTextbox Dojo学习笔记--dijit.Dialog Dojo学习笔记--dijit.Menu Dojo学习笔记--dijit.TitlePane Dojo学习笔记--dijit...
《dojo中文文档-dojo手册》提供了全面而深入的Dojo框架知识，这是一份非常有价值的资源，对于想要理解和掌握Dojo JavaScript库的开发者来说至关重要。Dojo是一个强大的JavaScript工具包，它提供了丰富的功能，包括...
dojo js dojo js dojo js dojo js dojo js dojo js dojo js
Dojo是一个非常强大的、面向对象的、开源的JavaScript工具箱，它为开发富客户端Ajax应用提供了一套完整的小部件和一些特效操作。曾经有人这样说：“对于一个Web开发者而言，如果没有Dojo，他将是一个“残废”的...
DOJO中文手册是针对JavaScript库Dojo的详细指南，源自中国的本地化版本，旨在帮助开发者理解和使用这个强大的工具包。Dojo是一个开源的DHTML工具集，由nWidgets、Burstlib和f(m)等多个项目的合并发展而来，因此被...
### Dojo常用方法总结 Dojo是一个开源的JavaScript框架，用于构建高性能的富客户端Web应用程序。它提供了一系列功能强大的工具和API，可以帮助开发者更轻松地处理DOM操作、AJAX调用、用户界面组件构建等任务。本文...
手册中列举了一些常用的Dojo包，如dojo.io用于不同类型的IO传输，dojo.dnd提供拖放功能的API，dojo.string提供了字符串处理方法，dojo.date帮助解析和操作日期，dojo.event处理事件驱动和AOP开发，dojo.back管理撤销...
**DOJO权威指南+DOJO1.1源码** DOJO是一个开源的JavaScript库，它提供了丰富的工具和功能，用于构建交互式Web应用程序。这个资源集合包括了《DOJO权威指南》的中文版以及DOJO 1.1的源代码，为深入理解和应用DOJO...
学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源...
Dojo 是一个强大的JavaScript工具库，它为Web开发提供了丰富的功能和组件，涵盖了从DOM操作、事件处理到AJAX通信、动画效果等各个方面。在深入理解Dojo之前，我们需要了解JavaScript在网页开发中的核心地位以及它...
Dojo 是一个强大的JavaScript工具库，它为Web开发提供了丰富的功能和组件，包括AJAX、DOM操作、动画效果、国际化、模块化等。这个“dojo 离线API”是官方文档的英文原版，旨在帮助开发者在没有网络连接的情况下也能...
Dojo工具包是一个广泛使用的JavaScript库，主要用于构建交互式的Web应用程序。这个压缩包包含了你在学习Dojo时可能需要用到的各种资源，旨在提供一个完整的开发环境，同时也作为一种备份手段。现在，让我们深入了解...
Dojo 是一个强大的JavaScript工具包，它为富互联网应用程序（RIA）开发提供了丰富的功能和组件。随着RIA的兴起，Dojo成为了JavaScript开发者的首选之一，尤其是对于那些有Java背景的开发者，它提供了一种结构化的、...
### Dojo 快速入门知识点详解 #### 一、Dojo 概览 Dojo 是一个功能强大且灵活的开源 JavaScript 库，主要用于构建高性能的富客户端 Web 应用程序。Dojo 提供了一系列工具和组件，使得开发者能够轻松创建交互式 Web...