我正在建立一个网站。在这种情况下,当我将鼠标悬停在图像上时,我希望一些选项出现在它上面,例如喜欢,评论,摄影师等,以便从数据库中动态显示。请帮助我了解如何执行此操作。
你可以用JQuery做这样的事情:
$(".my-image-class").hover( function () {
$('.options-menu').fadeIn('slow');
}
上面的代码假设您的图像具有 CSS 类my-image-class
并且您的选项div 具有 CSS 类options-menu
。
只需创建一个绝对适用于该div 的div 应用定位。该位置将与图像的位置相同。然后更改 z 索引div 的 z 索引必须低于图像的 z 索引。之后,编写一个脚本以将div 的 z 索引增加到高于图像的 z 索引。
例如:
<style type="text/css">
#div{
position:absolute;
top:10px;
left:10px;
z-index:-1000;
}
#image{
position:absolute;
top:10px;
left:10px;
z-index:100;
}
</style>
<script>
$(document).ready(function()
{
$("#image").hover(function()
{
$("#div").css("z-index","1000");
}
});
</script>
<body>
<img src="http://cdn-careers.sstatic.net/careers/gethired/img/english-728c.png?v=7641486da3a3" id="image">
<div id="div">
<p>
Like:50;
comment:10
<p>
</div>
</body>
HTML 和 php
<div id='imageinfo'>
<img src'yourfile' id='myimage'>
<div id='option'><?php //PHP dynamic code here for option ?></div>
</div>
.JS
<script>
$('#option').hide(); //hide the option div by default
$("#myimage").hover(
function () { //Mouse In Function
$('#option').fadeIn('slow');
},function () { // Mouse Out Function
$('#option').fadeOut('slow');
});
</script>
.CSS
#imageinfo{
position:relative;
}
#option{
position:absolute;
z-index:9999;
bottom:0;
}
现在 #option id内容过来图片,你可以把你的选项,喜欢放在选项div
您可以使用类处理同一页面上的多个图像
工作演示
试试这个
$(function () {
$('.client').on("mouseenter", function () {
$(this).find(".client_slider").animate({
"bottom": "-240px"
}, "slow");
}).on("mouseleave", function () {
$(this).find(".client_slider").animate({
"bottom": "-320px"
}, "fast");
});
});
希望这有帮助,谢谢
你所描述的通常被称为tooltip
。
一个好的起点是使用 jQuery UI 工具提示:http://jqueryui.com/tooltip/
如果你在脑海中包含了jQuery和jQueryUI,你可以执行以下操作:
.HTML
<p title="Simple tooltip content">Hover over me</p
爪哇语
$(function() {
$(document).tooltip();
});
http://jsfiddle.net/Vkj5y/
如果您希望在工具提示中包含 HTML,您仍然可以将其放在标题中并通过以下方式调用工具提示插件:
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
http://jsfiddle.net/wnRN7/3/
更高级的库在这里:http://qtip2.com/
你可以做这样的事情:
.HTML:
<div>
<img src="http://www.stepbystep.com/wp-content/uploads/2013/02/How-to-Apply-Blush-on-Oval-Face.jpg" class="myimg"/>
<div class="options">
<ul>
<li>Like : 5 </li>
<li>Comment: 6</li>
</ul>
</div>
</div>
.CSS:
.options{
display:none;
margin-top:-100px;
}
.myimg{
}
.JS:
$(function(){
$(".myimg").hover(function(){
$(".options").show(1000);
}, function(){
$(".options").hide(1000);
});
});
检查演示 : http://jsfiddle.net/alaminopu/eKhsC/
首先,你必须定义你想要的待遇(没有喜欢,评论,摄影师...喜欢这个:
<script language="JavaScript" type="text/JavaScript">
function yourFunction(q){
//Treatment you want
}
</script>
在此之后,您所要做的就是将函数的调用与"onmouseover"事件捕获器相关联。喜欢这个:
<a href="#" id="home">
<img id="yourImageId" src="pathOfYourImage"onmouseover="yourFunction(q);" />
</a>