关键代码见红色部分
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="icon" type="image/png" href="/favicon.ico">
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
<style>
.doctors_slide {
width: 900px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.doctors_slide ul {
height: 138px;
margin: 0px;
padding: 0px;
}
.doctors_slide ul li {
width: 98px;
height: 136px;
list-style: none;
float: left;
margin-right: 17px;
}
.doctors_slide ul li a {
float: left;
width: 100%;
height: 100%;
color: #fff;
}
.doctors_slide ul li a .tit {
position: absolute;
width: 98px;
height: 24px;
background: #156eb3;
margin-top: 112px;
line-height: 24px;
text-align: center;
}
.doc_main {
width: 900px;
height: 700px;
box-sizing: border-box;
margin: 40px auto;
border: solid 1px #000;
padding: 15px;
display: none;
}
.doc_main .midbox {
width: 880px;
margin: 0 auto;
}
.doc_main .midbox .l1 {
width: 470px;
height: 570px;
float: left;
}
.doc_main .midbox .l1 .t {
position: relative;
overflow: hidden;
}
.doc_main .midbox .l1 .dpic {
width: 190px;
height: 284px;
float: left;
}
.doc_main .midbox .l1 .dinfo {
width: 280px;
float: left;
padding-left: 5px;
font-size: 14px;
}
.doc_main .midbox .l1 .dinfo .a b {
font-size: 18px;
}
.doc_main .midbox .l1 .dinfo .b {
margin-top: 5px;
font-size: 14px;
}
.doc_main .midbox .l1 .c {
float: none;
clear: both;
font-size: 14px;
margin-top: 5px;
}
.doc_main .midbox .l2 {
width: 390px;
height: 570px;
float: right;
}
.doc_main .order {
width: 100%;
position: relative;
overflow: hidden;
}
.doc_main .order a {
float: left;
width: 245px;
height: 62px;
background: #2653a4;
margin-left: 32px;
text-align: center;
color: #fff;
font-size: 16px;
line-height: 62px;
border-radius: 5px;
}
.right_main {
float: left;
}
</style>
</head>
<body>
<div style="border: solid 1px #f00; box-sizing: border-box">
<ul>
<li style="background: #ca3e6f">1</li>
<li style="background: #1c1115">2</li>
<li style="background: #3155bc">3</li>
<li style="background: #167734">4</li>
<li style="background: #2ed461">5</li>
<li style="background: #4f9a66">6</li>
<li style="background: #4acd72">7</li>
<li style="background: #ca2b72">8</li>
<li style="background: #8d671f">9</li>
<li style="background: #d9a236">10</li>
<li style="background: #ca3e6f">11</li>
<li style="background: #1c1115">12</li>
<li style="background: #3155bc">13</li>
<li style="background: #167734">14</li>
<li style="background: #2ed461">15</li>
<li style="background: #4f9a66">16</li>
</ul>
</div>
<script type="text/javascript">
/**
* Created by Administrator on 2016/11/18 0018.
*/
$(function () {
ul = $('ul.navslist');
var sumWidth = 0;
ul.find("li").each(function () {
sumWidth += $(this).outerWidth(true);
});
var navsnew = sumWidth;
ul.css({
width: navsnew + 'px'
});
});
$(function () {
var $bl = $(".doctors_slide"),
$th = $(".navslist"),
blW = $bl.outerWidth(),
blSW = $bl[0].scrollWidth,
wDiff = (blSW / blW) - 1, // widths difference ratio
mPadd = 60, // Mousemove Padding
damp = 20, // Mousemove response softness
mX = 0, // Real mouse position
mX2 = 0, // Modified mouse position
posX = 0,
mmAA = blW - (mPadd * 2), // The mousemove available area
mmAAr = (blW / mmAA); // get available mousemove fidderence ratio
$bl.mousemove(function (e) {
//原来这里用的this.offset只能获取的是到父容器的边距，不是body的，要改
mX = e.pageX - $(this).offset().left;
mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
});
setInterval(function () {
posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
$th.css({marginLeft: -posX * wDiff});
}, 10);
});
</script>
</body>
</html>