资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果。
1、单行滚动效果
<!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"> <head> <meta http-equiv="Content-Type" c /> <title>无标题文档</title> <style type="text/css"> ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20src%3D%22http%3A%2F%2Fimg.glzy8.com%2Fjslib%2Fjquery%2Fjquery14.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20AutoScroll(obj)%7B%20%0D%0A%24(obj).find(%22ul%3Afirst%22).animate(%7B%20%0D%0AmarginTop%3A%22-25px%22%20%0D%0A%7D%2C500%2Cfunction()%7B%20%0D%0A%24(this).css(%7BmarginTop%3A%220px%22%7D).find(%22li%3Afirst%22).appendTo(this)%3B%20%0D%0A%7D)%3B%20%0D%0A%7D%20%0D%0A%24(document).ready(function()%7B%20%0D%0AsetInterval('AutoScroll(%22%23scrollDiv%22)'%2C1000)%20%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> </head> <body> <div id="scrollDiv"> <ul> <li>百度 www.baidu.com</li> <li>管理资源吧 www.glzy8.com</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
二,多行滚动效果
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20src%3D%22http%3A%2F%2Fimg.glzy8.com%2Fjslib%2Fjquery%2Fjquery14.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F%2F%E6%BB%9A%E5%8A%A8%E6%8F%92%E4%BB%B6%20%0D%0A(function(%24)%7B%20%0D%0A%24.fn.extend(%7B%20%0D%0AScroll%3Afunction(opt%2Ccallback)%7B%20%0D%0A%2F%2F%E5%8F%82%E6%95%B0%E5%88%9D%E5%A7%8B%E5%8C%96%20%0D%0Aif(!opt)%20var%20opt%3D%7B%7D%3B%20%0D%0Avar%20_this%3Dthis.eq(0).find(%22ul%3Afirst%22)%3B%20%0D%0Avar%20lineH%3D_this.find(%22li%3Afirst%22).height()%2C%20%2F%2F%E8%8E%B7%E5%8F%96%E8%A1%8C%E9%AB%98%20%0D%0Aline%3Dopt.line%3FparseInt(opt.line%2C10)%3AparseInt(this.height()%2FlineH%2C10)%2C%20%2F%2F%E6%AF%8F%E6%AC%A1%E6%BB%9A%E5%8A%A8%E7%9A%84%E8%A1%8C%E6%95%B0%EF%BC%8C%E9%BB%98%E8%AE%A4%E4%B8%BA%E4%B8%80%E5%B1%8F%EF%BC%8C%E5%8D%B3%E7%88%B6%E5%AE%B9%E5%99%A8%E9%AB%98%E5%BA%A6%20%0D%0Aspeed%3Dopt.speed%3FparseInt(opt.speed%2C10)%3A500%2C%20%2F%2F%E5%8D%B7%E5%8A%A8%E9%80%9F%E5%BA%A6%EF%BC%8C%E6%95%B0%E5%80%BC%E8%B6%8A%E5%A4%A7%EF%BC%8C%E9%80%9F%E5%BA%A6%E8%B6%8A%E6%85%A2%EF%BC%88%E6%AF%AB%E7%A7%92%EF%BC%89%20%0D%0Atimer%3Dopt.timer%3FparseInt(opt.timer%2C10)%3A3000%3B%20%2F%2F%E6%BB%9A%E5%8A%A8%E7%9A%84%E6%97%B6%E9%97%B4%E9%97%B4%E9%9A%94%EF%BC%88%E6%AF%AB%E7%A7%92%EF%BC%89%20%0D%0Aif(line%3D%3D0)%20line%3D1%3B%20%0D%0Avar%20upHeight%3D0-line*lineH%3B%20%0D%0A%2F%2F%E6%BB%9A%E5%8A%A8%E5%87%BD%E6%95%B0%20%0D%0AscrollUp%3Dfunction()%7B%20%0D%0A_this.animate(%7B%20%0D%0AmarginTop%3AupHeight%20%0D%0A%7D%2Cspeed%2Cfunction()%7B%20%0D%0Afor(i%3D1%3Bi%3C%3Dline%3Bi%2B%2B)%7B%20%0D%0A_this.find(%22li%3Afirst%22).appendTo(_this)%3B%20%0D%0A%7D%20%0D%0A_this.css(%7BmarginTop%3A0%7D)%3B%20%0D%0A%7D)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%20%0D%0A_this.hover(function()%7B%20%0D%0AclearInterval(timerID)%3B%20%0D%0A%7D%2Cfunction()%7B%20%0D%0AtimerID%3DsetInterval(%22scrollUp()%22%2Ctimer)%3B%20%0D%0A%7D).mouseout()%3B%20%0D%0A%7D%20%0D%0A%7D)%20%0D%0A%7D)(jQuery)%3B%20%0D%0A%24(document).ready(function()%7B%20%0D%0A%24(%22%23scrollDiv%22).Scroll(%7Bline%3A4%2Cspeed%3A500%2Ctimer%3A1000%7D)%3B%20%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> </head> <body> <p>多行滚动演示:</p> <div id="scrollDiv"> <ul> <li>百度 www.baidu.com</li> <li>管理资源吧 www.glzy8.com</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
三、可控制向前向后的多行滚动
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20src%3D%22http%3A%2F%2Fimg.glzy8.com%2Fjslib%2Fjquery%2Fjquery14.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A(function(%24)%7B%20%0D%0A%24.fn.extend(%7B%20%0D%0AScroll%3Afunction(opt%2Ccallback)%7B%20%0D%0A%2F%2F%E5%8F%82%E6%95%B0%E5%88%9D%E5%A7%8B%E5%8C%96%20%0D%0Aif(!opt)%20var%20opt%3D%7B%7D%3B%20%0D%0Avar%20_btnUp%20%3D%20%24(%22%23%22%2B%20opt.up)%3B%2F%2FShawphy%3A%E5%90%91%E4%B8%8A%E6%8C%89%E9%92%AE%20%0D%0Avar%20_btnDown%20%3D%20%24(%22%23%22%2B%20opt.down)%3B%2F%2FShawphy%3A%E5%90%91%E4%B8%8B%E6%8C%89%E9%92%AE%20%0D%0Avar%20timerID%3B%20%0D%0Avar%20_this%3Dthis.eq(0).find(%22ul%3Afirst%22)%3B%20%0D%0Avar%20lineH%3D_this.find(%22li%3Afirst%22).height()%2C%20%2F%2F%E8%8E%B7%E5%8F%96%E8%A1%8C%E9%AB%98%20%0D%0Aline%3Dopt.line%3FparseInt(opt.line%2C10)%3AparseInt(this.height()%2FlineH%2C10)%2C%20%2F%2F%E6%AF%8F%E6%AC%A1%E6%BB%9A%E5%8A%A8%E7%9A%84%E8%A1%8C%E6%95%B0%EF%BC%8C%E9%BB%98%E8%AE%A4%E4%B8%BA%E4%B8%80%E5%B1%8F%EF%BC%8C%E5%8D%B3%E7%88%B6%E5%AE%B9%E5%99%A8%E9%AB%98%E5%BA%A6%20%0D%0Aspeed%3Dopt.speed%3FparseInt(opt.speed%2C10)%3A500%3B%20%2F%2F%E5%8D%B7%E5%8A%A8%E9%80%9F%E5%BA%A6%EF%BC%8C%E6%95%B0%E5%80%BC%E8%B6%8A%E5%A4%A7%EF%BC%8C%E9%80%9F%E5%BA%A6%E8%B6%8A%E6%85%A2%EF%BC%88%E6%AF%AB%E7%A7%92%EF%BC%89%20%0D%0Atimer%3Dopt.timer%20%2F%2F%3FparseInt(opt.timer%2C10)%3A3000%3B%20%2F%2F%E6%BB%9A%E5%8A%A8%E7%9A%84%E6%97%B6%E9%97%B4%E9%97%B4%E9%9A%94%EF%BC%88%E6%AF%AB%E7%A7%92%EF%BC%89%20%0D%0Aif(line%3D%3D0)%20line%3D1%3B%20%0D%0Avar%20upHeight%3D0-line*lineH%3B%20%0D%0A%2F%2F%E6%BB%9A%E5%8A%A8%E5%87%BD%E6%95%B0%20%0D%0Avar%20scrollUp%3Dfunction()%7B%20%0D%0A_btnUp.unbind(%22click%22%2CscrollUp)%3B%20%2F%2FShawphy%3A%E5%8F%96%E6%B6%88%E5%90%91%E4%B8%8A%E6%8C%89%E9%92%AE%E7%9A%84%E5%87%BD%E6%95%B0%E7%BB%91%E5%AE%9A%20%0D%0A_this.animate(%7B%20%0D%0AmarginTop%3AupHeight%20%0D%0A%7D%2Cspeed%2Cfunction()%7B%20%0D%0Afor(i%3D1%3Bi%3C%3Dline%3Bi%2B%2B)%7B%20%0D%0A_this.find(%22li%3Afirst%22).appendTo(_this)%3B%20%0D%0A%7D%20%0D%0A_this.css(%7BmarginTop%3A0%7D)%3B%20%0D%0A_btnUp.bind(%22click%22%2CscrollUp)%3B%20%2F%2FShawphy%3A%E7%BB%91%E5%AE%9A%E5%90%91%E4%B8%8A%E6%8C%89%E9%92%AE%E7%9A%84%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%20%0D%0A%7D)%3B%20%0D%0A%7D%20%0D%0A%2F%2FShawphy%3A%E5%90%91%E4%B8%8B%E7%BF%BB%E9%A1%B5%E5%87%BD%E6%95%B0%20%0D%0Avar%20scrollDown%3Dfunction()%7B%20%0D%0A_btnDown.unbind(%22click%22%2CscrollDown)%3B%20%0D%0Afor(i%3D1%3Bi%3C%3Dline%3Bi%2B%2B)%7B%20%0D%0A_this.find(%22li%3Alast%22).show().prependTo(_this)%3B%20%0D%0A%7D%20%0D%0A_this.css(%7BmarginTop%3AupHeight%7D)%3B%20%0D%0A_this.animate(%7B%20%0D%0AmarginTop%3A0%20%0D%0A%7D%2Cspeed%2Cfunction()%7B%20%0D%0A_btnDown.bind(%22click%22%2CscrollDown)%3B%20%0D%0A%7D)%3B%20%0D%0A%7D%20%0D%0A%2F%2FShawphy%3A%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE%20%0D%0Avar%20autoPlay%20%3D%20function()%7B%20%0D%0Aif(timer)timerID%20%3D%20window.setInterval(scrollUp%2Ctimer)%3B%20%0D%0A%7D%3B%20%0D%0Avar%20autoStop%20%3D%20function()%7B%20%0D%0Aif(timer)window.clearInterval(timerID)%3B%20%0D%0A%7D%3B%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%20%0D%0A_this.hover(autoStop%2CautoPlay).mouseout()%3B%20%0D%0A_btnUp.css(%22cursor%22%2C%22pointer%22).click(%20scrollUp%20).hover(autoStop%2CautoPlay)%3B%2F%2FShawphy%3A%E5%90%91%E4%B8%8A%E5%90%91%E4%B8%8B%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%20%0D%0A_btnDown.css(%22cursor%22%2C%22pointer%22).click(%20scrollDown%20).hover(autoStop%2CautoPlay)%3B%20%0D%0A%7D%20%0D%0A%7D)%20%0D%0A%7D)(jQuery)%3B%20%0D%0A%24(document).ready(function()%7B%20%0D%0A%24(%22%23scrollDiv%22).Scroll(%7Bline%3A4%2Cspeed%3A500%2Ctimer%3A1000%2Cup%3A%22btn1%22%2Cdown%3A%22btn2%22%7D)%3B%20%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> </head> <body> <p>多行滚动演示:</p> <div id="scrollDiv"> <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div> <span id="btn1">向前</span> <span id="btn2">向后</span> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程