<script>
window.onload=function(){
var rt=new imgRound("imgContainer",120,90,300,80,230,0.01);
setInterval(function(){rt.roundMove()},20)
}
function imgRound(id,w,h,x,y,r,dv,rh,ah){
if (ah==undefined) ah=1;
if (rh==undefined) rh=10;
var dv=dv*ah; //旋转速度
var pi=3.1415926575;
var d=pi/2;
var pd=Math.asin(w/2/r);
var smove=true;
var imgArr=new Array();
var objectId=id;
var o=document.getElementById(objectId);
o.style.position="relative";
var arrimg=o.getElementsByTagName("img");
var pn=arrimg.length; //图片数量
var ed=pi*2/pn;
for (n=0;n<arrimg.length;n++){
var lk=arrimg[n].getAttribute("link");
if (lk!=null) arrimg[n].setAttribute("title",lk)
arrimg[n].onclick=function(){
if (this.getAttribute("link")!=null){
if (this.getAttribute("target")!="_blank") window.location=(this.getAttribute("link"))
else window.open(this.getAttribute("link"))
}
}
arrimg[n].onmouseout=function(){smove=true;}
arrimg[n].onmouseover=function(){smove=false;}
arrimg[n].style.position="absolute";
imgArr.push(arrimg[n]);
}
this.roundMove=function(){
for (n=0;n<=pn-1;n++){
var o=imgArr[n];
var ta=Math.sin(d+ed*n),strFilter;
if (ta<0) o.style.left=Math.cos(d+ed*n-pd)*r+x+"px";
else o.style.left=Math.cos(d+ed*n+pd)*r+x+"px";
o.style.top=ta*rh+rh+y+"px";
var zoom=Math.abs(Math.sin((d+ed*n)/2+pi/4))*0.5+0.5;
o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*zoom*r+"px";
o.style.height=zoom*h+"px";
if (ta<0) {ta=(ta+1)*80+20;o.style.zIndex=0;}
else {ta=100;o.style.zIndex=1}
if (o.style.zIndex<=0) strFilter="FlipH(enabled:true)"
else strFilter="FlipH(enabled:false)";
strFilter=strFilter+" alpha(opacity="+ta+")";
o.style.opacity=ta/100;
o.style.filter=strFilter;
}
if (smove) d=d+dv;
}
}
</script>
<div id="imgContainer" style="width:600px;height:300px;border:1px solid red">
<img src="http://www.111cn.cn/blueidea/images/s1.jpg"/>
<img src="http://www.111cn.cn/blueidea/images/s2.jpg"/>
<img src="http://www.111cn.cn/blueidea/images/s3.jpg"/>
<img src="http://www.111cn.cn/blueidea/images/s4.jpg" link="http://www.baidu.com" target="_blank"/>
<img src="http://www.111cn.cn/blueidea/images/s5.jpg" link="http://www.111cn.cn"/>
<img src="http://www.111cn.cn/blueidea/images/s1.jpg"/>
<img src="http://www.111cn.cn/blueidea/images/s2.jpg"/>
<img src="http://www.111cn.cn/blueidea/images/s3.jpg"/>
</div>
分享到:
相关推荐
JavaScript(简称JS)是一种轻量级的编程语言,常用于网页和网络应用的开发,尤其在处理页面交互和动态效果方面表现出色。...开发者通过深入学习和实践,不仅可以制作出美观的图片滚动效果,还能增强自己的前端技能。
在学习和实践JavaScript图片滚动特效时,可以参考在线教程、视频课程或者阅读相关书籍,如《JavaScript高级程序设计》。同时,多动手实践,尝试修改和优化代码,这对于提升编程技能非常有帮助。记住,不断练习和探索...
在网页设计中,JS实现的图片滚动效果可以增加用户体验,吸引用户注意力,同时节省网页空间。 本项目提供两种不同的图片滚动效果,它们都是基于JS编写的,无需额外的服务器端语言支持,只需在HTML中嵌入相应的JS代码...
js 图片滚动 效果 function toleft(demo,demo1,demo2,speed,flag) { demo=$(demo); demo1=$(demo1); demo2=$(demo2) demo2[removed]=demo1[removed] function Marquee() { if(demo2.offsetWidth-demo....
综上所述,"js图片滚动效果(mootools)"涉及到了JavaScript编程、MooTools库的使用、DOM操作、事件处理、动画效果以及用户体验优化等多个知识点。通过深入理解和实践这些内容,可以创建出更加高效、易用的图片滚动...
JavaScript 图片滚动插件是一种广泛应用于网页设计中的动态效果工具,它使得图片展示更加生动有趣。在网页设计中,图片滚动通常用于展示多张图片,尤其是对于产品展示、新闻更新或者图片滑块等场景,能有效提升用户...
js图片滚动效果,div标签 引用操作简单的一个好例子
在图片滚动效果中,我们需要选中包含图片的容器,然后通过CSS操作改变其样式,以实现图片的移动。 2. **事件处理**:为了实现左右箭头的点击事件,我们需要为这两个元素绑定`click`事件。当用户点击箭头时,触发...
总的来说,“js两张图片并列循环滚动图片特效”是一个结合了JavaScript、CSS和HTML技术的网页互动组件,它提供了一种高效且灵活的方式来创建图片滚动效果,为网站增添生动的视觉体验。开发者可以通过理解和学习该...
在IT行业中,JavaScript(简称JS)是一种广泛使用的...在提供的压缩包文件`texiao7720_1560680894`中,应该包含了实现这一效果的源代码,你可以通过学习和调试这些代码,进一步加深对JavaScript图片滚动插件的理解。
JavaScript 图片滚动是一种常见的...综上所述,JavaScript图片滚动是一个涉及DOM操作、定时器、事件处理、CSS动画和响应式设计等多个方面的问题。熟练掌握这些知识点,能够帮助开发者创建出更具吸引力和互动性的网页。
在“JS实现图片滚动效果”中,我们通常会用到JavaScript的事件处理、定时器以及DOM操作等技术。例如,通过监听用户的行为(如点击按钮),触发图片的切换;使用setInterval或setTimeout函数创建定时器,实现自动轮播...
JavaScript主题图片滚动是一种常见的网页动态效果,用于展示一组图片并以滑动或切换的方式呈现,为网站增添视觉吸引力。在互联网上,这种技术被广泛应用于网站的首页、产品展示、轮播广告等场景,以优雅地展示信息并...
当然,更复杂的滚动效果可能需要借助专门的JavaScript库,如Swiper.js或Slick.js。 总结起来,实现"htmlcss 图片滚动特效"主要涉及HTML结构的建立、CSS布局和动画效果的设置,以及可能的JavaScript交互增强。通过...
1. **图片滚动**:图片滚动效果通常是通过修改图片元素的位置来实现的。例如,可以设置一个定时器,每隔一段时间更新图片的CSS属性,使图片在视口内移动,从而实现滚动效果。这种方法常用于轮播图或者新闻滚动条。 ...
总结,实现"带箭头的图片滚动特效,点击放大特效"需要结合CSS3动画、JavaScript/jQuery交互以及合理的图片管理和显示策略。通过这样的设计,不仅可以提升网站的视觉吸引力,还能提供更友好的用户体验。在实际项目中...
在本案例中,我们关注的是"js文字图片滚动特效",这是一种常见的网页动态效果,能够吸引用户注意力并增强用户体验。下面将详细介绍这些滚动特效的实现原理、常见方法以及如何在实际项目中应用。 一、文字滚动特效 ...
总的来说,“JS横向图片滚动效果”是一种通过JavaScript实现的网页动态效果,它涉及DOM操作、定时器、用户交互、动画效果以及性能优化等多个方面。通过学习和实践这样的项目,开发者可以提升自己在网页动态效果方面...
在本文中,我们将深入探讨JavaScript(JS)如何实现图片滚动效果,以及相关的关键知识点。 首先,我们需要理解HTML(HyperText Markup Language)基础。`123.html`可能是一个包含图片和用于滚动展示的基础HTML结构...