可左右平滑滚动的产品展示效果

2024-12-03 04:39:40

图片

=0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false}
AutoPlay_1()}
function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft>=GetObj('List1_1').scrollWidth){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft-GetObj('List1_1').scrollWidth}
GetObj('ISL_Cont_1').scrollLeft+=Space_1}
function CompScr_1(){if(Comp_1==0){MoveLock_1=false;return}
var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)TempSpace){Comp_1-=TempSpace;num=TempSpace}else{num=Comp_1;Comp_1=0}
GetObj('ISL_Cont_1').scrollLeft+=num;setTimeout('CompScr_1()',TempSpeed)}}
function picrun_ini(){
GetObj("List2_1").innerHTML=GetObj("List1_1").innerHTML;
GetObj('ISL_Cont_1').scrollLeft=fill_1>=0?fill_1:GetObj('List1_1').scrollWidth-Math.abs(fill_1);
GetObj("ISL_Cont_1").onmouseover=function(){clearInterval(AutoPlayObj_1)}
GetObj("ISL_Cont_1").onmouseout=function(){AutoPlay_1()}
AutoPlay_1();
}
//产品展示滚动图片结束
//-->

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

链接图片无缝(无间断)向左平滑滚动Js版代码

向左无缝滚动 body,html,div,a{ margin:0; padding:0} #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: le
jQuery 锚点跳转滚动条平滑滚动一句话代码

jQuery锚点跳转滚动条平滑滚动一句话代码复制代码代码如下: $("html,body").animate({scrollTop: $("#box").offset().top}, 1000); 一下是一些jquery的小技巧1. 控制编译结果复制代码代码如下: <script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></sc
不用锚点也可以平滑滚动到页面的指定位置实现代码

不用锚点也可以平滑滚动到页面的指定位置复制代码代码如下: <!DOCTYPE html> <html > <head> <meta content="text/html; charset=utf-8" /> <title>ScrollTo:平滑滚动到页面指定位置</title> <link rel="stylesheet" type="text/css" href=
可左右平滑滚动的产品展示效果

图片 =0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft>=GetObj('List1_1').scrollWidth){GetObj('ISL_
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

最近要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的positio
jquery实现网页的页面平滑滚动效果代码

本文实例讲述了jquery实现网页的页面平滑滚动效果代码.分享给大家供大家参考,具体如下: 这款网页页面平滑滚动jquery代码,点击链接会让网页平滑滚动到链接对应的位置. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-link-scroll-page-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo
jQuery实现平滑滚动的标签分栏切换效果

本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 这是一款老外的作品,后半部分的代码有点乱,具体就不细整理了,喜欢的朋友自己拷贝代码慢慢整理一下吧,呵呵,虽乱但功能不乱,预览看效果吧,很不错的标签滚动切换. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-bq-menu-cha-style-codes/ 具体代码如下: <!DOCTYPE html> <head&g
使用jquery animate创建平滑滚动效果（可以是到顶部、到底部或指定地方）

采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. 滚动到顶部: 复制代码代码如下: $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 滚动到指定位置: 复制代码代码如下: $('.scroll_a').click(function(){$('htm
JS中锚点链接点击平滑滚动并自由调整到顶部位置

锚点链接点击平滑滚动并自由调整到顶部的位置一.添加锚点注意a标签用的nacTo 而不是href: <ul> <li><a class="anchor" navTo="one">目标选择</a></li> <li><a class="anchor" navTo="two">目标客户</a></li> <li>
jQuery实现锚点向下平滑滚动特效示例

实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; }); 简单实例代码: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.
Js实现滚动变色的文字效果

Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 以下是源代码: 复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滚动变色的文字js特效</title>
JQuery简单实现锚点链接的平滑滚动

一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a>标签跳转到 id为content的指定位置那里. <a id="turnToContent" href="#content"></a> 然后呢,就在我们想要的位置设置id为content的内容块,这里用一个div模拟一篇不像文章的文章.最好将此d

可左右平滑滚动的产品展示效果

相关推荐

随机推荐