DIV滑动效果

最新推荐文章于 2024-05-08 10:05:10 发布
最新推荐文章于 2024-05-08 10:05:10 发布
阅读量5.1k 收藏
点赞数
分类专栏： web开发 文章标签： div function string border xhtml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinton/article/details/4394811
版权

<!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>
    <title></title>
<script type="text/javascript" src="slip.js"></script>
 <script type="text/javascript">


function showcontent(){

//alert(topslider);
topslider.show();

setTimeout ('hidecontent()',1000);
}
function hidecontent()
{
topslider.hide();
setTimeout ('show2content()',500);

}
function show2content()
{

leftslider.show();
}
 </script>
</head>
<body οnlοad="showcontent();">

                    <div id="adBig" style="display:none"><img title=VANCL购物全场免运费
                    src="free_980_1.gif"
                     border=0></div>
                   
                    <div id="adSmall" style="display:none"><img
                    title=VANCL购物全场免运费
                    src="free_980_2.gif"
                    border=0></div>


<script language="JavaScript" type="text/javascript">
var topslider = new slider('adBig',2,500,980,30,2,100);
var leftslider = new slider('adSmall',2,60,980,40,2,100);
</script>


</body>
</html>

slip.js:


slider.names = new Array();

function slider()
{
this.id = slider.names.length;
slider.names[this.id] = this;
this.target = document.getElementById(arguments[0]); //第一个参数：被操作div的id
this.direction = arguments[1];//第二个参数：div弹出的方向
this.height = arguments[2];//第三个参数：div的高度
this.width = arguments[3];//第四个参数：div的宽度
this.step = arguments[4];//第五个参数：希望动作分解为几步完成
this.timer = 10 * arguments[5];//第六个参数：每个动作的间隔时间，10ms为一个单位
this.startopa = arguments[6];//第七个参数：div开始的透明度
this.sparent = this.target.parentNode;//获取操作div的父容器
this.intervalid = null;//循环定时的id
this.i = 0;//循环的计数器
this.status = 0;//slider层的状态：0-可以展开；1-不可以展开
this.target.style.display = "none";//先将div隐去
return this;
}
slider.prototype.initialize = function()
{
this.sparent.style.overflow = "hidden";//设置父容器overflow
this.target.style.width = Number(this.width) + 'px';//设置目标div的宽度
this.target.style.height = Number(this.height) + 'px';//设置目标div的高度
this.target.style.position = "";//设置目标div的定位方式
this.target.style.display = "";//设置目标div的显示方式
this.target.style.filter = 'Alpha(opacity=' + Number(this.startopa) + ')';//设置目标div的透明度为初始透明度
this.target.style.overflow = "hidden";//设置overflow
switch(this.direction)//根据弹出方向设定div的margin
{
   case 1://left to right
    this.target.style.marginLeft = "-" + this.width + "px";
    break;
   case 2://top to bottom
    this.target.style.marginTop = "-" + this.height + "px";
    break;
   case 3://right to left
    this.target.style.marginRight = "-" + this.width + "px";
    break;
}
}
slider.prototype.show = function()
{
if (this.status==0)//检查状态是否已经展开
{
   this.initialize();//操作div及其父容器的初始化
   this.intervalid = window.setInterval("slider.names["+this.id+"].cycle()",this.timer);//设置动作循环
}
}
slider.prototype.hide = function()
{
if (this.status==1)//检查状态是否已经展开
{
   this.intervalid = window.setInterval("slider.names["+this.id+"].decycle()",this.timer);//设置动作循环
}
}
slider.prototype.cycle = function() //单步循环动作
{
var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值
var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5);//计算每步增加的透明度
var nopa = Number(opa) + Number(opastep);//当前透明度
if (nopa>100){this.target.style.filter = 'Alpha(opacity=100)';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值
switch(this.direction)//根据弹出方向计算和设定div的动作
{
   case 1:   //left to right
    var opx = this.target.style.marginLeft.split("px")[0];
    var pxstep = Math.round((this.width / this.step)+0.5);
    var npx = Number(opx) + Number(pxstep);
    if (npx>0){this.target.style.marginLeft = '0px';}else{this.target.style.marginLeft = String(npx) + 'px';}
    break;
   case 2:   //top to bottom
    var opx = this.target.style.marginTop.split("px")[0];
    var pxstep = Math.round((this.height / this.step)+0.5);
    var npx = Number(opx) + Number(pxstep);
    if (npx>0){this.target.style.marginTop = '0px';}else{this.target.style.marginTop = String(npx) + 'px';}
    break;
   case 3:   //right to left
    var opx = this.target.style.marginRight.split("px")[0];
    var pxstep = Math.round((this.width / this.step)+0.5);
    var npx = Number(opx) + Number(pxstep);
    if (npx>0){this.target.style.marginRight = '0px';}else{this.target.style.marginRight = String(npx) + 'px';}
    break;
}
this.i++ //计数器+1
if (this.i>(this.step-1)){window.clearInterval(this.intervalid);this.i=0;this.status=1;} //循环完毕，清除循环定时
}
slider.prototype.decycle = function() //单步循环动作
{
var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值
var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5)*2;//计算每步增加的透明度
var nopa = Number(opa) - Number(opastep);//当前透明度
if (nopa<this.startopa){this.target.style.filter = 'Alpha(opacity=' + this.startopa + ')';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值
switch(this.direction)//根据弹出方向计算和设定div的动作
{
   case 1:   //left to right
    var opx = this.target.style.marginLeft.split("px")[0];
    var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5);
    var npx = Number(opx) - Number(pxstep);
    if (Math.abs(npx)>this.width+2){this.target.style.marginLeft = '-' + this.width + 'px';}else{this.target.style.marginLeft = String(npx) + 'px';}
    break;
   case 2:   //top to bottom
    var opx = this.target.style.marginTop.split("px")[0];
    var pxstep = Math.round((this.height / Math.round(this.step*0.5))+0.5);
    var npx = Number(opx) - Number(pxstep);
    if (Math.abs(npx)>this.height+2){this.target.style.marginTop = '-' + this.height + 'px';}else{this.target.style.marginTop = String(npx) + 'px';}
    break;
   case 3:   //right to left
    var opx = this.target.style.marginRight.split("px")[0];
    var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5);
    var npx = Number(opx) - Number(pxstep);
    if (Math.abs(npx)>this.width+2){this.target.style.marginRight = '-' + this.width + 'px';}else{this.target.style.marginRight = String(npx) + 'px';}
    break;
}
this.i++ //计数器+1
if (this.i>(Math.round(this.step*0.5)-1)){window.clearInterval(this.intervalid);this.i=0;this.status=0;this.target.style.display = "none";} //循环完毕，清除循环定时
}
//关于如何使用这个代码的说明：
//上面的代码可以封装成为一个单独的js文件，然后包含在页面当中
//然后使用下面的代码进行slider初始化，一个页面可以使用多个slider，下面的代码必须在页面底部</body>之前，否则可能会报错
//var topslider = new slider('topcontainer',2,80,734,20,2,20);
//var leftslider = new slider('leftcontainer',1,398,120,20,1,20);
//参数分别代表的意义可以在代码顶端看到
//控制slider动作可以使用两种方式
//一种是使用下面声明的名字调用，比如topslider.show(),topslider.hide()
//另一种可以使用slider.names[0].show(),slider.names[0].hide()，下标取决于slider初始化的顺序

 

sinton
关注
专栏目录
jquery 滑动DIV
08-12
然后，我们导入jQuery库（如果还没有引入的话）并编写JavaScript代码来实现滑动效果。以下是一个简单的示例： ```javascript $(document).ready(function() { var $slider = $('#slider'); var $slides = $slider...
div设置滚动
weixin_52772897的博客
08-09 1511
设置隐藏滑轮：.子元素的类名::-webkit-scrollbar { display: none;/*隐藏滚动条*/ }子元素设置：overflow-y: scroll;首先父元素设置固定宽高，并设置：overflow: hidden;
【Css】Css实现div卡片【横向滑动】效果（图文+完整源代码）
【敦厚的曹操】的专栏
05-16 3835
代码： <body> <div class="box"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> <di...
纯css实现div水平方向的滑动效果
热门推荐
qq_39905409的博客
05-19 1万+
可以在这个div内左右滑动，效果如下： html结构如下： <div class="coverInfo"> <ul> <li class="itemInCovers"></li> <li class="itemInCovers"></li> <li class="itemInCovers"><...
html5 div 滑动效果,纯CSS实现滑动效果（Slide Up & Slide Down）
weixin_35250656的博客
06-03 1791
只需要一个DIV元素便可实现滑动效果，避免了使用JavaScript为元素的动画(IE浏览器下仅支持IE9以上)HTML代码这里是内容点击看看CSS代码.slider {overflow-y: hidden;max-height: 500px;/* 最大高度 */background: pink;height: 200px;width: 200px;/* Webkit内核浏览器：Safari a...
CSS+HTML实现移动端div左右滑动展示
小明同学
06-29 2061
现在很多移动端网站效果都很炫，由于移动设备的宽度有限，而内容太多移动设备一行装不下的，所以都会有左右滑动，下面我就用CSS+HTML实现移动端div左右滑动展示。 CSS：box设置文本不换行，子元素box1行内块元素 .box{ background: #eee; padding: 10px 0; white-space: nowrap;/*文本不会换行，文本会在在同一行上继续*/ overflow-y:auto;/*可滑动*/ } /*自定义滚动条的伪对象选择器, CSS
div滑动门技术
12-11
滑动门技术是CSS（层叠样式表）中的一种常见技巧，主要用于实现图像切换效果，特别是在按钮或者导航菜单的设计中。它利用了CSS的背景定位和伪类选择器来实现单张图片的不同部分在鼠标悬停时显示不同的效果，从而达到...
jQuery滑动效果实现方法分析
10-18
在网页交互设计中，滑动效果是一种常见的动态效果，能够提升用户体验。jQuery 提供了 `slideDown()`, `slideUp()` 和 `slideToggle()` 三个方法来实现元素的滑动显示和隐藏。 1. **slideDown() 方法**： `...
JQuery实现DIV其他动画效果的简单实例
10-21
jQuery提供的动画效果能够帮助开发者轻松实现网页元素的动态展示，包括淡入淡出、滑动切换等。 #### 3. toggle()方法 toggle()方法是jQuery中的一个动画函数，用于切换元素的可见状态。如果元素是可见的，它将被...
Mootools 1.2教程 滑动效果（Slide）
09-05
1. `.set('slide')`: 直接给元素设置滑动效果，无需创建新的Fx.Slide实例。 2. `.slide()`: 使用`.slide()`方法来触发滑动，可以接受'in'、'out'、'toggle'、'show'或'hide'作为参数。 以下是一些使用示例，演示了...
html中怎么让div自动滑动,干货！div滚动到一定位置就固定他
weixin_39968852的博客
06-02 3379
尊重原创：转载请申明出处div滚动到一定位置就固定他，例如左边的内容很多，右边的内容很少，如果不处理滚动到一定位置后右边的数据就看不到了，所以可以在滚动到一点层度后保持右边的数据不动不随着滚动条的滚动而滚动,这样不会只看到一边的内容，另外一边是空白的情况,用户体验很更好，颜值会更高....。废话不多说！直接上代码 。不要小看这点代码，自己一点一点写还是会遇到坑的，会花不少时间的，抛砖引玉，分享才会...
用 div 实现自制滚动条
切糕的技术博客
03-21 2576
https://math-digital.cn/blog/11
前端如何设置div视图可滚动
最新发布
chenchuang0128的博客
05-08 777
的高度时显示垂直滚动条，但如果内容没有超出，则不会显示滚动条。如果你希望始终显示滚动条（无论内容是否超出），可以使用。另外，如果你希望同时允许水平和垂直滚动，可以简单地设置。CSS 属性来实现。元素可滚动，你可以通过设置其。
多个div实现横向滚动
在希
08-06 3270
多个div实现横向滚动 最近在做项目的时候需要实现多个元素横向排列，需要其可在固定范围内左右滑动，原本以为只需要父元素的宽度固定子元素的宽度超过父元素的宽度几个实现滑动，但事实上并不是这样的。最终实现方式记录如下： 1、实现如下： 设置多个并排的元素外面嵌套一层div（.parentDiv）,设置此div的宽度等于所有子元素的宽度之和. 在.parentDiv的外层在嵌套一个div设置样式style: overflow-x: auto; 实例：div中多个图片实现左右滑动 注：实际中.imgBox的宽
前端设计 最详细的div介绍+效果图+代码图
m0_61123456的博客
10-16 6152
楼主刚学不久 ， 学到css 发现十分有趣和好玩，今天跟大家分享一下 CSS中，div 标签的介绍，这也是我上课的笔记 div ，用得非常多的标签，也是最重要的标签 本身是一个html的标签， 特点： div默认宽度为100%，高度为0. 本身不支持高度 宽度属性，但可以通过css 来设置 语法： 《div》《/div》 应用场景 本身没有过多的自带属性或者样式，所以div可塑性很高。同时也是 div+css 布局的核心。 div默认单独显示在一行 ...
DIV布局与效果实战
实践求真知
07-05 645
DIV布局与效果实战 参考 https://blog.csdn.net/jiary5201314/article/details/38336559 实战 1代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>测试DIV</title> </head> <body>..
CSS书写可滑动div内容
U7____的博客
12-08 1178
<div> <p>123456789</p> <p>123456789</p> <p>123456789</p> ……………………………… <p>123456789</p> </div> 假设一个外部盒子里面有无数个p标签写入的123456789，此时，我们可以对父盒子进行一个style的样式设置...
div中打开滚动条与设置滚动条位置
暄妍丶的博客
10-22 7900
div中打开滚动条与设置滚动条位置一、给div设置滚动条二、设置滚动条的位置通过锚点跳转设置scrollTop的值 当我们给div设置固定的高度或宽度的时候,超出的内容默认是不显示的.但是我们有将他们显示出来的需求,比如自己做一个,这时候我们就需要给div加上滚动条了 一、给div设置滚动条 我们只需要这么一行css代码 overflow: scroll; 如果我们只想添加高度滚动条,我们可以使用下面的语句 /*设置纵向滚动栏*/ overflow-x: scroll; /*设置横向滚动栏*/ overf
html 多个div滑动特效,如何实现多个div同时滚动（3个以上）
weixin_35025310的博客
06-09 1437
问题描述有5个宽度相同的div纵向排列，都会有内容横向溢出。想要实现不论在某一div进行拖动，都能使得其他div能同步滚动。尝试以及问题有尝试过如下方法将div1的scrollLeft值与div0的scrollLeft绑定起来，依次绑定，div2和div1,div3和div2...最后将div4和div0的scrollLeft彼此绑定，初看是木有问题能够实现同步横向滚动，但是滚动速度过快就会出现卡...
vue div滑动
05-31
你可以使用 Vue.js 中的第三方库来实现 div 滑动效果，比如 vue-scroll或者 vue-scrollview。这些库提供了滑动组件，可以通过配置参数来实现不同的滑动效果。以下是一个简单的示例： 1. 安装 vue-scroll 组件 ``` npm install vue-scroll ``` 2. 在 Vue 组件中引入 vue-scroll 组件 ``` import VueScroll from 'vue-scroll' Vue.use(VueScroll) ``` 3. 在模板中使用 vue-scroll 组件 ``` <vue-scroll :scrollbar="true" :override-wheel="false"> <!-- 这里放你需要滑动的内容 --> </vue-scroll> ``` 其中，`:scrollbar="true"`表示开启滚动条；`:override-wheel="false"`表示禁用鼠标滚轮。 你可以根据自己的需求来调整组件的参数，实现滑动效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值