Wap mobile phone image slide switching special effects without css3 elements js scripting _ javascript skills

Mobile phone image slide switching, there are many such examples on the Internet, but with the help of other components, make the code messy, this example does not have CSS 3 element js script writing, if you need a friend, you can refer to the mobile phone image sliding switch. There are many such examples on the Internet, but the Code cannot be confused by using other components, and the transform in css3 is used: translate (x, y); move elements, but find that the device that does not support css3 is finished immediately, and all have the determination to do it by themselves. Who knows there are a lot of problems, the most important thing is to add a link to the image. The up and down scroll bars in the webpage cannot scroll while dragging the image, and they cannot be compatible with the dragging on the pc machine; here we will briefly introduce the problems encountered and solutions;

Problem 1: After adding a link to the image, it always jumps to other pages while dragging;

The root cause of the problem is that you cannot determine whether to click or drag. The general sequence of mobile phone events is touchstart-> mousedown-> mousemove-> touchmove-> mouseup-> touchend-> click, different mobile phones may vary. Touch-screen mobile phone events generally use touchstart-> touchmove-> touchend-> click. The click event is last executed. When touchstart, touchmove, and touchend are processed, if you do not perform return or cancel the default operation, the click event is triggered, so that the webpage jumps away. The solution is to record the coordinates of touchstart and the coordinates of touchmove, determine whether the contacts are moved based on the two coordinate points. The Event parameter is worth noting. The touch screen is usually event.touches,event.tar getTouches, event. changedTouches. I found that the values of the three parameters in the test are the same, but it is worth noting that the touchend event does not get the contact coordinate (or perhaps a device problem ), when moving, touchmove will start constantly, and sometimes touchmove will not be triggered. In this case, the browser has its own function to remove the contact (or mouse) from the selected element, for example, if you press and hold the last time, a menu will appear (the PC chip will generate a thumbnail that can be dragged). In this way, you must first event when touchstart (mousedown. preventDefault (); cancel default.

Problem 2: the scroll bar on the webpage cannot scroll when dragging an image;

I believe that this problem will occur once created. In fact, the default event is canceled when moving (touchmove, mousemove. preventDefault (). What we need to do here is whether to move the obtained contact and the starting contact to be consistent. If they are consistent, the system returns the result directly, we also need to determine whether to move more X axis or Y axis, so that we can cancel the default value when sliding left or right, and do not cancel it when going to school;

Question 3: it is not compatible with the drag operation on the pc.

This is because when you bind an event, you cannot fully consider whether the event name is touchstart or mousedown. After searching for the event on the Internet, you can directly copy it if you do not do it.

this.eventName={touchstart:'touchstart',touchmove:'touchmove',touchend:'touchend',}

Making judgment

if(!device){this.eventName.touchstart='mousedown';this.eventName.touchmove='mousemove';this.eventName.touchend='mouseup';}

Dom. addEventListener (this. eventName. touchstart, handleEvent, false );
This probably means binding different events based on different devices

In fact, I have encountered many problems and I will not explain them one by one.

If you don't want to talk about it, you can directly post the Code. If you have any bad ideas, please include them and give your comments.

 
 
 
 
 

 
 

  
  

  
  

  
  

  
 
 
 
 

  
  
123