$scope.over_img = function over_img(e){ // $scope.e_x = e.pageX // $scope.e_y =e.pageY $scope.img = $("table img"); $scope.img.mouseover(function() { var var_offset_left = $(this).offset().left; var result = $('<div id="result"> d</div>'); var img_width = $(this).width(); var article_width = $('body').width(); // Width of the article body var article_middle = article_width/2; var img_outer_width= var_offset_left + img_width; // width from the article left side + image width var side = img_outer_width - article_middle; ///console.log( " e_x : " + $scope.e_x+ " e_y: " + $scope.e_y ) //console.log( "var_offset_left : " + var_offset_left+ " img_width: " + img_width ) //console.log( " article_width : " + article_width+ " article_middle: " + article_middle ) console.log( " img_outer_width : " + img_outer_width+ " side : " + side ); if (side >0 && img_width < article_middle ){ //result.insertBefore($(body_image)).hide(); $(this).removeClass(); $(this).addClass("img_right"); console.log("Right side") } else if (side < 0 && img_width < article_middle){ $(this).removeClass(); $(this).addClass("img_left"); console.log("Left side") }else{ $(this).removeClass(); $(this).addClass("img_center"); console.log( " side ==> center " + side ); } $scope.e.preventDefault(); }); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter