كود رئيه الصوره من قرب لعدسه زوم بالبلوجر

مشاهدات الان

يستخدم بالبلوجر وللويب المثال

HTML/JavaScript

 https://sfehthayef.blogspot.com/p/blog-page.html

 الكود

 

 <p>&nbsp;المثال لرئيه</p><style>

 * {box-sizing: border-box;}

 .img-magnifier-container {

 position:relative;

 }

 .img-magnifier-glass {

 position: absolute;

 border: 3px solid #000;

 border-radius: 50%;

 cursor: none;

 width: 100px;

 height: 100px;

 }

 </style>

 <script>

 function magnify(imgID, zoom) {

 var img, glass, w, h, bw;

 img = document.getElementById(imgID);

 glass = document.createElement("DIV");

 glass.setAttribute("class", "img-magnifier-glass");

 img.parentElement.insertBefore(glass, img);

 glass.style.backgroundImage = "url('" + img.src + "')";

 glass.style.backgroundRepeat = "no-repeat";

 glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";

 bw = 3;

 w = glass.offsetWidth / 2;

 h = glass.offsetHeight / 2;

 glass.addEventListener("mousemove", moveMagnifier);

 img.addEventListener("mousemove", moveMagnifier);

 glass.addEventListener("touchmove", moveMagnifier);

 img.addEventListener("touchmove", moveMagnifier);

 function moveMagnifier(e) {

 var pos, x, y;

 e.preventDefault();

 pos = getCursorPos(e);

 x = pos.x;

 y = pos.y;

 if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}

 if (x < w / zoom) {x = w / zoom;}

 if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}

 if (y < h / zoom) {y = h / zoom;}

 glass.style.left = (x - w) + "px";

 glass.style.top = (y - h) + "px";

 glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";

 }

 function getCursorPos(e) {

 var a, x = 0, y = 0;

 e = e || window.event;

 a = img.getBoundingClientRect();

 x = e.pageX - a.left;

 y = e.pageY - a.top;

 x = x - window.pageXOffset;

 y = y - window.pageYOffset;

 return {x : x, y : y};

 }

 }

 </script>

 <div class="img-magnifier-container">

 <img height="400" id="myimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4erD-5n2Ca3Bc2zd9Z0yYOMxcqf00XAieiUdNGc9O12DYVDcZsiEaNeR3v90sQQuHwyPqPMG1q2K3203JLUMAS8yB6pTv8MLidGvlEeEJz9VMWs4rOPvhapDau0qkqr0NFdGYTwV8UgCi/s600-Ic42/kuwait_hayef-Hacked-by.gif" width="600" />

 </div>

 <script>

 magnify("myimage", 3);

 </script>

 وسلامتكم راح اجربها في برمجه البلوجر

  

Share on Google Plus

صاحب المدونه : صفحات هايف

اهلا وسهلا فيكم معنا بالمدونه البسيطه ""