效果图：

查看效果：http://hovertree.com/jq/hovertreeimg/

下载：http://hovertree.com/h/bjaf/gk8mko69.htm

使用代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>HovertreeImg Home - 何问起</title><base target="_blank" />

    <meta charset="utf-8" />

    <!--<link href="jquery.hovertreeimg.css" type="text/css" rel="stylesheet"/>-->

    <style>#hovertreeimg {width:768px;height:66px;overflow:hidden}

#hovertreeimg img{width:100%;height:100%;}

#hovertreeimg #hovertreeimgcontent{display:none}a{color:blue}</style>

</head>

<body>

    <div id="hovertreeimg">

        <a href="http://hovertree.com/h/bjaf/hovertreeimg.htm" title="HovertreeImg" target="_blank"><img src="http://hovertree.com/jq/hovertreeimg/hovertreeimg.jpg" alt="HovertreeImg插件" /></a>

        <div id="hovertreeimgcontent">

            <a href="http://hovertree.com/h/bjaf/easysector.htm" title="HTML5百分比饼图" target="_blank"><img src="http://hovertree.com/themes/img/easysector.gif" alt="EasySector插件" /></a>

            <a href="http://hovertree.com/texiao/game/" title="见缝插针" target="_blank"><img src="http://hovertree.com/themes/img/jfcz.gif" alt="见缝插针" /></a>

         </div>

    </div>

    <div>

        <br /><br />

        <a href="http://hovertree.com">HoverTree</a>

 <a href="http://hovertree.com/texiao/hovertreeimg/">HovertreeImg Home</a>

 <a href="http://hovertree.com/h/bjaf/hovertreeimg.htm">Help</a>

 <a href="https://www.npmjs.com/package/hovertreeimg">NPM</a>

 <a href="https://github.com/shangyuxian/hovertreeimg">Github</a><br />

</div>

    <script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js"></script>

    <script src="http://hovertree.com/jq/hovertreeimg/jquery.hovertreeimg.js"></script>

    <script>

        $("#hovertreeimg").hovertreeimg({

            "h_circlePosition": "",//left,right,center

            "h_width": 768,

            "h_height": 66,

            "h_borderColor":"silver",

            "h_circleWidth": 14

        });

    </script>

</body>

</html>

更多：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery自动与手动图片切换效果下载的更多相关文章

  1. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  2. jQuery plugin : bgStretcher 背景图片切换效果插件

    转自:http://blog.dvxj.com/pandola/jQuery_bgStretcher.html bgStretcher 2011 (Background Stretcher)是一个jQ ...

  3. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  4. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  5. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  6. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  7. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  8. jQuery手机端触摸卡片切换效果

    效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...

  9. 100种不同图片切换效果插件pageSwitch

    分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览   源码下载 实现的代码. ht ...

随机推荐

  1. Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

    XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. ...

  2. MVC学习一：EF

    目录 一.EF修改和删除的多种方法 二.标准查询where 三.include 四.skip take 五.反射获取实例属性 六.EF DLL数据访问帮助类 一.EF修改和删除的多种方法 方法1:官方 ...

  3. [译]MVC网站教程（二）：异常管理

    介绍 “MVC网站教程”系列的目的是教你如何使用 ASP.NET MVC 创建一个基本的.可扩展的网站. 1)   MVC网站教程(一):多语言网站框架 2)   MVC网站教程(二):异常管理 3) ...

  4. 大白话讲解Promise（三）搞懂jquery中的Promise

    前两篇我们讲了ES6中的Promise以及Promise/A+规范,在Promise的知识体系中,jquery当然是必不可少的一环,所以本篇就来讲讲jquery中的Promise,也就是我们所知道的D ...

  5. Java Collections.sort方法对list集合排序

    1.排序测试类 package com.ljq.test; import java.util.ArrayList; import java.util.Collections; import java. ...

  6. "org.eclipse.wst.validation" has been removed 导入maven 项目出错。

    在谷歌中找到解决方案: 右键关闭项目,在打开,将项目刷新,选中项目右键----->Maven4myeclipse------->Update maven project 错误消失. 若还有 ...

  7. 浅析z-index（覆盖顺序）和定位

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  8. SSIS Design1: 源数据提取

    数据量的大小由两个方面决定:行的宽度和数据行的数量,为了减少ETL运行的时间,可以从源数据的提取上做优化,从数据源的输入上控制数据的质量和大小,减少转换和IO. 一,减少行的宽度 1,只加载需要的数据 ...

  9. ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分（2）用户登录、注销

    上次实现了用户注册,这次来实现用户登录,用到IAuthenticationManager的SignOut.SignIn方法和基于声明的标识.最后修改用户注册代码实现注册成功后直接登录. 目录: ASP ...

  10. .Net 转战 Android 4.4 日常笔记（8）--常见事件响应及实现方式

    在Andrioid开发中,常见的事件如下 单击事件 OnClickListener 长按事件 OnLongClickListener 滑动事件 OnTouchListenner 键盘事件 OnKeyL ...