В недавнем проекте я столкнулся с проблемой достижения такого эффекта:
После щелчка по миниатюре страницы pic_small.Aspx откроется страница pic_all.aspx. Размер страницы pic_all.aspx должен автоматически корректироваться в соответствии с размером изображения, и на ней должна быть информация описания изображения. Вы также можете нажать на предыдущее и следующее изображение, чтобы перевернуть страницу.
Процесс реализации следующий:
Код на миниатюре страницы pic_small.Aspx:
<IMG id="imgPic" style="CURSOR:hand" border=0 height="95" onclick="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"ID")%>)" src='< %#"Images/Product/" + DataBinder.Eval(Container.DataItem,"PicUrl")%>' width="118" runat="server">
ShowWindow сохраняется в файле OpenWindows.js со следующим содержимым:
функция ПоказатьОкно(идентификатор)
{
window.open('pic_all.aspx?ID=' + id,'_blank','Scrollbars=no');
}
Следующий код может реализовать, что после щелчка по миниатюре появится всплывающая страница pic_all.aspx для отображения информации об изображении. Ниже будет реализовано то, что страница pic_all.aspx автоматически настраивается в соответствии с размером изображения.
Поместите следующий код между <Head></Head> на странице pic_all.aspx:
<script>
функция window.onload()
{
var obj=document.getElementById("PicUrl");
window.resizeTo(obj.offsetWidth + 127,obj.offsetHeight + 75);
}
</script>
PicUrl здесь используется для отображения исходного размера изображения на странице pic_all.aspx. Я использую элемент управления html. Независимо от того, какой метод вы используете, вам нужно прочитать имя или путь к изображению из базы данных.
obj.offsetWidth получает ширину исходного отображаемого изображения. obj.offsetWidth + 127 означает, что окно на 127 пикселей больше ширины изображения, поскольку необходимо оставить некоторое пространство для реализации информации описания изображения.
Таким образом, всплывающее окно можно автоматически настроить в соответствии с размером изображения, а всплывающую страницу можно редактировать по своему желанию, поскольку всплывающая страница является назначенной страницей и не имеет значения, чего вы хотите. для редактирования вы можете обращаться с ним так же, как обычно.
Хочу выразить благодарность Богу за предоставление ключевого кода для всего процесса реализации. Без его помощи я бы не смог завершить проект сегодня и не смог бы со спокойной душой покинуть свою нынешнюю компанию. моя искренняя благодарность каждому другу, который с энтузиазмом помогает другим, поэтому я буду описывать все проблемы, возникающие в проекте, в надежде оказать помощь большему количеству людей.