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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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多文件上传实现代码
2014/02/20 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
一个网马的tips实现分析
2010/11/28 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
Vue基础配置讲解
2019/11/29 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
说一说Python logging
2016/04/15 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
python怎么判断素数
2020/07/01 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
介绍一下代理模式(Proxy)
2014/10/17 面试题
给排水工程师岗位职责
2013/11/21 职场文书
财务主管的岗位职责
2013/12/30 职场文书
新教师岗前培训方案
2014/06/05 职场文书
委托书的写法
2014/09/16 职场文书
交通安全横幅标语
2014/10/07 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书