- 浏览: 721172 次
- 性别:
- 来自: 南宁
文章分类
最新评论
-
如果我爱上你的笑容:
牛腩老师讲的课很棒 目前新闻发系统学习中 `(*∩_∩*)′
64位win8.1系统安装intelhaxm -
k04110411:
jhlovett 写道牛哥,想问下 public void P ...
ASP.NET通过HTML的上传文件标签来上传文件 -
liuzhijie3:
我也留个脚印用到了,讲的不错
.NET中获取字符串的MD5码 -
han_yankun2009:
,楠老师不错呀
在一堆数中查询相加得某个数的组合 -
allstara609:
请问牛老师,datalist中如何去掉数字中多余的0?
去掉数字中多余的0(ASP.NET)
经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html></html>这样子的,没有加上documentType标签,不符合“标准”。
于是自己套上了标准之后再改了一下,发现在firefox中还是滚动不起来,知道肯定是某些地方的js只适用于IE吧,也懒得慢慢找了,直接用jquery来制作。
图片无缝向左滚动的代码如下:
<!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=utf-8" />
<title>JS图片向左滚动</title>
<style type="text/css">
img{
border: none;
}
</style>
<!-- 这句话不能少,记得把jquery.js文件放在当前页面的同一目录中 -->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;width:500px;">
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr>
<td id="demo1" valign="top" bgcolor="ffffff">
<!-- 特别注意,下面的图片总宽度必须大于上面定义的demo的宽度,如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题! -->
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
<td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){
if(demo.scrollLeft()>=demo1.width())
demo.scrollLeft(0);
else{
demo.scrollLeft(demo.scrollLeft()+1);
}
}
var MyMar=setInterval(Marquee,speed)
demo.mouseover(function() {
clearInterval(MyMar);
} )
demo.mouseout(function() {
MyMar=setInterval(Marquee,speed);
} )
function fun1(){
alert(demo.scrollLeft());
}
function fun2(){
alert(demo1.width());
}
</script>
<input type="button" value="显示demo.scrollLeft()" onclick="fun1();"/>
<input type="button" value="显示demo1.width())" onclick="fun2();"/>
</body>
</html>
那二个按钮主要是为了自己观察值的变化之用,正式使用中可以去掉。
向右无缝滚动的HTML同上,只是js脚本中的Marquee函数不同,代码如下:
function Marquee(){ if(demo.scrollLeft()==0){ demo.scrollLeft(demo1.width()); }else{ demo.scrollLeft(demo.scrollLeft()-1); } }
向上无缝滚动的HTML代码如下:
<!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=utf-8" /> <title>JS图片向上滚动</title> <style type="text/css"> img{ border: none; } </style> <!-- 这句话不能少,记得把jquery.js文件放在当前页面的同一目录中 --> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div id="demo" style="overflow:hidden;height:300px;"> <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 > <tr id="demo1"> <td valign="top" bgcolor="ffffff"> <!-- 特别注意,下面的图片总高度必须大于上面定义的demo的宽度,如上面demo的高度为300px,则下面所有图片的高的和值必须大于300,否则会出现些问题! --> <table border="0" cellspacing="0" cellpadding="0"> <tr align="center"> <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td> </tr> <tr align="center"> <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td> </tr> <tr align="center"> <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td> </tr> <tr align="center"> <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td> </tr> <tr align="center"> <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td> </tr> </table> </td> </tr> <tr id="demo2"> </tr> </table> </div> <script type="text/javascript"> var speed=30; var demo = $("#demo"); var demo1 = $("#demo1"); var demo2 = $("#demo2"); demo2.html(demo1.html()); function Marquee(){ if(demo.scrollTop()>=demo1.height()) demo.scrollTop(0); else{ demo.scrollTop(demo.scrollTop()+1); } } var MyMar=setInterval(Marquee,speed) demo.mouseover(function() { clearInterval(MyMar); } ) demo.mouseout(function() { MyMar=setInterval(Marquee,speed); } ) function fun1(){ alert(demo.scrollTop()); } function fun2(){ alert(demo1.height()); } </script> <input type="button" value="显示demo.scrollTop()" onclick="fun1();"/> <input type="button" value="显示demo1.height())" onclick="fun2();"/> </body> </html>
向下无缝滚动的HTML代码同上,只是js脚本中的Marquee函数不同,如下:
function Marquee(){ if(demo.scrollTop()==0) demo.scrollTop(demo1.height()); else{ demo.scrollTop(demo.scrollTop()-1); } }
源码下载:/Files/niunan/scrollpic.rar
发表评论
-
jquery制作select列表双向选择
2010-06-15 12:43 1896做项目的时候要用到的一个小功能,以前做过的,用的纯JS ... -
锋利的jQuery实例-图片滚动
2009-11-15 16:02 2776效果看图: 点击按钮后的动画思路倒很容易弄懂,主要就是开始的 ... -
jquery访中关村商城排行榜特效
2009-08-08 11:04 1739目前公司的网站上要用到的效果,其实也算不上什么特效,无非 ... -
框架frame自适应内容高度
2009-07-31 16:17 3006让框架frame自动适应内容的高度 在每个框架子页面中加入如下 ... -
jQuery插件—获取URL参数
2009-06-20 12:44 4016做的项目中需要用到通过JS获取GET参数,上网找了一下,找到如 ... -
中关村网站产品参数页的参数纠错的制作
2009-06-16 21:20 1039今天突然想在正在做的网站中加上个像中关村一样的参数纠错的功能, ... -
鼠标移到某一元素则在元素旁边出现弹出框
2009-05-12 20:54 1889类似于当当网的发货以后的那个发货反馈,鼠标移上去后自动会 ... -
jquery xpath详解
2009-02-17 11:27 3188比如下面html代码 <ul> <li cl ... -
jQuery中使用插件解决ie6下selectfqg元素设置z-index无效的问题!
2009-02-11 11:05 4018没用插件时的效果如下,这是在IE6下预览的结果,层 ... -
jQuery控制元素间隔滚动!
2009-01-12 12:14 1895只记录了本人需要用到的,转载自http://www.yaosa ... -
jquery中筛选表格的特定行数后进行操作
2009-01-06 11:55 3066项目中有个地方,一个页面显示两种商品,显示商品参数的时 ... -
jQuery插件_jcarousel(用于图片滚动)
2008-12-26 14:17 7646效果图如下: 目前制作的项目中用到,先记下来,以备不时之需 ... -
制作多级滑动tab菜单
2008-11-26 11:47 4444效果演示网站:http://kr.shopping.yahoo ... -
jQuery实战(四) - tab菜单
2008-11-19 13:55 2339很多天前就已经看完jQuery实战第四讲了,不过一直没有时间做 ... -
jQuery实战(三)
2008-11-16 15:37 2076刚刚看完第三讲,是用jQuery制作下拉菜单,自己也试着做了一 ... -
只能输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)
2008-11-16 10:36 5681星期天上班真不知道干什么事哦,只好随便看看之前下载的电子书了, ... -
jQuery实战(二)
2008-11-06 11:06 3024很久不上来写文章了,嘿嘿,最近在做一个简单的新闻发布系 ... -
制作符合WEB标准的QQ弹出消息(jQuery)
2008-10-29 11:49 4920这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这 ... -
jQuery实战(一)
2008-10-27 12:02 5128从ITCAST上看到出了个jQuery实战的视频(ht ... -
符合WEB标准的浮动层(jQuery版)!
2008-10-26 15:10 11326网上有好多的浮动层之类的代码,所谓的浮动层,就是层里的 ...
相关推荐
5. **动画效果**:jQuery提供了`animate()`函数来创建自定义动画,可以用于控制图片的滚动速度、方向和缓动效果。这将使得图片的滚动既流畅又自然。 6. **数据结构与遍历**:为了管理图片集合,可能使用数组或其他...
**jQuery图片无缝滚动代码实现详解** 在网页设计中,图片滚动是一种常见的动态效果,它可以吸引用户的注意力并增强网站的视觉吸引力。"jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片...
【jQuery 按钮控制图片无缝滚动代码详解】 在网页设计中,图片滚动效果是一种常见的动态展示手段,能够吸引用户注意力并提升用户体验。本篇文章将深入讲解如何利用jQuery实现按钮控制的图片无缝滚动效果,帮助你...
**jQuery图片无缝滚动插件详解** 在Web开发中,为了增加网页的动态效果和用户体验,图片无缝滚动是一种常见的设计手法。jQuery,作为一个轻量级、功能丰富的JavaScript库,提供了丰富的API来实现这样的功能。本篇...
jQuery焦点图片无缝滚动轮播插件是Web开发中常见的组件,它主要用于网站的首页或产品展示区域,以吸引用户注意力并提升用户体验。该插件基于JavaScript库jQuery构建,旨在实现图片的自动滚动和手动切换,形成一种无...
本教程将深入讲解如何利用jQuery实现页面图片的无缝滚动效果,同时确保其在火狐浏览器上的兼容性。 一、jQuery简介 jQuery是一款高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...
总之,jQuery图片无缝滚动插件通过JavaScript的动画功能和事件处理,实现了在网页上图片的平滑、连续滚动,增强了用户体验。开发者可以通过自定义或使用现有的插件来实现这一效果,结合HTML和CSS布局,打造个性化的...
jQuery图片无缝滚动是一种常见的网页动态效果,用于展示一组图片,以滑动的形式连续播放,给用户带来流畅且连贯的视觉体验。这种效果通常应用于网站的轮播图、产品展示或者广告区域,使得页面更加生动有趣。在本教程...
在网页设计中,动态展示图片是常见的需求,而图片无缝滚动则能提供一种优雅的展示方式,增强用户体验。"基于jQuery的图片左右无缝滚动插件"就是用于实现这种效果的工具,它允许图片在水平方向上连续、平滑地滚动,...
jQuery无缝滚动跑马灯效果是一种常见的网页动态展示技术,它利用JavaScript库jQuery的高效特性,为网站添加一种吸引用户注意力的视觉效果。这种效果通常应用于新闻更新、广告展示或者产品介绍等区域,使得信息能够以...
在图片无缝滚动中,CSS可以用来设置图片的定位(positioning)、过渡(transitions)和动画(animations)。例如,我们可以通过绝对定位使图片叠加在一起,然后利用CSS3的`animation`属性创建一个平滑的滚动效果。...
2. **无缝滚动**:无缝滚动是网页设计中的一种效果,使得内容(如图片)在滚动时没有明显的断点,仿佛一直在平滑移动。这种效果可以增加用户体验,尤其在展示产品或信息时更为吸引人。 3. **实现方法**:使用jQuery...
【myslideLeftRight基于jQuery图片左右无缝滚动插件】是一个常用的前端开发工具,它通过结合JavaScript库jQuery实现图片的平滑、连续且无间隙的左右滚动效果,为网站的展示和用户体验提供了极大的便利。该插件广泛...
《jQuery图片无缝滚动详解》 在网页设计中,动态效果的运用可以提升用户体验,增加页面的吸引力。"jQuery图片无缝滚动"就是一种常见的JavaScript特效,它使得图片在页面上连续、平滑地滚动,营造出视觉上的连贯性和...
**jQuery简易图片无缝滚动代码详解** 在Web开发中,图片无缝滚动是一种常见的视觉效果,它可以使网站的展示更加生动和吸引人。这个“jQuery简易的图片无缝滚动代码”就是一个实现这种效果的简单示例,主要涉及到...
**jQuery排名文字无缝循环向上滚动代码详解** 在网页设计中,动态效果往往能吸引用户的注意力,提高用户体验。jQuery作为一款强大的JavaScript库,提供了丰富的功能来实现各种动态效果,其中包括文字无缝循环滚动。...
本文将深入探讨如何使用 jQuery 创建一个无缝滚动的效果。 首先,我们需要理解什么是无缝滚动。无缝滚动是指元素在滚动到一端后,立即从另一端重新出现,给人一种无终止、连续移动的视觉体验。在 jQuery 中实现这个...
**jQuery无缝滚动**是一种网页设计技术,用于实现图片或内容的自动循环播放效果,从而提升用户体验,增加网站的视觉吸引力。这种技术基于JavaScript库jQuery,它简化了DOM操作,使得创建动态、交互式的网页变得更加...