Изменить размер изображения прокруткой колесика мыши



Приветствую всех друзей, читателей и гостей блога. В предыдущем посте я писала как Увеличить изображение при клике мышью. Сегодня еще одна фишка, научимся изменять размер картинки, прокручивая колесико мыши. 

Пример можно посмотреть в тестовом блоге. Наведите курсор на картинку и прокручивайте колесико мыши, правда здорово!

Чтобы воспользоваться такой фишкой на страницах блога, нужно вставить скрипт в шаблон-изменить шаблон выше закрывающего тэга </head>. Посмотрите скриншот:

Как вставить код скрипта для прокрутки картинок колесиком мыши в шаблон блога 

Скопируйте скрипт


<script type='text/javascript'>
(function(){

var zooming=function(e){
e=window.event ||e;
var o=this,data=e.wheelDelta || -e.detail*40,zoom,size;
if(!+&#39;\v1&#39;){//IE
zoom = parseInt(o.style.zoom) || 100;
zoom += data / 12;
if(zoom &gt; zooming.min)
o.style.zoom = zoom + &#39;%&#39;;
e.returnValue=false;
}else {
size=o.getAttribute(&quot;_zoomsize&quot;).split(&quot;,&quot;);
zoom=parseInt(o.getAttribute(&quot;_zoom&quot;)) ||100;
zoom+=data/12;
if(zoom&gt;zooming.min){
o.setAttribute(&quot;_zoom&quot;,zoom);
o.style.width=size[0]*zoom/100+&quot;px&quot;;
o.style.height=size[1]*zoom/100+&quot;px&quot;;
}
e.preventDefault();
e.stopPropagation();//for firefox3.6
}
};
zooming.add=function(obj,min){// first parameter is for the image need to zoom ,min define the image zoom size ,default to 50
zooming.min=min || 50;
obj.onmousewheel=zooming;
if(/Firefox/.test(navigator.userAgent))//if Firefox
obj.addEventListener(&quot;DOMMouseScroll&quot;,zooming,false);
if(-[1,]){//if not IE
obj.setAttribute(&quot;_zoomsize&quot;,obj.offsetWidth+&quot;,&quot;+obj.offsetHeight);
}
};
window.onload=function(){//must be onload , in order to get the image size
zooming.add(document.getElementById(&quot;test&quot;));
}
})()
</script>


Далее, когда в редакторе blogger загрузите фото или картинку, перейдите по вкладке HTML, перед src url адресом надо вставить строку id="test" 

Вот адрес изображения

<img border="0" height="279" id="test" src="url адрес картинки" width="320" /> 

Теперь Вы можете предлагать своим посетителям свои интересные фотки или какие-то особые картинки просмотреть в увеличенном размере.

На все вопросы отвечу в комментариях или воспользуйтесь контактной формой для связи. Всего доброго.


TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 7/08/2015 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *