JS实现百度搜索图片里滑动图片特效

JS实现百度搜索图片里滑动图片特效,第1张

我修改测试通过一个。但是有个问题。若改成鼠标悬停边缘滚下去,也就是onMouseOver。是停不下来的,会一直滚下去,因为无论怎么样都是鼠标碰触事件。所以我强烈建议用点击事件,onclick。
js css image都是调用的。我都写到页面里了,你自己改下。地址我没改。本地测试的。自己换成你的。

给你封装了下,自己调用函数就行了
function marquee(outElement,childElment,copyElement,speed){
var colee2=documentgetElementById(copyElement);
var colee1=documentgetElementById(childElment);
var colee=documentgetElementById(outElement);
colee2innerHTML=colee1innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2offsetTop-coleescrollTop<=0){
coleescrollTop-=colee1offsetHeight; //colee跳到最顶端
}else{
coleescrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
coleeonmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
coleeonmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
}
//============================函数这么调用就行了
marquee("colee","colee1","colee2",30);//自己改参数

1 下载ui-bootstrapjs程序>target:点击的图
把target复制一个出来,设置postion:fixed,然后加入到body后面,用于放大显示。
把target设置为不显示(visiable:hidden)。
移动问题:
逗它旁边的也需要跟着移动,同时达到一个循环地,看不懂什么意思。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12706879.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-27
下一篇 2023-05-27

发表评论

登录后才能评论

评论列表(0条)

保存