以下只作为自己的笔迹记录
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>图片减速度滚动(by rentj1@163.com;)</title>
<style>
ul{ margin:0; padding:0}
ul{ list-style:none;}
body{font:12px/1.2 "宋体"; }
.scroll_box{ position:relative; height:164px; width:766px; border:1px solid #efefef; overflow:hidden;}
.scroll_box .list{ overflow:hidden; zoom:1; position:absolute;}
.scroll_box .list li{ width:235px; height:164px; padding:0 10px; text-align:center; float:left;}
.scroll_box .list .info{ line-height:1.5}
</style>
</head>
<body>
<div class="scroll_box" id="container">
<ul class="list" id="content">
<li>
<img src="D:\Pictrue\蒲公英\1.jpg" />
<div class="info">
兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围
</div>
<span class="price">会员价：￥288.00</span>
</li>
<li>
<img src="http://img11.360buyimg.com/n4/309/9230eaef-021c-447d-a64b-51ce698822ef.jpg" />
<div class="info">
兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围
</div>
<span class="price">会员价：￥288.00</span>
</li>
<li>
<img src="http://img10.360buyimg.com/n4/8792/7691b514-a0b3-469e-8a2b-37b219ebc490.jpg" />
<div class="info">
兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围
</div>
<span class="price">会员价：￥288.00</span>
</li>
<li>
<img src="http://img12.360buyimg.com/n4/285/c675cbb0-3a6f-4703-95fb-e75a7c90b48e.jpg" />
<div class="info">
兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围
</div>
<span class="price">会员价：￥288.00</span>
</li>
<li>
<img src="http://img12.360buyimg.com/n4/1957/22aa7c6d-4b70-49b8-a985-678b1d0e3781.jpg" />
<div class="info">
兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围
</div>
<span class="price">会员价：￥288.00</span>
</li>
<li>
<img src="http://img10.360buyimg.com/n4/2314/cf09b35a-eb6d-4a4f-a4dd-3301bfafef99.jpg" />
<div class="info">
兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围
</div>
<span class="price">会员价：￥288.00</span>
</li>
</ul>
</div>
<script>
untils = {
getComputedStyle: function(elem,syle){
var computedStyle = document.defaultView
&& document.defaultView.getComputedStyle
&& document.defaultView.getComputedStyle(elem,null);
if(!computedStyle){
computedStyle = elem.currentStyle
}
return computedStyle[syle]
},
setStyle: function(elem, name,val){
elem.style[name] = val;
},
get: function(id){
document.getElementById(id)
}
}
function ScrollSlider(container, content){
var clone = content.cloneNode(true);
var initcss= "left:0; top:0";
var contentHeight = content.offsetHeight;
var containerHeight = container.clientHeight;
clone.id = "content-clone";
container.appendChild(clone);
clone.setAttribute("cssText", initcss);
content.setAttribute("cssText", initcss);
clone.style.marginTop = contentHeight+"px";
this.content = content;
this.clone = clone;
this.container = container;
this.containerHeight = containerHeight;
this.contentHeight = contentHeight;
}
ScrollSlider.prototype = {
start: function(delay){
var _this = this;
clearInterval(_this.timer);
_this.timer = setInterval(function(){
_this.scroll();
},delay);
},
scroll: function(){
var marginTop = parseInt(untils.getComputedStyle(this.content, "marginTop"));
var offsetTop = this.contentHeight;
if(isNaN(marginTop))return;
if( -marginTop >= this.contentHeight){
marginTop = this.contentHeight;
}
if(marginTop > 0){
offsetTop = -offsetTop;
}
this.move(marginTop, offsetTop);
},
move: function(marginTop, offsetTop){
var s = this.containerHeight, s1 = 0, _this = this, m = 0;
var timer = setInterval(function(){
var speed = (s-s1)/8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
s1 += speed;
m = marginTop - s1;
untils.setStyle(_this.content, "marginTop", m + "px");
untils.setStyle(_this.clone, "marginTop", (m + offsetTop)+"px");
if(s-s1 <= 0){
clearInterval(timer);
}
},30);
}
};
var container = document.getElementById("container")
var content = document.getElementById("content")
var xx = new ScrollSlider(container, content);
xx.start(1000*3);
/*
//s=1/2 * at^2
//s (att)/2
//0<s<164
0,-164,-328,164,0
328,164,0,-164,-328,164,0
*/
</script>
</body>
</html>
分享到：
相关推荐
本项目名为“js两张图片并列循环滚动图片特效”，它提供了将两张（或更多）图片并列展示，并通过点击实现循环滚动的JavaScript解决方案。这种效果常用于产品展示、轮播广告等场景，使得页面更具视觉吸引力。 首先，...
标题"javascript经典特效---图片循环显示"涉及到的就是使用JavaScript来实现一个图片轮播（或称图片循环显示）的效果，这是网页设计中常见的视觉呈现方式。 图片循环显示的基本原理是通过JavaScript来控制一组图片...
【标题】"图片动态循环滚动js代码"是一个用于网页中实现图片轮播效果的JavaScript解决方案。这个技术主要用于提升用户体验，特别是在展示多张图片时，通过动态循环滚动的方式，让用户能够轻松浏览并欣赏到所有图片。...
在本文中，我们将深入探讨如何使用JavaScript实现特效图片的循环显示，这是网页设计中常见且重要的功能，可以提升用户体验。 首先，我们需要理解基本的HTML结构来展示图片。一个简单的HTML图片标签如下： ```html ...
在JavaScript编程领域，"纯js球形图片循环显示"是一个有趣的视觉效果，它涉及到Web前端开发中的CSS3、HTML和JavaScript技术。这个项目的核心目标是使用JavaScript动态地在一个球形布局中展示一组图片，并实现这些...
本资源提供的就是一个用JavaScript实现的横向循环滚动图片的代码实例。 JavaScript，简称JS，是Web开发中最常用的一种脚本语言，它运行在客户端浏览器上，为用户提供动态、实时的交互体验。在JavaScript中，我们...
在本示例中，“swiper横向循环焦点图片”是基于Swiper实现的一个功能，允许图片在水平方向上进行无缝循环展示，为用户提供流畅的浏览体验。下面我们将深入探讨Swiper的核心特性、配置选项以及如何实现横向循环焦点...
总结来说，"js两张图片并列循环滚动"涉及到HTML布局、CSS样式设计和JavaScript动态效果实现。对于初级JavaScript开发者，这是一个很好的实践项目，可以提升对DOM操作、事件处理和基本动画的理解。同时，这也是构建更...
/* 显示图片 */ } ``` 在JavaScript中，每次切换图片时，为新的图片添加`active`类，移除旧图片的`active`类，即可实现过渡效果。 5. **优化与交互**：可以进一步优化代码，例如添加预加载图片的逻辑，避免图片...
关于使用JavaScript实现图片等比例缩放功能，这是前端开发中常遇到的需求。图片等比例缩放是指在调整图片大小时，保持图片的宽高比不变，避免图片因缩放导致的变形。这种技术尤其在响应式网页设计中非常有用，可以...
标题“图片自动循环显示 js图片幻灯特效.rar”指的是一个使用JavaScript编写的图片轮播插件，具体是基于Prototype.js库实现的。Prototype.js是一个强大的JavaScript框架，它提供了许多方便的函数和类，简化了DOM操作...
在JavaScript中，显示图片是一项基本的操作，广泛应用于网页动态效果、用户交互以及图像处理等场景。这个案例，"JAVASCRIPT显示图片的案例"，很可能是为了展示如何利用JavaScript来控制图片的加载、显示、隐藏以及...
在探讨“js实现图片的无缝循环滚动”这一主题时，我们深入分析了通过JavaScript和HTML实现图片无缝滚动的技术细节，包括向上、向下以及向右滚动的实现方式。下面，我们将详细解析这一技术的关键知识点。 ### 图片...
在JavaScript中实现图片循环切换是一种常见的网页动态效果，它能够为用户提供更丰富的视觉体验，尤其在展示产品图册、幻灯片或者轮播广告时非常适用。以下将详细讲解如何利用JavaScript来创建一个图片循环切换的功能...
JavaScript（Js）是一种广泛应用于网页开发的脚本语言，它能够实现动态效果，如图片轮换显示。在网页设计中，图片轮换显示是一种常见的功能，可以用来展示多张图片，提升用户体验，尤其是在产品展示或者幻灯片效果的...
本文介绍了一个基于JavaScript和C#的图片循环显示解决方案。该方案主要利用了客户端JavaScript和服务器端C#技术，实现了图片的自动切换功能。 #### 代码解析 1. **HTML与ASP.NET标记**： - `...
本教程将深入探讨如何使用纯JavaScript实现一个简单的图片单次循环切换功能，无需依赖任何外部库，如jQuery或React。 首先，我们需要理解基本的HTML结构。在页面中，通常会有一个包含多个`<img>`标签的容器，每个`...
总结，这个压缩包提供了一个基于Flash的网页相册实例，展示了如何用Flash集成图片并创建循环显示的效果。尽管Flash已不再是现代网页开发的首选，但它仍然是理解Web历史和技术演进的一个重要环节。对于想要学习Web...
在本文中，我们将深入探讨如何使用纯JavaScript实现一个图片左右循环切换的功能，类似于CSDN首页的效果。这个功能常见于许多网站的轮播图展示，它允许用户在鼠标悬停时暂停自动切换，并在鼠标移开后恢复自动切换。...
总的来说，这个带左右箭头按钮的js循环滚动图片特效代码结合了JavaScript和jQuery的强大力量，为网站的产品展示提供了一个互动且引人入胜的方式，同时考虑了老版本浏览器的兼容性问题。这种技术在电商、新闻、旅游等...