Для разработчиков веб -приложений, если фоновая программа занимается программой в течение длительного времени, когда пользователь просматривает интерфейс, пользователь будет ждать более длительного времени на веб -странице, но если на странице нет более дружественного метода быстрого приглашения
(Добавьте к увеличению эффекта пыли), тогда пользовательский опыт не будет особенно хорошим. Пользователи не знают, должны ли им нажимать на другие программы сейчас, и пользователи не знают, должны ли они продолжать ждать веб -страницы, или они могут нажать на другие страницы.
Сейчас существует относительно хорошее взаимодействие, которое должно увеличить эффект от пыли. Как и Framework Extjs, Mask () и Unmask () функции ExtJs обеспечивают эффект седых, и, конечно, jQuery также обеспечивает этот метод седления. Здесь автор надеется, что он сможет
Используйте Native JS для достижения собственного эффекта седых. Итак, я сам попробовал. Достиг эффекта пыли. Здесь я сосредотачиваюсь только на реализации. Я мало скорректировал эстетику страницы, поэтому страница не очень красивая. Разместите здесь код реализации.
Посмотреть фрагменты кода, полученные для моих фрагментов кода на коде
<! Doctype html public "-// w3c // dtd html 4.0 transitional // en"> <html> <head> <title> Новый документ </title> <meta name = "generator" content = "editplus"> <meta name = "Автор" content = "> <meta name =" content = "> <meta name =" Author "'"> <meta name = "=" "> <Meta name ="> ""> ">" ">"> ""> ""> ""> ""> ""> ">" "meta name ="> "" meta name = ">" "meta name ="> "" meta name = ">" "meta name =" "meta name" " type = "text/css"> .maskstyle {founal-color:#b8b8b8; z-index: 1; Фильтр: альфа (непрозрачность = 50); непрозрачность: 0,8; позиция: абсолютно; Текст-альбом: Центр; Цвет: синий; Шрифт: жирный жирный 1 -й "安体", Arial, Times; Высота: 25px; шрифт-вес: жирный шрифт; переполнение: скрыто; } </style> </head> <script type = "text/javascript"> function createMaskLayer (effectItem, showText) {divitem = document.createElement ("div"); divitem.classname = "maskstyle"; divitem.style.lineHeight = EffectItem.OffSetheight+"px"; divitem.innertext = showtext; divitem.style.width = effectitem.offsetwidth; divitem.style.height = effectitem.offsetheight; divitem.style.top = effectitem.offsettop; divitem.style.left = effectitem.offsetleft; вернуть Divitem; } function setmask () {var effectitem = document.getElementById ("test"); var EssureMaskItem = findMaskItem (EffectItem); if (EssiveMaskitem) {return; } var showText = "загрузка ..."; EffectItem.appendChild (CreateMasklayer (EffectItem, ShowText)); } function removeMask () {var EffectItem = document.getElementById ("test"); var maskitem = findmaskitem (effectitem); if (maskitem) {effectitem.removechild (maskitem); }} function findmaskitem (item) {var kids = item.children; for (var i = 0; i <kinds.length; i ++) {if ("maskstyle" == (дети [i] .classname)) {return gilds [i]; }}} </script> <body> <input type = "button" value = "onclick =" setMask () "/> <input type =" cutting "value =" onclick = "removeMask ()"/> <br> <div id = "test" style = "border: 1px sold; width: 300px; value = "Проверьте, можете ли вы нажать" OnClick = "alert ('OK!')"/> </div> </body> </html>Объясните важные части кода.
.maskstyle - серый стиль слоя
в
Посмотреть фрагменты кода, полученные для моих фрагментов кода на коде
Фильтр: альфа (непрозрачность = 50); непрозрачность: 0,8;
Он представляет прозрачность серого слоя, а атрибут фильтра должен быть совместимы с браузером IE8.
Свойство Z-Index устанавливает порядок укладки элементов. Элементы с более высоким порядком укладки всегда будут перед элементами с более низким порядком укладки.
PS: эффект от пыли должен быть пыли в элемент, чтобы быть помещенным в Div