dojo fasheye 鱼眼

Dojo鱼眼特效实现

最新推荐文章于 2023-07-29 17:39:12 发布

iteye_1601

最新推荐文章于 2023-07-29 17:39:12 发布

阅读量148

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： Dojo CSS JavaScript 脚本 HTML ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_1601/article/details/81787680

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用Dojo 1.x版本中的FisheyeList小部件来实现图标鱼眼特效。通过设置不同的参数，如宽高比、方向等，可以定制鱼眼效果，并通过示例代码展示了具体实现过程。

适用于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");
//自定义脚本

</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>