javascript展开滑块特效

最新推荐文章于 2024-04-27 10:11:13 发布
最新推荐文章于 2024-04-27 10:11:13 发布
阅读量313 收藏
点赞数
分类专栏： web前端
javascript展开滑块特效
 <!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/58/6nyltuzz/reset.css">
 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/58/6nyltuzz/jquery-1.8.3.min.js"></script>
 </head>
 <body>
  <div class="mainSlider">
   <div class="sliderContent">
    <ul>
     <li id="slider1"></li>
     <li id="slider2"></li>
     <li id="slider3"></li>
     <li id="slider4"></li>
     <li id="slider5"></li>
    </ul>
   </div>
  </div>
 </body>
</html>
<style>
body{background:#000}
.mainSlider { position: relative; width: 1200px; height: 308px; margin: 30px auto 20px auto; overflow: hidden; }
.mainSlider .sliderContent { width: 2000px; height: 308px; position: absolute; left: 0; top: 0; }
.mainSlider li { float: left; display: inline-block; width: 200px; height: 300px; z-index: 1; border:2px solid red;margin:1px;}
.mainSlider li:hover{border:1px solid blue;}
.mainSlider li#slider1 { background: url('img/1.png') no-repeat center; }
.mainSlider li#slider2 { background: url('img/2.png') no-repeat center; }
.mainSlider li#slider3 { background: url('img/3.png') no-repeat center; }
.mainSlider li#slider4 { background: url('img/4.png') no-repeat center; }
.mainSlider li#slider5 { background: url('img/5.png') no-repeat center; }
</style>
<script>
jQuery(function(){
 
 var defaultOptions = {
  millis: 750,
  itemScaleWith: 50,
  itemWidth: 200
 }
 var $mainSlider = jQuery(".mainSlider");
 var $sliderContent = $mainSlider.find(".sliderContent");
 var $li = $mainSlider.find("li");
 $li.each(function(e) {
  var $this = jQuery(this);
  $this.bind({
   'mouseover': function(e) {
    $li.each(function(e) {
     var $other = jQuery(this);
     if (! $other.is($this)) {
      $other.stop().animate({width: defaultOptions.itemWidth - defaultOptions.itemScaleWith}, defaultOptions.millis);
     }
    });
    $this.stop().animate({width: (4 * defaultOptions.itemScaleWith + defaultOptions.itemWidth)}, defaultOptions.millis);
   }, 'mouseleave': function(e) {
    $li.each(function(e) {
     var $other = jQuery(this);
     if (! $other.is($this)) {
      $other.stop().animate({width: defaultOptions.itemWidth}, defaultOptions.millis);
     }
    });
    $this.stop().animate({width: defaultOptions.itemWidth}, defaultOptions.millis);
   }
  });
 });
});
</script>
 

图片

图片

图片

图片

图片

图片

 

想旅游咯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JavaScript实现滑块拖动
07-31
自己写的原生JavaScript实现滑块拖动，样式随便写的，想要好看的需要自己修改。
通过js实现滑块验证（简略版）
Alphamilk的博客
12-13 3017
通过js方面快速掌握滑块验证原理并且能够简单实现该功能块
探索 DiscreteSlider：一款创新的JavaScript滑块组件
最新发布
gitblog_00082的博客
04-27 302
探索 DiscreteSlider：一款创新的JavaScript滑块组件 DiscreteSliderA slider (SeekBar) with amazing value label.项目地址:https://gitcode.com/gh_mirrors/dis/DiscreteSlider 是一个基于JavaScript的开源项目，专为网页开发者设计，提供了一个美观且功能丰富的离散滑块...
js实现滑块选择功能
weixin_44875693的博客
03-20 863
【代码】js实现滑块选择功能。
原生JS实现滑块功能
qq_32021429的博客
04-21 2248
原生JS实现滑块功能 前两天用到ant-design的滑块组件，觉得很有意思，就自己简单实现了一下。 效果图如下： html代码 <div class="box"> <div class="length"></div> <div class="tip"></div> <div class="light"></div> </div> 样式 .box { padding:
100个+非常犀利的javascript特效合集
09-17
4. **图片和幻灯片**：JavaScript可以用来创建自动播放的图片轮播、滑块或幻灯片，这些特效能够吸引用户注意力并展示大量内容。 5. **表单验证**：在前端进行表单验证是JavaScript的一个常见应用，可以防止无效数据...
jQuery全屏横向时间轴滑块特效代码
03-20
【jQuery全屏横向时间轴滑块特效代码】是一种利用JavaScript库jQuery实现的创新网页设计元素，主要用于展示项目历程、公司历史或任何按时间顺序排列的内容。这种特效将时间轴以横向滑动的方式呈现，给用户带来更加...
JavaScript特效24个
05-22
12. **滑块和滑动面板**：JavaScript可以创建可滑动的面板，如选项卡、侧边栏等，提供更丰富的界面展示方式。 13. **图库和相册**：JavaScript可以实现图片预览、缩放、滑动等功能，创建功能强大的图库和相册。 14...
JavaScript特效
05-12
6. **滑块和滑动条**：JavaScript可以创建自定义的滑块和滑动条，常用于音量控制、进度条、评分系统等，提供用户更直观的操作方式。 7. **时间日期处理**：JavaScript提供了Date对象，可以用来处理日期和时间，实现...
JavaScript+网页特效
12-03
总的来说，这个"JavaScript+网页特效"的资源包包含的可能是上述一种或多种效果的示例代码，对于学习和实践JavaScript网页特效的开发者来说，这是一个宝贵的参考资料，可以加深对JavaScript动态效果实现的理解，提高...
前端JS——滑动滑块验证登录（源码及效果）
qq_41141657的博客
07-22 1万+
1.html代码 <div class="box"> <!--滑块--> <a href="#"><div class="btn">>></div></a> <!--文字--> <p class="text">拖动滑块验证</p> <!--背景...
原生javascript滑块滑动demo
CodingNoob
03-20 1512
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
js实现‘按住鼠标’的滑块拖动效果
二次猿的博客
10-18 8525
js实现‘按住鼠标’的滑块拖动效果
js的滑动效果
eggplant_的博客
10-15 4240
当页面不够用是或者我们想要在一定空间内进行大量布局，除了层结构外，我还想到了js中的滑动效果，首先 jquery滑动效果有向上滑动和向下滑动1、jQuery slideUp()2、jQuery slideDown() &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="/jquery/jquery-1.11.1.mi...
JavaScript 美化滑块
wangsq-web的博客
01-12 1024
美化滑块（拖动） 隐藏原有的range 同步value html lang="en"> head> meta charset="UTF-8"> title>滑块title> style> .len{ width: 300px; height: 6px; background: #6
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2079
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
JS中简单的滑动特效
qq_40289292的博客
10-13 3859
JS中简单的滑动特效
JavaScript实现拖动滑块验证（方法已封装）
金州饿霸吃不饱的博客
09-17 2万+
前提 之前写了一篇博文，题目是《JavaScript实现拖动滑块验证》，里面都是用最简单的方式实现的。后来，群里大神推荐了一款unlock.js插件，称作幻灯片解锁插件。在这里附上它的github地址：https://github.com/menthe/unlock.js。 在看了它内部的实现之后，虽然没完全看懂哈，但是基本功能都看的差不多了。然后就根据它的底层实现，自己学着将之前写的代码进行...
JavaScript实现拖动滑块验证
热门推荐
monkeyfly学前端
04-04 3万+
Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。 前提 之前在优化别人写的登录界面时，遇到了滑动解锁成功后发送短信验证码的场景，因为涉及到改动，所以必须要明白它是怎么实现的。 由于本人JavaScript技艺不精，关于滑动解锁如何实现的问题首先是没接触过，那么实现原理肯定是不懂的。于是就针对这一问题认真研究了一天，并且在看了好几个版本代码的基础上，总结了别人...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值