JS实现商品橱窗特效
本文实例为大家分享了JS实现商品橱窗特效的具体代码，供大家参考，具体内容如下
知识点
换算公式
① 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
滚动条长度/盒子的长度 = 盒子的长度/内容的长度
② 内容走的距离 = （内容的长度 - 盒子的长度）/ （盒子的长度 - 滚动条的长度）* 滚动条走的距离
运行效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border:none;
}
#box{
width: 800px;
height: 200px;
border: 1px solid #ddd;
position: relative;
margin: 100px auto;
overflow: hidden;
}
#box ul{
width: 5200px;
position: absolute;
left: 0;
top: 20px;
}
#box ul li{
float: left;
}
#box_bottom{
position: absolute;
left: 0;
bottom: 0;
background-color: #e8e8e8;
width: 100%;
height: 25px;
}
.mask{
position: absolute;
left: 0;
top:0;
height: 25px;
background-color: orangered;
border-radius: 12px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<ul id="box_top">
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img3.jpg" alt=""></li>
<li><img src="images/img4.jpg" alt=""></li>
<li><img src="images/img5.jpg" alt=""></li>
<li><img src="images/img6.jpg" alt=""></li>
<li><img src="images/img7.jpg" alt=""></li>
<li><img src="images/img8.jpg" alt=""></li>
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img3.jpg" alt=""></li>
<li><img src="images/img4.jpg" alt=""></li>
<li><img src="images/img5.jpg" alt=""></li>
<li><img src="images/img6.jpg" alt=""></li>
<li><img src="images/img7.jpg" alt=""></li>
<li><img src="images/img8.jpg" alt=""></li>
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img3.jpg" alt=""></li>
<li><img src="images/img4.jpg" alt=""></li>
<li><img src="images/img5.jpg" alt=""></li>
<li><img src="images/img6.jpg" alt=""></li>
<li><img src="images/img7.jpg" alt=""></li>
<li><img src="images/img8.jpg" alt=""></li>
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img3.jpg" alt=""></li>
<li><img src="images/img4.jpg" alt=""></li>
<li><img src="images/img5.jpg" alt=""></li>
<li><img src="images/img6.jpg" alt=""></li>
<li><img src="images/img7.jpg" alt=""></li>
<li><img src="images/img8.jpg" alt=""></li>
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
</ul>
<div id="box_bottom">
<span class="mask"></span>
</div>
</div>
<script>
window.onload = function () {
// 1. 获取需要的标签
var box = document.getElementById("box");
var box_top = document.getElementById("box_top");
var box_bottom = document.getElementById("box_bottom");
var mask = box_bottom.children[0];
// 2. 设置滚动条的长度
// 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
mask.style.width = mask_len + 'px';
// 3. 鼠标操作
mask.onmousedown = function (event) {
var e = event || window.event;
// 3.1 求出初始值
var beginX = e.clientX - mask.offsetLeft;
// 3.2 移动
document.onmousemove = function (event) {
var e = event || window.event;
// 3.3 求出移动的距离
var endX = event.clientX - beginX;
// 边界值
if(endX < 0){
endX = 0;
}else if(endX >= box.offsetWidth - mask.offsetWidth){
endX = box.offsetWidth - mask.offsetWidth;
}
// 3.4 动起来
mask.style.left = endX + 'px';
// 内容走的距离 = （内容的长度 - 盒子的长度）/ （盒子的长度 - 滚动条的长度）* 滚动条走的距离
var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX;
box_top.style.left = -content_len + 'px';
return false;
};
document.onmouseup = function () {
document.onmousemove = null;
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery+json实现动态商品内容展示的方法
本文实例讲述了jquery+json实现动态商品内容展示的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xm
-
JS实现电商商品展示放大镜特效
本文实例为大家分享了JS实现电商商品展示放大镜的具体代码,供大家参考,具体内容如下 知识点 1.使用children获取字标签组 2.求当前鼠标坐标 3.碰撞检测 4.大小盒子通过比例同步 运行效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
-
JS实现商品橱窗特效
本文实例为大家分享了JS实现商品橱窗特效的具体代码,供大家参考,具体内容如下 知识点 换算公式 ① 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度 滚动条长度/盒子的长度 = 盒子的长度/内容的长度 ② 内容走的距离 = (内容的长度 - 盒子的长度)/ (盒子的长度 - 滚动条的长度)* 滚动条走的距离 运行效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset
-
js实现商品抛物线加入购物车特效
本文实例为大家分享了js实现商品抛物线加入购物车动画代码,供大家参考,具体内容如下 parapola.js /*! * by zhangxinxu(.com) 2012-12-27 * you can visit http://www.zhangxinxu.com/wordpress/?p=3855 to get more infomation * under MIT license */ var funParabola = function(element, target, options)
-
原生JS实现的放大镜特效示例【测试可用】
本文实例讲述了原生JS实现的放大镜特效.分享给大家供大家参考,具体如下: 最近在做ecshop的二次开发,遇到一些jquery插件与ecshop的冲突, 调整冲突的需要修改的地方又太多,修改起来得不偿失, 故做了一个原生的js实现商品详情页面的放大镜效果,以避免冲突! 下面介绍一下代码及实现过程: 首先,创建fangda.html文件 在文件头部的<head></head>中添加文件的css样式,即: <style type="text/css">
-
js实现飞入星星特效代码
本文实例讲述了js实现飞入星星特效代码,分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <html> <head> <title>星空极速飞入效果</title> <style type="text/css"> <!-- body { background-color: #000066; } --> </style> </head> <body> <scr
-
js图片轮播特效代码分享
本文实例讲述了js图片轮播特效,分享给大家供大家参考.具体如下: 这是一款基于javascript实现的图片轮播特效代码,有缩略图和标题,可以自定义标题. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播特效代码如下 <head> <meta http-equiv="Content-Type" co
-
js实现文字闪烁特效的方法
本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码如下 <html> <head> <meta charset="gb2312" /> <title>js实现文字闪烁特效</title> </head> <script> var flag = 0; fun
-
js文字横向滚动特效
本文为大家分享了js文字横向滚动特效代码,具体实现内容如下: 页面布局 <div id="scroll_div" class="fl"> <div id="scroll_begin"> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_righ
-
js实现无缝滚动特效
本文实例为大家介绍了js实现无缝滚动特效需要做到的功能,以及关键性js代码,分享给大家供大家参考,具体内容如下 运行效果图: 结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图片暂停移动(setInterval,clearInterval) 4.鼠标移到图片上,高亮(a:hover) 5.点击小图, 下面的大图会改变 6.文字区域随着图片的变化而变
-
js实现DOM走马灯特效的方法
本文实例讲述了js实现DOM走马灯特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
-
JS实现灯泡开关特效
JS实现灯泡开关特效的具体代码,供大家参考,具体内容如下 并且显示时间,文字 首先准备两张图片:开灯ON.jpg:关灯OFF.jpg 效果图: 下面是具体实现代码: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>开关灯特效</title> <link href="css/bulb.css" rel=&