اضافة تأثير اللمس لمدونة بلوجر
صفحة 1 من اصل 1
اضافة تأثير اللمس لمدونة بلوجر
مرحبا بمتابعينا الأعزاء في كل مكان وزمان، سنتعرف اليوم على اضافة جديدة بمدونتنا ألا وهي تأثير التمرير بواسطة اللمس ليس حرفيا أنك تلمس الشاشة لا، ستمكنك الإضافة بالنزوال والصعود فقط بالتحكم بالمُؤشر (Cursor) هذا التأثير رائع ويشتغل بشكل طبيعي، بها يستطيع قرائك النزول أو الصعود بدون استعمال شريط التمرير (Scroll bar) ايضا يمكنك النزول أو الصعود بسرعة عبر السحب كما بالهواتف.
قبل أن تضيف هذا التأثير قم بتجربته أولا
شرح طريقة التركيب
1. توجه الى قالب >> تحرير
2. انسخ الكود التالي وضعه فوق </body>
- الكود:
<script type='text/javascript'>
//<![CDATA[
function TouchScroll() {
var instance = this;
var Event = {
CHANGE: 'change',
COMPLETE: 'complete',
ERROR: 'error',
TOUCH_START: 'touchstart',
TOUCH_MOVE: 'touchmove',
TOUCH_END: 'touchend',
MOUSE_DOWN: 'mousedown',
MOUSE_MOVE: 'mousemove',
MOUSE_UP: 'mouseup'
};
this.options = {
'element': null
};
var drag = false;
var startevent = {};
var startpercentage = {};
var axis = 'y';
var target;
this.load = function(data) {
for (var item in data) {this.options[item] = data[item];}
addListeners();
setupAnimation();
}
function setupAnimation() {
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {window.setTimeout(callback, 1000 / 60);};
})();
}
function addListeners() {
if (instance.options.element.addEventListener) {
instance.options.element.addEventListener(Event.MOUSE_DOWN, onTouchStart, false);
instance.options.element.addEventListener(Event.MOUSE_MOVE, onTouchMove, false);
instance.options.element.addEventListener(Event.MOUSE_UP, onTouchEnd, false);
instance.options.element.addEventListener(Event.TOUCH_START, onTouchStart, false);
instance.options.element.addEventListener(Event.TOUCH_MOVE, onTouchMove, false);
instance.options.element.addEventListener(Event.TOUCH_END, onTouchEnd, false);
}
}
function onTouchStart(e) {
drag = true;
target = instance.options.element || e.target;
startevent = e;
startpercentage = {x: (e.x/window.innerWidth)*100, y: (e.y/window.innerHeight)*100}
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] e, target);
e.preventDefault();
}
function onTouchMove(e) {
if (drag == true) {
var diffx = (startevent.pageX-e.pageX);
var diffy = (startevent.pageY-e.pageY);
target.scrollLeft += diffx;
target.scrollTop += diffy;
if (Math.abs(diffx) > 60) {axis = 'x';}
else if (Math.abs(diffy) > 100) {axis = 'y';}
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] target, diffx, diffy);
e.preventDefault();
}
}
function onTouchEnd(e) {
drag = false;
var endpercentage = {x: (e.x/window.innerWidth)*100, y: (e.y/window.innerHeight)*100}
var diffpercentagex = -(endpercentage.x-startpercentage.x);
var diffpercentagey = -(endpercentage.y-startpercentage.y);
var diffx = (window.innerWidth/100)*diffpercentagex;
var diffy = (window.innerHeight/100)*diffpercentagey;
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] e, diffpercentagex, diffpercentagey);
//animate();
scrollAxis(diffx*1.5, diffy*1.5, axis);
e.preventDefault();
}
function animate() {
requestAnimFrame(animate);
console.log('animate');
}
function scrollAxis(diffx, diffy, axis) {
var x = target.scrollLeft;
var y = target.scrollTop;
var start = y;
var stop = start+diffy;
if (axis == 'x') {
start = x;
stop = start+diffx;
}
var distance = stop > start ? stop - start : start - stop;
if (distance < 50) {
if (axis == 'x') { instance.updatePosition(stop, y); }
else { instance.updatePosition(x, stop); }
return;
}
var speedY = Math.round(distance);
if (speedY >= 20) speedY = 20;
var step = Math.round(distance / 30);
var leapY = stop > start ? start + step : start - step;
var timer = 0;
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] distance, target, start, stop);
if (stop > start) {
for ( var i=start; i<stop; i+=step ) {
if (axis == 'x') { setTimeout("touchscroll.updatePosition("+leapY+", 0)", timer*speedY); }
else { setTimeout("touchscroll.updatePosition(0, "+leapY+")", timer*speedY); }
leapY += step;
if (leapY > stop) leapY = stop;
timer++;
}
return;
}
for ( var i=start; i>stop; i-=step ) {
if (axis == 'x') { setTimeout("touchscroll.updatePosition("+leapY+", 0)", timer*speedY); }
else { setTimeout("touchscroll.updatePosition(0, "+leapY+")", timer*speedY); }
leapY -= step;
if (leapY < stop) leapY = stop;
timer++;
}
}
this.updatePosition = function(x, y) {
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] x, y);
target.scrollLeft = x;
target.scrollTop = y;
}
}
TouchScroll.prototype = new TouchScroll();
var touchscroll = new TouchScroll();
touchscroll.load({
'element': document.getElementsByTagName('body')[0]
});
//]]>
</script>
مواضيع مماثلة
» اضافة صناديق لعرض الأكواد الى مدونة بلوجر
» آداة الإحصائيات لمدونات بلوجر
» كيف تتعامل بشكل صحيح مع اكواد CSS , JS , HTML في بلوجر
» إضافة آداة مواضيع مقترحة لمدونات بلوجر
» الطريقة الصحيحة للتعامل مع التسميات أو الأقسام في بلوجر
» آداة الإحصائيات لمدونات بلوجر
» كيف تتعامل بشكل صحيح مع اكواد CSS , JS , HTML في بلوجر
» إضافة آداة مواضيع مقترحة لمدونات بلوجر
» الطريقة الصحيحة للتعامل مع التسميات أو الأقسام في بلوجر
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى