亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

正在回答

3 回答

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>放大鏡</title>

</head>

<style type="text/css">

? ? * {

? ? ? ? margin: 0;

? ? ? ? padding: 0

? ? }


? ? #demo {

? ? ? ? display: block;

? ? ? ? width: 400px;

? ? ? ? height: 255px;

? ? ? ? margin: 50px;

? ? ? ? position: relative;

? ? ? ? border: 1px solid #ccc;

? ? }


? ? #small-box {

? ? ? ? position: relative;

? ? ? ? z-index: 1;

? ? }


? ? #float-box {

? ? ? ? display: none;

? ? ? ? width: 160px;

? ? ? ? height: 120px;

? ? ? ? position: absolute;

? ? ? ? background: #ffffcc;

? ? ? ? border: 1px solid

? ? ? ? #ccc;

? ? ? ? filter: alpha(opacity=50);

? ? ? ? opacity: 0.5;

? ? ? ? cursor: move;

? ? }


? ? #mark {

? ? ? ? position: absolute;

? ? ? ? display: block;

? ? ? ? width: 400px;

? ? ? ? height: 255px;

? ? ? ? z-index: 10;

? ? ? ? background: #fff;

? ? ? ? filter: alpha(opacity=0);

? ? ? ? opacity: 0;

? ? ? ? cursor: move;

? ? }


? ? #big-box {

? ? ? ? display: none;

? ? ? ? position: absolute;

? ? ? ? top: 0;

? ? ? ? left: 460px;

? ? ? ? width: 400px;

? ? ? ? height: 300px;

? ? ? ? overflow: hidden;

? ? ? ? border: 1px solid #ccc;

? ? ? ? z-index: 1;;

? ? }


? ? #big-box img {

? ? ? ? position: absolute;

? ? ? ? z-index: 5

? ? }

</style>

<script>

? ? window.onload=function () {

? ? ? ? var objDemo=document.getElementById("demo");

? ? ? ? var objSmallBox=document.getElementById("small-box");

? ? ? ? var objFloatBox=document.getElementById("float-box");

? ? ? ? var objBigBox=document.getElementById("big-box");

? ? ? ? var objBigBoxImage=objBigBox.getElementsByTagName("img")[0];



? ? ? ? objSmallBox.onmouseover=function () {

? ? ? ? ? ? objFloatBox.style.display="block";

? ? ? ? ? ? objBigBox.style.display="block";

? ? ? ? }


? ? ? ? objSmallBox.onmouseout=function () {

? ? ? ? ? ? objFloatBox.style.display="none";

? ? ? ? ? ? objBigBox.style.display="none";

? ? ? ? }


? ? ? ? objSmallBox.onmousemove=function (ev) {

? ? ? ? ? ? var _event=ev ||window.event;

? ? ? ? ? ? var left=_event.clientX-objDemo.offsetLeft- objSmallBox.offsetLeft-objFloatBox.offsetLeft/2;

? ? ? ? ? ? var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;


? ? ? ? ? ? if (left<0){

? ? ? ? ? ? ? ? left=0;


? ? ? ? ? ? }else if (left>(objSmallBox.offsetWidth-objFloatBox.offsetWidth)){

? ? ? ? ? ? ? ? left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;

? ? ? ? ? ? }

? ? ? ? ? ? if (top<0){

? ? ? ? ? ? ? ? top=0;

? ? ? ? ? ? }else if (top>

? ? ? ? ? ? ? ? (objSmallBox.offsetHeight-objFloatBox.offsetHeight)){

? ? ? ? ? ? ? ? top=objSmallBox.offsetHeight-objFloatBox.offsetHeight;

? ? ? ? ? ? }


? ? ? ? ? ? objFloatBox.style.left=left+"px";

? ? ? ? ? ? objFloatBox.style.top=top+"px";

? ? ? ? ? ? var percentX=left/(objSmallBox.offsetWidth-objFloatBox.offsetWidth);


? ? ? ? ? ? var percentY=top/(objSmallBox.offsetHeight-objFloatBox.offsetHeight);

? ? ? ? ? ? objBigBoxImage.style.left=-percentX*(objBigBoxImage.offsetWidth- objBigBox.offsetWidth)+"px";

? ? ? ? ? ? objBigBoxImage.style.top=-percentY*(objBigBoxImage.offsetHeight-objBigBox.offsetHeight)+"px";

? ? ? ? }

? ? }

</script>



</head>

<body>

<div id="demo">

? ? <div id="small-box">

? ? ? ? <div id="mark"></div>

? ? ? ? <div id="float-box"></div>

? ? ? ? <img src="http://img1.sycdn.imooc.com//537d77fb0001559d04000255.jpg"/>//這是在某寶網頁中的圖片地址

? ? </div>

? ? <div id="big-box">

? ? ? ? <img src="http://img1.sycdn.imooc.com//537d781b0001c04210240654.jpg"/>//同上

? ? </div>

</div>

</body>

</html>


0 回復 有任何疑惑可以回復我~

小程序的代碼有沒有?。空垎栂?/p>

0 回復 有任何疑惑可以回復我~

沒有完整代碼 需要手敲

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
手把手教你實現電商網站后臺開發
  • 參與學習       117255    人
  • 解答問題       2101    個

手把手教你用PHP搭建電子商務平臺，由淺入深教你搭建電商系統

進入課程

完整代碼在那里？

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號