按照步骤来:
一 css 样式控制:
.in_f {
CLEAR: both; HEIGHT: 46px
}
.in_f .a {
BACKGROUND: url(../images/i12.gif) no-repeat left 50%; FLOAT: left; WIDTH: 160px; HEIGHT: 46px
}
.in_f .b {
FLOAT: left; WIDTH: 17px; HEIGHT: 46px
}
.in_f .centerBox {
DISPLAY: inline; FLOAT: left; MARGIN: 0px 10px; OVERFLOW: hidden; width:498px; HEIGHT: 232px
}
.in_f .centerBox IMG {
MARGIN: 0px 3px
}
.in_f .d {
FLOAT: left; WIDTH: 16px; HEIGHT: 46px
}
.in_f .b IMG {
CURSOR: pointer
}
.in_f .d IMG {
CURSOR: pointer
}
二:准备js
jQuery.js
jquery-ui-1.8.6.custom.min.js
MSClass.js ----这个就是滚动的操作js
<!-- 引入js 和 css -->
<!-- 控制滚动的按钮 -->
<img id="left" title="向左滚动" alt="向左滚动" style="cursor: pointer;" src="images/ico1.gif" width="13" height="13" />
<img id="right" title="向右滚动" alt="向右滚动" style="cursor: pointer;" src="images/ico2.gif" width="13" height="13" />
<br><br><br><br>
<!-- 滚动体 -->
<DIV id="div" class=in_f>
<DIV class=centerBox id=marqueedivcontrol>
<!-- 这里放你想要滚动的东西。。可以是图片也可以是table..但是记得里面的东西的宽度要超过div的宽度...不然就不会滚动。。也没必要滚动 -->
<tr>
<td width="166" align="center" valign="top"><table width="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="60" colspan="2" align="center" valign="middle"><img src="images/tu1.gif" width="160" height="46" /></td>
</tr>
<table>
</DIV>
</DIV>
<!-- 下面是滚动的初始化代码 -->
<SCRIPT type=text/javascript>
var marquee=new Marquee("marqueedivcontrol");
marquee.Direction="left";
marquee.Step=1;
marquee.Width=498;
marquee.Height=232;
marquee.Timer=20;
marquee.ScrollStep=-1;//此句禁止鼠标控制
// 查看了 MSClass.js 的源码,,,你会发现 derection 2 表示左移动 3表示右移动..0 表示 top
// 反正注意看源码就好了...
$("#left").click(function(){marquee.Direction=2});
$("#right").click(function(){marquee.Direction=3});
$("div").mousemove(function(){marquee.Direction=0});
$("div").mouseout(function(){marquee.Direction=2});
marquee.Start();
</SCRIPT>
最后的效果就是 鼠标点击按钮控制内容的滚动,,当鼠标移动到内容上面就停止,,移开就直接移动
嘿嘿...我也上传 JS 包...也做了一个dome,虽然有点粗糙...但是效果实现了! 嘿嘿。。....吃饭去了
今天有空。。。更新了下功能。刚刚在开发中也碰到,点击的时候。。不仅要移动,而且要加快移动1秒,再还原到原来的速度,,,,,,,,
下面的对上面代码的一次升级,
$("#left").click(function(){ //把上面的代码替换成这样
marquee.Direction=2;
boo = true;
marquee.Step=10; //加快移动步伐
if(boo){
setTimeout(stoptime,500);
}
});
$("#right").click(function(){ //把上面的代码替换成这样
marquee.Direction=3
boo = true;
marquee.Step=10; //加快移动步伐
if(boo){
setTimeout(stoptime,500);
}
});
//停止加快
function stoptime(){
marquee.Step=1;
boo = false;
}
O(∩_∩)O哈哈~。。这样就可以实现,点击移动的时候,,并且可以加速移动下,
请看我最新上传的 dome2.rar
里面的代码很清楚了。。嘿嘿。。。。。。。。。
分享到:
相关推荐
主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
js实现楼层滚动效果 本文实例为大家分享了jquery实现滑动楼梯效果,实现楼层的滚动以及点击楼层按钮跳转到对应的楼层,代码如下 html代码: <div style="height: 500px; background-color: black; color: #fff;...
JS+CSS+DIV按钮轮播和图片无缝滚动
JS五张连篇,点击左右按钮可以移动!(图片左右滚动特效)主要用于想实现图片左右能滚动,点击左右按钮图片可以移动!!不错的!
这是一个js左右切换焦点图特效,无需调用jquery库的麻烦,可在一定程度上节省带宽以及内存,代码简洁,使用方法简单:...直接调用几行html代码到你指定的地方,并修改外侧DIV大小,并在后面引入lanrenzhijia.js即可搞定
li ,div 自动切换,可用按钮切换,图片滚动,效果真的一级棒,是目前我找到的最棒的一个,需要的亲赶紧下手。 适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款...
我们有时会看到有些网站最顶部一直会跟着我们滚动而滚动了,这种方法其实很简单,下面我来给大推荐一个javascript实现div浮动在网页最顶上并带关闭按钮效果
88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款...
23.jQuery实现slider图片滚动,单个滚动,成组滚动示例 24.jQuery实现产品图片循坏旋转的代码 25.jQuery实现动态图文分组排序切换源码 26.jQuery实现图片3D旋转特效插件 v1.1版本下载 27.jQuery实现图片3D...
w3c JS+CSS+DIV 图片滚动切换,带左右按钮,兼容多浏览器
88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款...
控制DIV永远固定在页面底部的方法有很多,基本上都是通过css或js来实现的,本节也实现了一个这样的效果,大家可以学习下
主要介绍使用jQuery实现图片左右滚动的实例,需要的朋友可以参考下。
jQuery带按钮向上滚动向下滚动代码是一款jqScroll.js插件实现的,调用简单,代码注释很清楚。
本文实例为大家分享了vue实现全屏滚动效果(的具体代码,供大家参考,具体内容如下 是什么 网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接在一起。当滑动鼠标滚轮,或点击导航按钮时,可以平滑到对应的...
本文实例为大家分享了js实现悬浮窗的具体代码,供大家参考,具体内容如下 说明:点击”+“按钮,悬浮窗收缩/展开 思路 1、在html中定义一个div块,定一个id;一个按钮,点击时用。 2、写一个js,包含收缩以及展开的...
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...