介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> & lt;/title>
,& lt; style>
*{才能
,,,保证金:0;
,,,填充:0;
,,,list-style:没有;
,,边界:没有;
,,}
#箱才能{
,,,宽度:800 px;
,,,身高:200 px;
,,,边界:1 px solid # ddd;
,,,位置:相对;
,,,保证金:100 px 汽车;
,,,溢出:隐藏;
,,}
# box ul{才能
,,,宽度:5200 px;
,,,位置:绝对;
,,,左:0;
,,,:20 px;
,,}
李#才能box ul {
,,,浮动:左;
,,}
# box_bottom{才能
,,,位置:绝对;
,,,左:0;
,,,底部:0;
,,,背景颜色:# e8e8e8;
,,,宽度:100%;
,,,身高:25 px;
,,}
.mask{才能
,,,位置:绝对;
,,,左:0;
,,:0;
,,,身高:25 px;
,,,背景颜色:橘红色;
,,,这个特性:12 px;
,,,光标:指针;
,,}
,& lt;/style>
& lt;/head>
& lt; body>
,& lt; div id=癰ox"比;
& lt;才能ul id=癰ox_top"比;
,,& lt; li> & lt; img src=https://www.yisu.com/zixun/巴枷?img1.jpg”alt=" ">
<李> 
<李> 
<李> 
<李> 
<李> 
<李> 
<李> 
<李> 
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<脚本>
窗口。onload=function () {//1。获取需要的标签
var盒=. getelementbyid(“盒”);
var box_top=. getelementbyid (“box_top”);
var box_bottom=. getelementbyid (“box_bottom”);
var=面具box_bottom.children [0];//2。设置滚动条的长度//滚动条长度=(盒子的宽度/内容的宽度)*盒子的宽度
var mask_len=(盒子。offsetWidth/box_top.offsetWidth) * box.offsetWidth;
mask.style。宽度=mask_len +“px”;//3。鼠标操作
面具。onmousedown=函数(事件){
var e=事件| | window.event;//3.1求出初始值
var beginX=e。clientX - mask.offsetLeft;//3.2移动
文档。onmousemove=函数(事件){
var e=事件| | window.event;//3.3求出移动的距离
var endX=事件。clientX - beginX;//边界值
如果(endX 小编给大家分享一下JS如何实现商品橱窗特效,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
具体内容如下
<强>知识点
换算公式
①滚动条长度=(盒子的宽度/内容的宽度)*盒子的宽度
滚动条长度/盒子的长度=盒子的长度/内容的长度
②内容走的距离=(内容的长度-盒子的长度)/(盒子的长度——滚动条的长度)*滚动条走的距离
运行效果
代码
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
<李>
