jquery实现图片无缝滚动 蒙版遮蔽效果


Posted in jQuery onJanuary 11, 2020

本文实例为大家分享了jquery实现图片无缝滚动、蒙版效果的具体代码,供大家参考,具体内容如下

1、无缝连接:通过对li设置属性float:left;消除标签之间的间隔
2、通过对ul整体进行偏移设置,使图片整体滚动,
3、设置图片切换时机,
4、蒙版遮罩移入时机的选择

代码片.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
 <style>
  *{
  margin: 0;
  padding: 0;
  }
  .div1{
  width: 400px;
  height: 150px;  
  overflow: hidden;
  border: 1px solid #A9A9A9;
  margin: 30px auto;
  }
  .ul1{
  position: relative;
  left: 0px;
  width: 1200px;
  }
  .ul1>li{
  position: relative;  
  list-style: none;
  float: left;  
  width: 200px;
  height: 150px;
  background: #3388FF;
  }
  .ul1>li>div{
  position: absolute;
  left: 0;
  top: 0;
  background: #A9A9A9;
  width: 200px;
  height: 150px;
  opacity: 0;
  }
 </style>
 </head>
 <body>
 <div class="div1">
  <ul class="ul1">
  <li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall3.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall4.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
  </ul>
 </div>
 <script>
  $(function(){
  var $time = '';
  var mi = 0;
  gundong();
  function gundong(){
   $time = setInterval(function(){
   mi += -10;
   if (mi<-800) {
    mi = 0
   }
   $('.ul1').css({    
    marginLeft: mi+'px'   
   });
   },100);
  }
  $('li').mouseover(function(){
   window.clearTimeout($time);
   $('li').not($(this)).contents('div').css({
   opacity:0.6
   });
  });
  $('li').mouseout(function(){
   gundong();
   $('li').not($(this)).contents('div').css({
   opacity:0
   });
  });
  });
 </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery表单验证之密码确认
May 22 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
jQuery操作动画完整实例分析
Jan 10 #jQuery
jQuery操作事件完整实例分析
Jan 10 #jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 #jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 #jQuery
jquery实现吸顶导航效果
Jan 08 #jQuery
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
You might like
简单的php 验证图片生成函数
2009/05/21 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP7新功能总结
2019/04/14 PHP
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python使用functools实现注解同步方法
2018/02/06 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
师范生自荐信
2013/10/27 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
老公婚前保证书
2015/02/28 职场文书
优秀志愿者感言
2015/08/01 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
Docker下安装Oracle19c
2022/04/13 Servers
hive数据仓库新增字段方法
2022/06/25 数据库
MySQL池化框架学习接池自定义
2022/07/23 MySQL