Javascript 滑动字幕。将小部件div放置在标题中。根据图像大小调整大小
我想拍一张有两个标题的图片。一个从顶部向下滑动，一个从底部向上滑动。我想得到它们相对于图像的大小（因此动态地改变图像的大小），并且每个都覆盖了图像的25% 目前，我有一个从左上滑到顶部，但我需要它从顶部滑下，底部的一个也从左侧滑下，但我需要它从底部滑下 这是小提琴：Javascript 滑动字幕。将小部件div放置在标题中。根据图像大小调整大小,javascript,html,css,Javascript,Html,Css,我想拍一张有两个标题的图片。一个从顶部向下滑动，一个从底部向上滑动。我想得到它们相对于图像的大小（因此动态地改变图像的大小），并且每个都覆盖了图像的25% 目前，我有一个从左上滑到顶部，但我需要它从顶部滑下，底部的一个也从左侧滑下，但我需要它从底部滑下 这是小提琴： 回顾图像系统 布鲁布 投票数据 //补充的第一件事 $（文档）.ready（函数（）{ $（'.rate_widget'）。每个（函数（i）{ var-widget=this； var out_数据={ widget_id:$
回顾图像系统
布鲁布
投票数据
//补充的第一件事
$（文档）.ready（函数（）{
$（'.rate_widget'）。每个（函数（i）{
var-widget=this；
var out_数据={
widget_id:$（widget.attr（'id'），
取回：1
};
美元邮政({
url:'ratings.php'，
数据：输出数据，
成功：功能（信息）{
$（小部件）.data（'fsr'，INFO）；
设置投票（小部件）；
},
数据类型：'json'
});
});
$（'.ratings_stars'）。悬停(
//手柄鼠标盖
函数（）{
$（this.prevAll（）.andSelf（）.addClass（'ratings_over'）；
$（this.nextAll（）.removeClass（'ratings_vote'）；
},
//处理鼠尾
函数（）{
$（this.prevAll（）.andSelf（）.removeClass（'ratings_over'）；
//无法使用“this”，因为它不包含更新的数据
set_投票（$（this.parent（））；
}
);
//记录投票
$（'.ratings_stars'）.bind（'click'，function（）{
var star=这个；
var小部件=$（this.parent（）；
var\u数据={
单击：$（星形）.attr（'class'），
widget_id:$（星形）.parent（）.attr（'id'））
};
美元邮政(
{
url:'ratings.php'，
数据：单击“数据”，
成功：功能（信息）{
widget.data（'fsr'，INFO）；
设置投票（小部件）；
},
数据类型：'json'
});
});
功能集投票（小部件）{
var avg=$（小部件）.data（'fsr'）.whole_avg；
var票数=$（小部件）.data（'fsr'）。票数；
变量精确=$（小部件）.data（'fsr'）.dec_avg；
window.console&&console.log（'现在在set_投票中，它认为fsr是'+$（widget）.data（'fsr'）.number_投票）；
$（小部件）.find（'.star_u'+avg.prevAll（）.andSelf（）.addClass（'ratings_vote'）；
$（widget.find（'.star_u'+avg.nextAll（）.removeClass（'ratings_vote'）；
$（小部件）。查找（'.total_voces'）。文本（记录的票数+'票数（'+exact+'rating'））；
}
});
如需更改幻灯片，您需要更改css转换，请参阅 我测试了删除元素“.container”的宽度和高度属性。我认为加载的图像将根据需要增加容器
@威廉·杜阿尔特，太棒了，谢谢你！我怎样才能将标题和容器动态地缩放到我所使用的任何图像？这正是我所要寻找的，而不是在中间达到的。我希望它们能够缩放到每一个图像的25%，并在顶部字幕中缩放到标题的50%，并被放置在左上角。谢谢你的帮助：）@williamduarte。我的意思是把评论部分放在顶部标题的上角，每个标题占25%，我的意思是每个标题占所用图像的25%。对不起，我想我应该澄清一下。再次感谢！！事实上，很抱歉您调整了图像以增加容器，所以我现在需要的是一种让review小部件位于标题左上角的方法。再次感谢：）@Dottsie您能发送一个关于jsfiddler的示例吗？
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>review image system</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script src="modernizr.custom.js"></script>
<script src="jquery.js"></script>
<script src="newjavascript.js"></script>
<script src="toucheffects.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<h1 class="main_head">blub</h1>
</header>
<hr />
<div class="container left">
<img src="http://placehold.it/350x150" alt="image" />
<article class="text css3-4">
<h1><a href="#" class="css3-4">space1</a></h1>
</article>
<article class="text css3-3 css3-4">
<h1><a href="#" class="css3-3 css3-4">space2</a> </h1>
<span><div class='movie_choice'>
<div id="r1" class="rate_widget">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
</span>
</article>
</div>
<hr />
</div>
<script>
// first thing added
$(document).ready(function() {
$('.rate_widget').each(function(i) {
var widget = this;
var out_data = {
widget_id : $(widget).attr('id'),
fetch: 1
};
$.post({
url:'ratings.php',
data: out_data,
success:function(INFO) {
$(widget).data( 'fsr', INFO );
set_votes(widget);
},
dataType:'json'
});
});
$('.ratings_stars').hover(
// Handles mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
// can't use 'this' because it wont contain the updated data
set_votes($(this).parent());
}
);
// records the vote
$('.ratings_stars').bind('click', function() {
var star = this;
var widget = $(this).parent();
var clicked_data = {
clicked_on : $(star).attr('class'),
widget_id : $(star).parent().attr('id')
};
$.post(
{
url:'ratings.php',
data: clicked_data,
success:function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
dataType:'json'
});
});
function set_votes(widget) {
var avg = $(widget).data('fsr').whole_avg;
var votes = $(widget).data('fsr').number_votes;
var exact = $(widget).data('fsr').dec_avg;
window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);
$(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
$(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote');
$(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}
});
</script>
article.css3-3
{
top:-80px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
width:400px;
}
.container:hover article.css3-3 {
top:0;
}
...
article.css3-4
{
bottom:-80px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
width:400px;
}
.container:hover article.css3-4{
bottom:0;
}
.container {
...
/*height: 200px;*/
...
}
.container2 {
...
/*height: 200px;*/
...
}