个人中心
gpt4 book ai didi

javascript - 滑动字幕。将小部件 div 放在 caption.resizing 根据图像大小

转载 作者：行者123 更新时间：2023-11-28 08:24:28 25 4
gpt4 key购买 nike

我正在尝试获取带有两个标题的图像。一个将从顶部滑下，一个从底部向上滑动。我想得到它们相对于图像的大小(因此动态地改变图像的大小)并且它们每个可能覆盖图像的 25%。

目前我有一个从左上往上滑动，但我需要它从顶部向下滑动，底部的那个也从左边滑动，但我需要它从底部滑动。

这是 fiddle :http://jsfiddle.net/s4qvL5cf/1/ 

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

最佳答案

如需更改幻灯片，您需要更改 css 转换，请参阅 this 

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”的宽度和高度属性。而且我认为加载的图像会根据需要增加容器。 Take a look .

.container {
    ...
    /*height: 200px;*/
    ...
}

.container2 {
    ...
    /*height: 200px;*/
    ...
}

关于javascript - 滑动字幕。将小部件 div 放在 caption.resizing 根据图像大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28596222/

25 4 0
文章推荐： ios - react native : Real time camera data without image save and preview
文章推荐： javascript - 由于父级上的负 z-index，html 元素未注册 js 点击
文章推荐： c++ - 构造一个附加了可变数据量的对象
文章推荐： html - 页面无法在 Ipad bootstrap 3 上正确显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com