buy_house_image.blade.php 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <link rel="stylesheet" href="{{theme_asset('statistics/js/layer/skin/default/layer.css')}}?t=1">
  2. <style>
  3. body {background:white;}
  4. img {margin:0;padding:0;border:none;display:block;width:100%;}
  5. </style>
  6. <script src="{{ theme_asset('jquery/jquery.min.js') }}"></script>
  7. <script src="{{ theme_asset('statistics/js/layer/layer.js') }}"></script>
  8. {{--<img src="{{$src}}" class="img">--}}
  9. <script>
  10. //获取图片原始高度
  11. var img_url = '{{$src}}';
  12. var img = new Image();
  13. img.src = img_url;
  14. var img_width = 0;
  15. img.onload = function(){
  16. img_width = img.width;
  17. };
  18. //图片旋转
  19. var num = 0;
  20. function transform(){
  21. num = (num + 90) % 360;
  22. $("#layui-layer-photos").css('transform', 'rotate(' + num + 'deg)');
  23. }
  24. //图片缩放
  25. var flag = false;
  26. function zoom()
  27. {
  28. flag = !flag;
  29. if (flag) {
  30. $('.img').css('width',img_width+'px');
  31. } else {
  32. $('.img').css('width','100%');
  33. }
  34. }
  35. layer.photos({
  36. photos: {!!json_encode($photos)!!}
  37. });
  38. $(document).on("mousewheel DOMMouseScroll", ".layui-layer-phimg img", function (e) {
  39. var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
  40. (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
  41. var imagep = $(".layui-layer-phimg").parent().parent();
  42. var image = $(".layui-layer-phimg").parent();
  43. var h = image.height();
  44. var w = image.width();
  45. if (delta > 0) {
  46. h = h * 1.05;
  47. w = w * 1.05;
  48. } else if (delta < 0) {
  49. if (h > 100) {
  50. h = h * 0.95;
  51. w = w * 0.95;
  52. }
  53. }
  54. imagep.css("top", (window.innerHeight - h) / 2);
  55. imagep.css("left", (window.innerWidth - w) / 2);
  56. image.height(h);
  57. image.width(w);
  58. imagep.height(h);
  59. imagep.width(w);
  60. });
  61. </script>