如何调整JavaScript鱼眼脚本's放大触发器
How do I tweak the JavaScript Fisheye script's enlargement trigger?
我在我的网站(链接到我的网站)中使用jQuery Fisheye插件(此处)。正如你所看到的,有9个"气泡",当你在其中一个上移动鼠标时,它将被放大。
有没有可能将其中一个"气泡"的最大尺寸作为默认值,所以当访问者加载页面时,他会看到8个小气泡和一个"最大尺寸"气泡?
编辑:我尝试添加一个新的css"类"来获得"大气泡"效果。现在的问题是(正如你在上面的链接中看到的),大气泡似乎在左边的小气泡之上。
我尝试将margin
和padding
添加到大气泡样式中,但没有帮助,我想是因为所有的小气泡都是float:right
。
我的html/php代码:
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 150,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 80,
proximity: 80,
halign : 'center',
valign : 'bottom'
}
)
$('#auto_big').addClass('dock-item2-big');
$('.dock-item2').mouseover(function() {
$('#auto_big').removeClass('dock-item2-big');
});
$('.dock-item2').mouseout(function() {
$('#auto_big').addClass('dock-item2-big');
});
}
);
</script>
<div class="dock2" id="dock2">
<div class="dock-container2">
<?php $categories = $this->requestAction('categories/index/direction:asc/limit:9'); ?>
<?php foreach ($categories as $category): ?>
<?php
if($category['Category']['id'] == 27)
$special = " id='auto_big'";
else
$special = "";
?>
<a class="dock-item2" href="/categories/show/<?=$category['Category']['id'];?>"<?=$special?>><span><img src='/img/cat/<?=$category['Category']['id'];?>_title.png'></span><img src="/img/cat/<?php echo $category['Category']['picture']; ?>" alt="<?php echo $category['Category']['name']; ?>" /></a>
<?php endforeach; ?>
</div>
</div>
我的风格:
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: relative;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
/*background: url(images/dock-bg.gif);*/
/*padding-left: 20px;*/
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
font-size:20px;
float:right;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
a.dock-item2-big {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 200px;
color: #000;
bottom: 0px;
position: absolute;
}
.dock-item2-big span {
display:block;
padding-left: 20px;
font-size:20px;
float:right;
}
.dock-item2-big img {
border: none;
width: 220px;
}
当鼠标靠近(而不是超过)时,项目开始调整大小,我认为这是基于鼠标位置。由于您无法使用javascript移动鼠标光标,我认为您无法触发此操作。
是时候找到另一种方法了,比如在CSS中设置大元素的比例。如果你打开Firebug(或另一个检查器)并观察元素,你会看到随着鼠标越来越近,左边和宽度都在变化。选择一些值并通过CSS进行设置。
相关文章:
- UIAutomation放大图像
- 悬停功能触发器
- 如何在d3上的图形中添加放大和缩小按钮
- jQuery触发器点击未从AJAX成功工作
- 如何使用javascript onmouseover缓慢放大图像
- 点击放大图片.JavaScript、CSS和HTML
- 鼠标悬停时如何居中放大背景图像
- 查找仅适用于原始图像的图像放大算法的名称
- 为什么会返回触发器('点击')
- 有没有一种方法可以检测ios<>使用jquery和触发器操作形成导航按钮
- addEventListener的Javascript代码不工作!?(单击时打开放大的img)
- jQuery自动完成触发器在选择时返回
- 放大弹出生成“;找不到文件”;YouTube视频的错误
- 谷歌地图完全放大
- 用键盘分页jQuery下一个和上一个控件.触发器('点击')不'不起作用
- Meteor出版物'是这样的吗;t触发器
- 使用angular缩放大图像以适应屏幕宽度
- JS触发器值检查在文档加载后添加到页面的元素在加载时更改AND
- jQuery触发器事件在一个循环中多次出现
- 如何调整JavaScript鱼眼脚本's放大触发器