一.你需要准备?
二.效果预览
三.代码之风
3.1 HTML
<%--
Created by IntelliJ IDEA.
User: milogenius
Date: 2019/10/30
Time: 17:21
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
< html>
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Test</ title>
</ head>
<%--页面浮标--%>
< div style =" position : fixed; top : 43%; right : 0; z-index : 9; width : 69px; " id = " rule" >
< a id = " tz" style =" display : block" href = " https://blog.csdn.net/milogenius" > < img style =" width : 69px; " src = " ../images/rockets.jpg" alt = " " > </ a>
</ div>
< script src = " ../js/drag.js" > </ script> test
< script type = " text/javascript" >
new drag ( { el: 'rule' } ) ;
</ script>
</ body>
</ html>
3.2 JS
function drag ( ) {
this . obj = arguments[ 0 ] ;
this . el = document. getElementById ( this . obj. el) ;
this . l = 0 , this . t = 0 , this . old_l = 0 , this . old_t = 0 , this . point_l = 0 , this . point_t = 0 ;
this . index = 0 ;
this . init ( ) ;
}
drag. prototype = {
constructor: "drag" ,
init: function ( ) {
this . EventHandler ( ) ;
} ,
EventHandler: function ( ) {
var self = this ;
self. el. addEventListener ( "touchstart" , self. clickDown. bind ( this ) , false ) ;
self. el. addEventListener ( "touchmove" , self. clickMove. bind ( this ) , false ) ;
document. addEventListener ( "touchend" , self. clickUp. bind ( this ) , false ) ;
} ,
clickDown: function ( ) {
var self = this ;
document. addEventListener ( "touchmove" , self. htmlScroll, { passive: false } ) ;
document. querySelector ( "body" ) . style. overflow = "hidden" ;
var point = event. touches[ 0 ] ;
self. old_l = point. clientX;
self. old_t = point. clientY;
self. scroll ( ) ;
self. point_l = self. old_l - self. scroll ( ) . left;
self. point_t = self. old_t - self. scroll ( ) . top;
} ,
clickMove: function ( ) {
var self = this ;
var point = event. touches[ 0 ] ;
self. l = point. clientX;
self. t = point. clientY;
var now_l = self. l - self. point_l;
var now_t = self. t - self. point_t;
if ( now_l < 0 ) {
now_l = 0 ;
}
console. log ( window. screen. availWidth - self. getStyle ( ) . width. split ( "p" ) [ 0 ] )
if ( now_l > window. screen. availWidth - self. getStyle ( ) . width. split ( "p" ) [ 0 ] ) {
now_l = window. screen. availWidth - self. getStyle ( ) . width. split ( "p" ) [ 0 ]
}
if ( now_t > window. screen. availHeight - self. getStyle ( ) . height. split ( "p" ) [ 0 ] - 80 ) {
now_t = window. screen. availHeight - self. getStyle ( ) . height. split ( "p" ) [ 0 ] - 80
}
if ( now_t <= 0 ) {
now_t = 0 ;
}
self. el. style. left = now_l+ "px" ;
self. el. style. top = now_t+ "px" ;
} ,
clickUp: function ( ) {
var self = this ;
document. removeEventListener ( "touchmove" , self. htmlScroll, { passive: false } ) ;
document. querySelector ( "body" ) . style. overflow = "initial" ;
} ,
scroll: function ( ) {
var json = { } ;
json. left = this . el. offsetLeft;
json. top = this . el. offsetTop;
return json;
} ,
getStyle: function ( ) {
if ( window. currentStyle) {
style= window. currentStyle ( this . el, null ) ;
} else {
style= window. getComputedStyle ( this . el, null )
}
return style;
} ,
htmlScroll: function ( event) {
if ( event. cancelable) {
if ( ! event. defaultPrevented) {
event. preventDefault ( ) ;
}
}
}
}
3.3 JAVA
@Controller
@RequestMapping ( "/test" )
public class TestController {
@RequestMapping ( "toIndexPage.html" )
public String toIndexPage ( ) {
return "/test" ;
}
}