jQuery横向擦除焦点图特效代码分享


Posted in Javascript onSeptember 06, 2015

本文实例讲述了jQuery横向擦除焦点图特效。分享给大家供大家参考。具体如下:
迅雷jQuery横向擦除焦点图是一款基于jQuery实现的7屏横向擦除焦点图代码,有缩略图和标题,可以自定义标题。
运行效果图:-------------------查看效果 下载源码-------------------

jQuery横向擦除焦点图特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
(1)在head区域引入CSS样式:

<link rel="stylesheet" href="css/zzsc.css">

(2)js代码放在文档最底端:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
 jQuery.noConflict();
 jQuery(document).ready(function($){
 $(".guidelist li").hover(
 function () {
 $(this).attr("class", "mouseon");
  },
  function () {
 $(this).attr("class", "mouseout");
  }
 );
 $(".ftoollist li").mouseover(function(){
 $(this).siblings().removeClass("on");
 $(this).addClass("on");
 var preNumber=$(this).prevAll().size();
 $(".fimglist li").removeClass("onpre");
 $(".fimglist li:nth-child("+preNumber+")").addClass("onpre");
 var margin = 990;
 margin = margin *preNumber; 
 margin = margin * -1;
 $(".fimglist").stop().animate({marginLeft: margin + "px"}, 

{duration: 500});
 });
 });
</script>

为大家分享的jQuery横向擦除焦点图特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>迅雷jQuery横向擦除焦点图</title>
<link rel="stylesheet" href="css/zzsc.css">
<base target="_blank">
</head>
<body>
<!-- 代码 开始 --><br /><br />
<div class="focus">
 <div class="focusbox">   
  <div class="focusimg">
  <ul class="fimglist clearfix">
   <li><a href="https://3water.com/jiaoben/"><img src="images/Gintama.jpg" 

title="素材"></a></li>
   <li><a href="https://3water.com/jiaoben/"><img src="images/SteinsGate.jpg" 

title="素材"></a></li>
   <li><a href="https://3water.com/jiaoben/"><img src="images/Unicorn.jpg" 

title="素材"></a></li>
   <li><a href="https://3water.com/jiaoben/"><img src="images/Berserk.jpg" 

title="素材"></a></li>
   <li><a href="https://3water.com/jiaoben/"><img src="images/SummerWars.jpg" 

title="素材"></a></li>
   <li><a href="https://3water.com/jiaoben/"><img src="images/akito.jpg" title="

素材"></a></li>
   <li><a href="https://3water.com/jiaoben/"><img src="images/EVA.jpg" title="素

材"></a></li>
  </ul>
  </div> 
  <div class="focustool">
  <ul class="ftoollist clearfix"><!--通过控制该ul的left值来实现列表的左右移动,增量为

931px-->
   <li class="on"><a href="https://3water.com/jiaoben/"><img 

src="images/Gintama_s.jpg"><p class="imgname">银魂剧场版</p><p class="imgshortcat">永远的万

事屋</p></a></li><!--当前项时为该li添加class: on-->
   <li><a href="https://3water.com/jiaoben/"><img 

src="images/SteinsGate_s.jpg"><p class="imgname">石头门剧场版</p><p class="imgshortcat">负

荷领域的既视感</p></a></li>
   <li><a href="https://3water.com/jiaoben/"><img src="images/Unicorn_s.jpg"><p 

class="imgname">高达UC</p><p class="imgshortcat">Gundam Unicorn</p></a></li>
   <li><a href="https://3water.com/jiaoben/"><img src="images/Berserk_s.jpg"><p 

class="imgname">剑风传奇</p><p class="imgshortcat">黄金时代</p></a></li>
   <li><a href="https://3water.com/jiaoben/"><img 

src="images/SummerWars_s.jpg"><p class="imgname">夏日大作战</p><p 

class="imgshortcat">Summer Wars</p></a></li>
   <li><a href="https://3water.com/jiaoben/"><img src="images/akito_s.jpg"><p 

class="imgname">亡国的阿基德</p><p class="imgshortcat">Code Geass</p></a></li>
   <li><a href="https://3water.com/jiaoben/"><img src="images/EVA_s.jpg"><p 

class="imgname">新EVA剧场版</p><p class="imgshortcat">New Evangelion</p></a></li>
  </ul>
  </div>
  <a href="javascript://" class="btn_pre" target="_self" style="display:none">上一页

</a>
  <a href="javascript://" class="btn_next" target="_self" style="display:none">下一页

</a>
 </div>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
 jQuery.noConflict();
 jQuery(document).ready(function($){
 $(".guidelist li").hover(
 function () {
 $(this).attr("class", "mouseon");
  },
  function () {
 $(this).attr("class", "mouseout");
  }
 );
 $(".ftoollist li").mouseover(function(){
 $(this).siblings().removeClass("on");
 $(this).addClass("on");
 var preNumber=$(this).prevAll().size();
 $(".fimglist li").removeClass("onpre");
 $(".fimglist li:nth-child("+preNumber+")").addClass("onpre");
 var margin = 990;
 margin = margin *preNumber; 
 margin = margin * -1;
 $(".fimglist").stop().animate({marginLeft: margin + "px"}, 

{duration: 500});
 });
 });
</script>
<!-- 代码 结束 -->

</div>
</body>
</html>

以上就是为大家分享的迅雷jQuery横向擦除焦点图特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
javascript表单正则应用
Feb 04 Javascript
javascript常用的设计模式
Feb 09 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 #Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 #Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 #Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 #Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 #Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 #Javascript
javascript日期处理函数,性能优化批处理
Sep 06 #Javascript
You might like
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php数组合并的二种方法
2014/03/21 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
python的id()函数解密过程
2012/12/25 Python
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
python实现微信打飞机游戏
2020/03/24 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
银行求职自荐信
2014/06/30 职场文书
银行自荐信怎么写
2015/03/05 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript