jquery实现更多内容效果
体验效果:http://hovertree.com/texiao/jquery/33/
写个“更多内容的展开/收起”的js
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery实现收起展开功能 - 何问起</title><base target="_blank" />
<meta charset="utf-8" />
<style>
a{color:darkgreen}
.hovertreeContent{width:300px;text-indent:2em;margin:5px auto;height:60px;overflow:hidden;position:relative;border:1px solid silver;}
.hewenqiToggle{height:20px;background-color:#f0f0f0;border-top:1px solid silver;position:absolute;bottom:0px;width:100%;}
.triangle-down-hovertree { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 16px solid #999;position:absolute;right:0px;left:0px;margin:0px auto; top:2px;cursor:pointer;}
.triangle-up-hovertree { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 16px solid #999; position:absolute;right:0px;left:0px;margin:0px auto;top:2px; }
</style>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script> </head>
<body>
<div style="width:730px;margin:0px auto;text-align:center;">
<h2>jQuery实现收起展开功能</h2>
<a href="http://hovertree.com/h/bjaf/6sm1esjw.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
</div>
<div class="hovertreeContent">
受到网店的影响,服装店的生意逐渐有所下降,老板找何问起去谈,大概是准备跟上网购潮流,让何问起准备一下,
要在网上开网店,要为服装店建立网站。
何问起也没说自己经验不足,只说会积极准备。于是抓紧时间查找资料,学习练习。
<div class="hewenqiToggle"><span class="triangle-down-hovertree"></span></div>
</div>
<script>
$(".hewenqiToggle").on("click", function () {
if ($(".hewenqiToggle").css('position') == "absolute") {
$(".hovertreeContent").height("auto");
$(".hewenqiToggle").css({ "position": "relative" });
$(".hewenqiToggle").find("span").removeClass('triangle-down-hovertree').addClass('triangle-up-hovertree');
}
else
{
$(".hovertreeContent").height("60");
$(".hewenqiToggle").css({ "position": "absolute" });
$(".hewenqiToggle").find("span").removeClass('triangle-up-hovertree').addClass('triangle-down-hovertree');
}
})
</script>
</body>
</html>
转自:http://hovertree.com/h/bjaf/6sm1esjw.htm
更多特效:http://www.cnblogs.com/roucheng/p/texiao.html
jquery实现更多内容效果的更多相关文章
- js点击更多显示更多内容效果
我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...
- 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)
参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...
- jQuery+PHP实现浏览更多内容
Ajax加载的基本原理:当页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个“查看更多”的链接,通过触发该链接,向服务端发送Ajax请求,后台 ...
- PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...
- jQuery鼠标悬停内容动画切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 深入学习jQuery描述文本内容的3个方法
× 目录 [1]html() [2]text() [3]val()[4]总结 前面的话 在javascript中,描述元素内容有5个属性,分别是innerHTML.outerHTML.innerTex ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- jquery实现章节目录效果
<html><head><title>jquery实现章节目录效果</title> <script type="text/javascr ...
- jQuery Mobile 列表内容
jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: &l ...
随机推荐
- C#设计模式之观察者
Iron之观察者 引言 上一篇说的职责链模式,很有意思的一个模式,今天这个模式也是很有意思的一个模式,还是不啰嗦了直接进入主题吧. 场景介绍:在上一遍中说到用到部件检测,很巧妙的让调用者和处理者解耦了 ...
- Android学习第三天-签名常用命令
由于怕篇幅过长,所以把这个打包常用命令分开成两篇博文来进行讲解,下面我们直接进入主题吧. 8.keytool 这是我们JDK自带的密钥和证书管理工具 命令: -certreq 生成证书请求 -chan ...
- [SDK2.2]Windows Azure Storage (16) 使用WCF服务,将本地图片上传至Azure Storage (上) 客户端代码
<Windows Azure Platform 系列文章目录> 前一章我们完成了服务器端的代码,并且已经发布到了Windows Azure云端. 本章我们将实现客户端的代码,客户端这里我们 ...
- TODO:浅谈pm2基本工作原理
TODO:浅谈pm2基本工作原理 要谈Node.js pm2的工作原理,需要先来了解撒旦(Satan)和上帝(God)的关系. 撒旦(Satan),主要指<圣经>中的堕天使(也称堕天使撒旦 ...
- [CORS:跨域资源共享] 同源策略与JSONP
Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...
- 我也来说说DDD~大话目录
回到占占推荐博客索引 DDD之前没有接触过,但一但有了接触就一发不可收拾,他会带去进入一个全新的世界! DDD不是新技术,而是新思想,新模式,是软件开发领域的一次突破,它更接近于业务,对于业务的改动它 ...
- Android-找到包下面所有的类
Android 利用反射找到包下面所有的类 Android下其实有一个DexFile的东西,利用它我们可以很好的找到包下面所有的类 什么是DexFile? 官方的说明是这样的: Manipulates ...
- 初学者--bootstrap(五)JavaScript插件(上)----在路上(6)
jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...
- iOS完整学习路线图
- MacOS中使用QT开发iOS应用
因为项目合同中规定一部分业务内容要在手机端实现,包括安卓机和苹果机,因此选择了QT作为开发工具.程序在Win10和安卓系统上已经完美运行,这几天开始搭建iOS的编译和发布环境,因为以前没有使用过mac ...