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 相关文章推荐
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
利用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缓存集成库phpFastCache用法
2014/12/15 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
vue.js开发环境安装教程
2017/03/17 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
python文字转语音实现过程解析
2019/11/12 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Python之Sklearn使用入门教程
2021/02/19 Python
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
商场端午节活动方案
2014/01/29 职场文书
公安学专业求职信
2014/07/27 职场文书
公司合作意向书范文
2014/07/30 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL