您的位置：首页 > Web前端 > JavaScript

2016/12/30javascript考试题

2017-01-02 20:15 99 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src = "cookie.js"></script>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
img{display:block;}
html,body{width:100%;}
#header{width:100%;height:50px;background:#f00;}
#box{width:1200px;height:100px;background:#9fc;margin:0 auto;position: relative;}
#main{width:1200px;height:800px;background:#0ff;margin:0 auto;}
#mainleft{width:1000px;height:800px;background:#f0f;float:left;}

#zhuleft{width:490px;height:800px;border-right:1px solid #eee;float:left;position: relative;}
#list img{width:50px;height:50px;}
#list li{width:50px;height:50px;float:left;margin:2px 5px;}

#zhuright{width:500px;height:800px;
float:right;}
#tao{height:200px;background:#eee;width:100%;}
#size{height:50px;background:#ff0;width:100%;margin:10px 0;}
#size li{width:45px;height:45px;float:left;margin:2px 10px;border:1px solid #000;line-height:50px;text-align: center;}
#size li:nth-child(1){border:0;}

#se{height:50px;background:#0ff;width:300px;margin:10px 0;}
#se li{width:45px;height:45px;float:left;margin:2px 3px;border:1px solid #000;line-height:50px;text-align: center;}
#se li:nth-child(1){border:0;}

#shopcar{width:30px;height:100px;background:#f00;position:fixed;right:0;top:45%;}

#mainright{width:180px;height:800px;float:right;background:#ff0;}
.yibox{width:85px;height:100px;border:1px solid #eee;float:left;font-size:12px;}
.yibox img{width:
12d85
78px;height:78px;}

#yuan{width:30px;height:30px;border-radius:100%;display: none;
position: absolute;}

#search{width:300px;height:50px;float:right;margin-right:50px;}
#xian{
position:absolute;top:50px;right:55px;background:#0f0;}
#xian li{border-bottom:1px dashed #eee;width:300px;text-align: center;}

#smbox{width:450px;height:450px;}
#simg{width:450px;height:450px;}
#bview{width:450px;height:450px;overflow: hidden;position:absolute;left:460px;top:0;display:none;}
#sview{width:80px;height:80px;
position:absolute;top:0;left:0;opacity:0.5;background:#fff;}
#bimg{position: absolute;}

#goubtn{width:160px;height:50px;border:0;background:#ff4400;border-radius:5px;color:#fff;}
#maibtn{width:160px;height:50px;border:0;background:#ff4400;border-radius:5px;color:#fff;}

</style>
</head>
<body>
<div id="header">
<a href = "mycar.html">我的购物车</a>
</div>
<div id="box">
<input id = "search" type="text" placeholder="请输入关键词"/>
<ul id = "xian">
<li>请输入关键词</li>
</ul>
</div>
<div id="main">
<div id="mainleft">
<div id="zhuleft">
<div id="smbox">
<img id = "simg" src="images/a1.jpg" alt=""/>
<div id="sview"></div>
</div>
<div id="bview">
<img  id = "bimg" src="images/a1.jpg" alt=""/>
</div>
<ul id="list">
<li><img src="images/a1.jpg" alt=""/></li>
<li><img src="images/a2.jpg" alt=""/></li>
<li><img src="images/a3.jpg" alt=""/></li>
<li><img src="images/a4.jpg" alt=""/></li>
<li><img src="images/a5.jpg" alt=""/></li>
</ul>
</div>
<div id="zhuright">
<h3>韩国健身服女三件套显瘦运动套装女跑步文胸罩衫短裤瑜珈锻炼</h3>
<ul id="tao">
<li>价格<span>148</span></li>
<li>淘宝价75</li>
<li>优惠

</li>
</ul>
<p>广东深圳 至 河南郑州快递 免运费卖家承诺48小时内发货</p>
<ul id="size">
<li>尺码</li>
<li>s</li>
<li>m</li>
<li>l</li>
</ul>

<ul id="se">
<li>颜色</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<button id  = "maibtn">立即购买</button>

<button id="goubtn">加入购物车
<img id = "yuan" src="images/a1.jpg" alt=""/>
</button>

</div>

</div><!--主要部分-->
<div id="mainright">
<!-- <div class="yibox">
<p><img src="images/b1.jpg" alt=""></p>
<p><span></span></p>
</div>-->
</div>
<div id="shopcar">购物车
</div>
</div>
<script>
var _simg = document.getElementById("simg");
var _smbox = document.getElementById("smbox");
var _imgs = document.getElementById("list").getElementsByTagName("img");
var _bimg = document.getElementById("bimg");
var _bview = document.getElementById("bview");
var _sview = document.getElementById("sview");
var _main = document.getElementById("main");

console.log(_imgs);
console.log(_simg);

for(var i=0;i<_imgs.length;i++){
_imgs[i].onmouseenter = function(){
_simg.src = this.src;
_bimg.src = this.src;

}
}

