jQuery全屏动画焦点图

效果:http://hovertree.com/texiao/jqimg/3/本效果使用jquery-1.8.3.min.js,如需使用1.12.3版本,需进行修改。全部版本jQuery下载:htt

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

效果:http://hovertree.com/texiao/jqimg/3/

本效果使用 jquery-1.8.3.min.js,如需使用1.12.3版本,需进行修改。

全部版本jQuery下载:http://hovertree.com/h/bjaf/ati6k7yk.htm

每个轮播界面由若干图组成,图片随轮播动态载入,成为动画

炫酷版

下载:http://hovertree.com/h/bjaf/8tum0nci.htm

代码如下:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery焦点图 - 何问起</title> <link rel="stylesheet" href="http://hovertree.com/texiao/jqimg/3/css/style.css" /> <style>.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue}</style> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://hovertree.com/texiao/jqimg/3/js/jquery.DB_tabMotionBanner.min.js"></script> </head> <body> <div class="DB_tab25"> <ul class="DB_bgSet"> <li style="background: #e67373;"></li> <li style="background: #86cccc;"></li> <li style="background: #ffebb3;"></li> <!--<li style="background: url(images/stu_banner2.jpg) no-repeat 100% 100%;"></li>--> </ul> <ul class="DB_imgSet"> <li onclick="javascript: window.location.href = 'http://hovertree.com/';"> <img class="DB_1_1" src="http://hovertree.com/texiao/jqimg/3/images/stuimg1_1.png" alt="" /> <img class="DB_1_2" src="http://hovertree.com/texiao/jqimg/3/images/stuimg1_2.png" alt="" /> <img class="DB_1_3" src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/42009c64-ae30-4339-ba41-54b1cc6fe515-1639930927640.jpg" alt="" /> </li> <li onclick="javascript: window.location.href = 'http://hovertree.com/texiao/';"> <img class="DB_2_1" src="http://hovertree.com/texiao/jqimg/3/images/stuimg2_1.png" alt="" /> <img class="DB_2_2" src="http://hovertree.com/texiao/jqimg/3/images/stuimg2_2.png" alt="" /> <img class="DB_2_3" src="http://hovertree.com/texiao/jqimg/3/images/stuimg2_3.png" alt="" /> </li> <li onclick="javascript: window.location.href = 'http://keleyi.com/';"> <img class="DB_3_1" src="http://hovertree.com/texiao/jqimg/3/images/stuimg3_1.png" alt="" /> <img class="DB_3_2" src="http://hovertree.com/texiao/jqimg/3/images/stuimg3_2.png" alt="" /> <img class="DB_3_3" src="http://hovertree.com/texiao/jqimg/3/images/stuimg3_3.png" alt="" /> </li> </ul> <div class="DB_menuWrap"> <ul class="DB_menuSet"> <li> <img src="http://hovertree.com/texiao/jqimg/3/images/btn_off.png" alt="" /> </li> <li> <img src="http://hovertree.com/texiao/jqimg/3/images/btn_off.png" alt="" /> </li> <li> <img src="http://hovertree.com/texiao/jqimg/3/images/btn_off.png" alt="" /> </li> </ul> <div class="DB_next"> <img src="http://hovertree.com/texiao/jqimg/3/images/nextArrow.png" alt="NEXT" /> </div> <div class="DB_prev"> <img src="http://hovertree.com/texiao/jqimg/3/images/prevArrow.png" alt="PREV" /> </div> </div> </div> <div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/76i9j790.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div> <script type="text/javascript"> $('.DB_tab25').DB_tabMotionBanner({ key: 'b28551', autoRollingTime: 6000, bgSpeed: 500, motion: { DB_1_1: { left: -50, opacity: 0, speed: 1000, delay: 500 }, DB_1_2: { left: -50, opacity: 0, speed: 1000, delay: 1000 }, DB_1_3: { left: 100, opacity: 0, speed: 1000, delay: 1500 }, DB_2_1: { top: 50, opacity: 0, speed: 1000, delay: 500 }, DB_2_2: { top: 50, opacity: 0, speed: 1000, delay: 1000 }, DB_2_3: { top: 100, opacity: 0, speed: 1000, delay: 1500 }, DB_3_1: { left: -50, opacity: 0, speed: 1000, delay: 500 }, DB_3_2: { top: 50, opacity: 0, speed: 1000, delay: 1000 }, DB_3_3: { top: 0, opacity: 0, speed: 1000, delay: 1500 }, end: null } }) </script> </body> </html>

可以通过修改motion 中的数据,改变动画方式等。

转自:http://hovertree.com/h/bjaf/76i9j790.htm

特效库:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120548.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Django(53)二次封装Response

    Django(53)二次封装Response前言有时候我们使用drf的Response,会发现默认返回的格式不太友好,每次我们都需要写入以下的格式returnResponse({"status":0,"

  • Node.js实战:Express实现简单后台登录系统

    Node.js实战:Express实现简单后台登录系统1.建立Express项目在进行以下操作之前,请确保你的电脑已经装好Node.js和Express框架。首先打开命令行提示符,输入express–view=ejs-ewww其中–view=ejs表示使用ejs模版引擎,-e指定项目名称,此处设为www。回车之后,当前文件夹下会多出一个名为www的文件夹,这个就是我们项目所在的地方。此时,www文件夹中默认已经有了基本的文件,但是相关

  • Nginx + Spring Boot 实现负载均衡

    本文来源:http://8rr.co/LSUH 前言 本篇文章主要介绍的是Nginx如何实现负载均衡。 负载均衡介绍 在介绍Nginx的负载均衡实现之前,先简单的说下负载均衡的分类…

  • ts 视频下载[通俗易懂]

    ts 视频下载[通俗易懂]importurllib.requestimportrequests,os,threadingfromCrypto.CipherimportAESfromsrc.Pacho.moviePa.tsdownloadimportaes_decodeclassm3u8down(object):def__init__(self,url,listheaders,dicheaders):self.url=url#这里的url是index.m3.

  • QML入门教程:一、QML和QtQuick简介以及QML实例

    QML入门教程:一、QML和QtQuick简介以及QML实例从Qt4.7开始,Qt引入了一种声明式脚本语言,称为QML(QtMetaLanguage或者QtModelingLanguage),作为C++语言的一种替代。而QtQuick就是使用QML构建的一套类库。QML是一种基于JavaScript的声明式语言。在Qt5中,QML有了长足进步,并且同C++并列…

    2022年10月23日
  • openid什么意思_openId

    openid什么意思_openId在使用IdentityServer作IdentityProvider的时候,我们在NetCore的ConfigureServices((IServiceCollectionservices))方

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号