myscroll

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>装修省钱神器-10秒估算装修报价</title>
<link href="css/index.css" type="text/css" rel="stylesheet" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.min.js"></script>
<script src="js/my.js"></script>
<link href="css/mobiscroll.custom-2.17.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-2.17.0.min.js" type="text/javascript"></script>
</head>
<body>
<div class="body">
<div class="banner">
<img src="images/banner11.jpg" />
</div>
<div class="baojia_con" style="border-bottom:none ">
<a href="#">
<div class="position" id="city-picker"> <strong></strong>
<div class="position_con"> <i>您的当前位置:</i> <b><em id="areaContent">山东省莱芜市</em>
<span></span></b>
</div>
</div>
</a>
<div class="mianji">
<div class="mianji_con"> <u>我家的面积</u>
<div class="txt1"> <strong><input type="text" class="inputstyle1 shopcat" placeholder="请输入面积" /></strong> <em>m <sup>2</sup></em>
<p>
<a href="javascript:void(0)" class="icon_jian"></a>
<a href="javascript:void(0)" class="icon_jia"></a>
</p>
</div>
</div>
</div>
<div class="huxing">
<div class="hd">
<div class="hd_con"> <i></i>
<span>我家的户型</span>
</div>
</div>
<div class="bd">
<ul>
<li>
<div class="box1">
<strong><input type="text" value="2" class="shopcat"/>
<em>室</em></strong>
<p>
<a href="javascript:void(0)" class="icon_jian"></a>
<a href="javascript:void(0)" class="icon_jia"></a>
</p>
</div>
</li>
<li>
<div class="box1">
<strong>
<input type="text" value="2" class="shopcat" />
<em>厅</em>
</strong>
<p>
<a href="javascript:void(0)" class="icon_jian"></a>
<a href="javascript:void(0)" class="icon_jia"></a>
</p>
</div>
</li>
<li>
<div class="box1">
<strong>
<input type="text" value="2" class="shopcat"/>
<em>厨</em>
</strong>
<p>
<a href="#" class="icon_jian"></a>
<a href="#" class="icon_jia"></a>
</p>
</div>
</li>
<li>
<div class="box1">
<strong>
<input type="text" value="2" class="shopcat"/>
<em>卫</em>
</strong>
<p>
<a href="javascript:void(0)" class="icon_jian"></a>
<a href="javascript:void(0)" class="icon_jia"></a>
</p>
</div>
</li>
<li style="100% ">
<div class="box1">
<strong>
<input type="text" value="1" class="shopcat"/>
<em>阳台</em>
</strong>
<p>
<a href="javascript:void(0)" class="icon_jian"></a>
<a href="javascript:void(0)" class="icon_jia"></a>
</p>
</div>
</li>
</ul>
</div>
<div class="js_btn">
<form action="baojia.html?area=上海">
<p>
<input type="submit" value="免费获取价格详细" />
<!--<input type="submit" value="重新计算" />
-->
</p>
</form>

</div>
</div>
</div>

<!-- list -->
<!--<div class="detail">
<ul>
<li>
<em class="green"></em>
<span class="ml20">客厅</span>
<span class="fright">
<span class="fleft mr50">7970元</span>

<span class="go"></span>

</span>
</li>
<table class="detailtab">
<tr class="bordertnone">
<td>空间工程</td>
<td>工程项目</td>
<td>工程量</td>
<td>单价</td>
<td>总价</td>
</tr>
<tr>
<td rowspan="6">墙面</td>
<td>铲除墙面腻子层</td>
<td>45</td>
<td>15</td>
<td>706</td>
</tr>
<tr>
<td colspan="4" align="left">工艺标准:人工,装袋,具械损耗。</td>
</tr>
<tr>
<td >墙面滚胶</td>
<td>45</td>
<td>11</td>
<td>495</td>
</tr>
<tr>
<td colspan="4" align="left">工艺标准:龙马牌无甲醛109环保建筑胶水</td>
</tr>
<tr>
<td>墙面批腻子</td>
<td>45</td>
<td>28</td>
<td>1260</td>
</tr>
<tr>
<td colspan="4" align="left">工艺标准:"经典"牌内墙环保高性能粉末腻子抹刮</td>
</tr>
<tr>
<td rowspan="6">门窗</td>
<td>门套打底</td>
<td>3</td>
<td>286</td>
<td>858</td>
</tr>
<tr>
<td colspan="4" align="left">工艺标准:木工板打底,辅料为钉(可成)胶(百得)刷子等</td>
</tr>
<tr>
<td>铁平窗大理石台面</td>
<td>2</td>
<td>35</td>
<td>70</td>
</tr>
<tr>
<td colspan="4" align="left">工艺标准:指定(海螺、华润、英州、台泥)牌32.5R水泥、沙。(大理石由业主自购,不足1m按1m算)</td>
</tr>
<tr>
<td>墙面批腻子</td>
<td>45</td>
<td>28</td>
<td>1260</td>
</tr>
<tr>
<td colspan="4" align="left">工艺标准:"经典"牌内墙环保高性能粉末腻子抹刮</td>
</tr>
</table>
<li>
<em class="green"></em>
<span class="ml20">主卧</span>
<span class="fright">
<span class="fleft mr50">3894元</span>

<span class="go"></span>
</span>
</li>
<li>
<em class="green"></em>
<span class="ml20">次卧</span>
<span class="fright">
<span class="fleft mr50">3624元</span>

