我正在制作一个 Joomla 模板(1.5 不要问为什么~.~),我会使用这样的东西:
$('.linkseffect').hover(function() {
$(this).animate({
width: '180px'
}, 300);
},function() {
$(this).animate({
width: '68px'
}, 300);
});
.linkseffect {
background:#CCC;
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
border: 6px #f7f7f7 solid;
width:68px;
height:61px;
margin-right: 10px;
float: left;
text-align:left;
overflow:hidden;
padding:3px;
display;block;
}
img {
float:left;
margin-right:5px;
}
.text {
margin-top: 10px;
font-family: tahoma;
font-size: 12px;
color: #222;
text-shadow: 1px 0px 0px #fff;
text-align:left;
float:left;
word-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="links">
<a><div class="linkseffect"><img src="http://im36.gulfup.com/VhCD4.png" /><div class="text">Directory of <br /> Experts and blah </div></div></a>
<a><div class="linkseffect"><img src="http://im36.gulfup.com/YSGsJ.png" style="margin-top:7px; margin-right:5px;" /><div class="text">blah of <br /> blah blah blah</div></div></a>
<a><div class="linkseffect"><img src="http://im36.gulfup.com/jkQbz.png" /><div class="text">regester for <br /> blah blah blah</div></div></a>
</div>
我通过扩展和代码等将jQuery集成到模板和脚本中我将上面示例的js代码放在单独的文件中,并index.php
以正常方式将其链接到:
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/spc/js/links.js"></script>
但它仍然不起作用。