//搜索
var _search = document.getElementById("search");
console.log(_search);
var _xian = document.getElementById("xian");
_search.onkeyup = function(){
text = _search.value;
var _src = document.createElement("script");
_src["src"] = "https://suggest.taobao.com/sug?code=utf-8&q="+_search.value+"&_ksTS=1482931737588_1810&callback=suggest";
document.body.appendChild(_src);
}

function suggest(data){
console.log(data);
_xian.textContent = "";
for(var i= 0;i<data.result.length;i++){
var _newli = document.createElement("li");
_newli.textContent = data.result[i][0];
_xian.appendChild(_newli);
}

}

//购物车

var _goubtn = document.getElementById("goubtn");
var _shopcar = document.getElementById("shopcar");
var _yuan = document.getElementById("yuan");
_goubtn.onclick = function(){
//alert("哈哈");
_yuan.style.display = "block";
var _st = document.documentElement.scrollTop||document.body.scrollTop;
var _src = {"x":_yuan.offsetLeft,"y":_yuan.offsetTop};
var _target = {"x":_shopcar.offsetLeft - _src.x,"y":_shopcar.offsetTop-_src.y};
console.log(_target);
console.log(_src);
var _a = 0.001;
var _b = (_st+_target.y - _a*_target.x*_target.x)/_target.x;
var speedx = 0;
timer = setInterval(function(){
var _left = _src.x + speedx;
var _top = _src.y+_a*speedx*speedx+_b*speedx;
speedx += 10;
_yuan.style.left = _left + "px";
_yuan.style.top = _top + "px";
if(_left>=_shopcar.offsetLeft){
clearInterval(timer);
_yuan.style.display = "none";
_yuan.style.left = _src.x + "px";
_yuan.style.top = _src.y + "px";
}
},10);
var _goods = {gname:"运动衣",gimg:"images/b1.jpg",gprice:"455",gcount:1};
var _str = getCookie(_goods.gname);
if(_str){
var _good = JSON.parse(_str);
_good.gcount++;
saveCookie(_goods.gname,JSON.stringify(_good),3)
}else{
saveCookie(_goods.gname,JSON.stringify(_goods),3);
}

}

//放大镜
_smbox.onmouseenter = function(e){
e = e||window.event;
var _cx = e.clientX;
var _cy = e.clientY;
_bview.style.display = "block";
_sview.style.display = "block";
document.onmousemove = function(e){
e = e||window.event;
var _st = document.documentElement.scrollTop||document.body.scrollTop;
var _left = e.clientX -_main.offsetLeft - _sview.offsetWidth/2;
var _top = e.clientY + _st - _main.offsetTop-_sview.offsetHeight/2;

if(_left<0){
_left=0;
}
if(_left>_smbox.offsetWidth-_sview.offsetWidth){
_left=_smbox.offsetWidth-_sview.offsetWidth
}
if(_top<0){
_top=0;
}
if(_top>_smbox.offsetHeight-_sview.offsetHeight){
_top=_smbox.offsetHeight-_sview.offsetHeight;
}
_sview.style.left = _left + "px";
_sview.style.top = _top + "px";
//小视宽高
var _w = _bview.offsetWidth*_simg.offsetWidth/_bimg.offsetWidth;
var _h = _bview.offsetHeight*_simg.offsetHeight/_bimg.offsetHeight;

_sview.style.width = _w + "px";
_sview.style.height = _h + "px";

//大视位移
var _bl = _sview.offsetLeft*_bimg.offsetWidth/_simg.offsetWidth;
var _bt = _sview.offsetTop*_bimg.offsetHeight/_simg.offsetHeight;

_bimg.style.left = -_bl + "px";
_bimg.style.top = -_bt+"px";

}

}

_smbox.onmouseleave = function(){
document.onmousemove = null;
_bview.style.display = "none";
_sview.style.display = "none";
}

//json
window.onload = function(){
loadjson();
}

function loadjson(){
var arr=[{"gid":1,"gimg":"images/b1.jpg","gprice":1243},
{"gid":2,"gimg":"images/b2.jpg","gprice":1243},
{"gid":3,"gimg":"images/b3.jpg","gprice":1243}
];
for(var j=0;j<arr.length;j++){
var _jsonstr = arr[j];
console.log(_jsonstr);

var _yibox = document.createElement("div");
_yibox.className = "yibox";
var _img = document.createElement("img");
_img["src"] = _jsonstr.gimg;

var _pprice = document.createElement("p");
_pprice.textContent = "商品价格￥";
var _span = document.createElement("span");
_span.textContent = _jsonstr.gprice;
_pprice.appendChild(_span);

var _mainright = document.getElementById("mainright");
_yibox.appendChild(_img);
_yibox.appendChild(_pprice);
_mainright.appendChild(_yibox);

}

}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航