<span class="go"></span>
</span>
</li>
<li>
<em class="green"></em>
<span class="ml20">客厅</span>
<span class="fright">
<span class="fleft mr50">8512元</span>

<span class="go"></span>
</span>
</li>
<li>
<em class="green"></em>
<span class="ml20">厨房</span>
<span class="fright">
<span class="fleft mr50">3302元</span>

<span class="go"></span>
</span>
</li>
</ul>
</div>
-->
<!-- /list -->
<!--result-->
<!--<div class="bgf5"></div>
<div class="bg-fff account">
<h3 class="font26">
装修预算约
<span class="yellowtxt">2.8</span>

</h3>
<table class="smtable">
<tr>
<td>卧室</td>
<td>7519元</td>
<td>客厅</td>
<td>8513元</td>
</tr>
<tr>
<td>厨房</td>
<td>3302元</td>
<td>卫生间</td>
<td>4383元</td>
</tr>
<tr>
<td>阳台</td>
<td>1395元</td>
<td>其他</td>
<td>2707元</td>
</tr>
</table>
</div>
<div style="height:.3rem"></div>
<div class="bg-f5 ">
<div class="f5-L">
<img src="images/warn.jpg"/>
</div>
<div class="f5-R">稍后爱家网装修管家将电话联系您,进行价格满意度回访。</div>
</div>
<div class="bg-f5" style="padding-top:.05rem">
<div class="f5-L">
<img src="images/warn.jpg"/>
</div>
<div class="f5-R">本价格为新房办包估算价格(不含水电工程),旧房价格由实际工程量决定,详情请咨询装修管家。</div>
</div>
<center>
<input type="button" value="查看预算明细" class="lookdetail" />
</center>
-->
<!--result-->
<div class="bm_part">
<p>
<strong>
今日已有
<i>3654</i>
位业主
</strong>
<em>预约爱家装修服务并获取报价</em>
</p>
</div>
<div class="bm_yezhu">
<div id="demo">
<div id="indemo">
<div id="demo1">

<table>
<tr>
<td>刘洁</td>
<td>洛阳</td>
<td>126平</td>
<td>157****2651</td>
<td>3分钟前</td>
</tr>
<tr>
<td>王先生</td>
<td>南京</td>
<td>108平</td>
<td>132****9899</td>
<td>3分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
<tr>
<td>梁女士</td>
<td>上海</td>
<td>150平</td>
<td>139****6299</td>
<td>4分钟前</td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
var speed = 10;
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;

function Marquee() {
if (tab2.offsetHeight - tab.scrollTop <= 0)
tab.scrollTop -= tab1.offsetHeight
else {
tab.scrollTop++;
}
}
var MyMar = setInterval(Marquee, speed);
tab.onmouseover = function() {
clearInterval(MyMar)
};
tab.onmouseout = function() {
MyMar = setInterval(Marquee, speed)
};
</script></div>
<div class="whychooseus">
<div class="hd">
<h3>为什么要使用我们的报价神器?</h3>
</div>
<div class="bd">
<img src="images/ad1.png" />
</div>
</div>
<div class="footer">
<p>copyright&copy;2015-2016 爱家网 版权所有</p>
</div>
</div>
<!-- tc-->
<div class="info company">
<ul>
<li id="clear">取消</li>
<li id="show">确定</li>
</ul>
<div class="clear"></div>
<br />
<input type="text" placeholder="山东百传网络技术有限公司" class="nameInput" />
</div>
<select id="demoz" class="all_width ">
<optgroup label="山东省">
<option value="1">济南市</option>
<option value="2">泰安市</option>
<option value="3">滨州市</option>
<option value="4" selected="selected">莱芜市</option>
</optgroup>

<optgroup label="浙江省">
<option value="5">杭州市</option>
<option value="6">宁波市</option>
<option value="7">温州市</option>
<option value="8">嘉兴市</option>
</optgroup>
</select>
<script>
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
};
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<script>
$(function() {
//地址选择控件
$('#areaContent').click(function() {
$('#demoz').mobiscroll('show');
return false;
});

$('#demoz').mobiscroll().select({
theme : 'mobiscroll',
display : 'bottom',
//label: 'City',
lang : "zh",
group : {
clustered : true
},
// onSelect: function (valueText, inst) {
// var arryVal = inst._tempValue;
// var selectText = $('option[value="'+arryVal+'"]').text();
// $("#areaContent").text(selectText);
// //get_towers();
// // var val = inst.getVal(); // Call the getVal method
// // var value = inst.getValue(); //
// // var arryVal = inst.getArrayVal();
// //alert(valueText);
// },
onSelect: function (valueText, inst) {
var arryVal = inst._tempValue;

var $selected = $('option[value="'+arryVal+'"]');
var selectProvince = $selected.parent().attr("label");
var selectCity = $selected.text();
$("#areaContent").text(selectProvince +selectCity );
},
formatResult: function (data) {
return data[0] + '_' + data[1]+ '_'+ data[2];
}
});

})


</script>

</body>

</html>
<!-- // var arryVal = inst._tempValue;
// $("#areaContent").val(arryVal);
// get_towers();
// var val = inst.getVal(); // Call the getVal method
// var value = inst.getValue(); //
// var arryVal = inst.getArrayVal();
//alert(valueText); -->

原文地址:https://www.cnblogs.com/zhouyx/p/5639615.html