Несколько кадров увеличивается при наведении - PullRequest
Новая
       2

Несколько кадров увеличивается при наведении

1 голос
/ 14 января 2011

То, что я ищу, - это наличие нескольких iFrames (или чего-то подобного) на странице, любой из которых при наведении на изображение увеличивается. По умолчанию они должны показывать только часть страницы. Например, большинство iFrames будут иметь некоторые диаграммы или графики. Мне было интересно, был ли для меня способ видеть только график / график, и, кроме того, при наведении курсора на iFrame можно увеличиваться по ширине и высоте. Буду очень признателен, если кто-нибудь сможет предоставить какие-либо рекомендации / указатели / фрагменты кода о том же вращении вокруг jsp / jquery / java script / css или что-то связанное. Заранее спасибо!

Ответы [ 3 ]

1 голос
/ 14 января 2011

Вы можете попробовать этот трюк,

CSS 

iframe {
    width: 100%;
    height: 100%;
}

div {
    width: 300px;
    height: 200px;
}

div.hover {
    width: 400px;
    height: 300px;
}

html 

<div>
    <iframe src="http://google.com"></iframe>
</div>

jquery 

$('div').hover(function(){
    $(this).addClass('hover');
},
function(){
    $(this).removeClass('hover');
});

demo

1 голос
/ 14 января 2011

JQuery - 

     $(document).ready(function() {
       $("#frame-1").mouseover(function() {
            $(this).attr({width: 800, 
                          height: 500});
            }).mouseleave(function() {
                $(this).attr({width: 300, 
                              height: 400});
                });
            });

с HTML - 

<html>
<head>
    <title>Frame Enlargementationing</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
         $(document).ready(function() {
           $("#frame-1").mouseover(function() {
                $(this).attr({width: 800, 
                              height: 500});
                }).mouseleave(function() {
                    $(this).attr({width: 300, 
                                  height: 400});
                    });
                });
    </script>
</head>
</html>
<body>

<h1>Hover:</h1>
<iframe id="frame-1" src="http://jquery.com/" width="300" height="400"></iframe>


</body>
</html>
0 голосов
/ 14 января 2011

Вы можете создать класс CSS psuedo hover, который увеличивает размер iframe.

Например: 

iframe { 
width: 500px;
height: 700px;
}

iframe:hover {
width: 700px;
height: 900px;
}

Я не уверен на 100%, будет ли это работать с iframe ..но стоит попробовать!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...