`

Jquery1.7.1----2.轮换图片展览

阅读更多

 

Jquery1.7.1实例教程

——作者:Angel

 

目录

1. 个性化不同的链接样式 2

1.1 问题的提出 2

1.2 问题的分析 2

1.3 问题的假设 3

1.4 问题的求解 3

2. 轮换图片展览 12

2.1 问题的提出 12

2.2 问题的分析 12

2.3 问题的假设 13

2.4 问题的求解 13

3. 模仿WordPress后台评论管理面板 18

3.1 问题的提出 18

我们知道QQ有一项功能,就是可以开启留言审核功能:就是当有人是在你的空间留言的时候,你能够设置是否在你的空间发布留言。类似这样的一些东西应该怎么处理呢? 19

3.2. 问题的分析 19

3.3 问题的假设 19

3.4 问题的求解 19

4. JqueryAjax 28

4.1 问题的提出 29

4.2 问题的分析 29

4.3 问题的假设 29

4.4 问题的求解 29

 

 

说明:

》该材料主要是用实例讲解jquery的使用,但讲解的过程当中会有少部分的理论知识,要是有朋友需要理论学习的可以在百度上进行查找学习,谢谢合作。

》该资料版权归作者所有,可以进行转载互相学习。

》开发工具MyEclipse8.5Dreamwaver cs4

》操作系统win7/xp

》服务器Apach-tomcat 6.0.18

<!--EndFragment-->

 

 

 

2.1 问题的提出

最终效果图:

演示地址:http://www.webdesignerwall.com/demo/jquery/img-replacement.html

现在我们要做一个网站来展览我们的产品,那么我们要如何做呢?接下来让我们一起来看美眉怎么变魔术的吧(呵呵,当然不是一边就把衣服变没了,想歪了)。

 

2.2 问题的分析

其实我们要做的一件事情就是类似相册的展览这样的功能。所以我们需要有图片(图片可以在演示网址进行下载,这个就不用me 多说了);其次要将我们的图片引入到网页中 ,用<img />标签,我们希望在每个图片中能够有类似相框的东西给圈起来,所以我们需要加入css代码;最后我们希望相片能够进行轮换,所以我们需要加入js代码进行事件的控制。

这个功能用纯js代码也是可以实现的,也是简单之极,当然我们现在是想提高我们jquery水平,所以我们还是用jquery来做。

 

2.3 问题的假设

假设条件无:

2.4 问题的求解

一般页面编写的顺序都是 html代码,css代码,js代码(css,js之间不是一定的),当然习惯问题。

① 页面代码

页面代码主要是显示大图已经大图对应的缩略图,当然一开始只能显示一张大图了,源码如下:

  <!-- **********显示大图的位置************-->

<p><img id="largeImg" src="images/img2-lg.jpg" /></p>

 

 

<!--** 所有的缩略图****-->

<p class="show">

<a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a>

<a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a>

<a href="images/img4-lg.jpg" title="Image 4"><img src="images/img4-thumb.jpg" /></a>

<a href="images/img5-lg.jpg" title="Image 5"><img src="images/img5-thumb.jpg" /></a>

<a href="images/img6-lg.jpg" title="Image 6"><img src="images/img6-thumb.jpg" /></a>

</p> 

② csss 代码

在浏览器浏览下我们的作品,你会发现长的不是那么好看(虽然原本就不好看,呵呵,大家别太大声呀,自得其乐就可以了呀),所以我们希望美化下。我们知道美眉一般出门吧,都喜欢在脸上擦点粉粉(至于具体的擦什么,就不得而知了,呵呵,本人可没有那个嗜好呀,别想歪了),然后在外面套上漂亮的衣裳(当然不能光溜溜的就出去了,害羞吗,呵呵,开个玩笑。在此说明下:没有像拿谁开玩笑,本意是想让大家在开心中进行成长,如有侵犯谁的利益了,联系我,一定道歉,并且修改文章),出门去被人欣赏去,回头率高达百分百(哇塞,刚才那个美眉就好漂亮啊,在回头看一眼,啧啧,不错不错。啊,好疼呀,撞电线杆上了,还有狗狗的尿呀,恶心死了,赶快用手擦擦闪人)。

美眉喜欢漂亮,图片当然也希望让自己更吸引人了,所以我们要给图片加上边框,至于具体怎么一个设计法,那就看大家的本领了。我设计的就勉强能让小猫小狗看看,见人就难了。

具体源码如下:

 

<style>

body{

text-align:center;/*居中内容*/

}

 

/* 给 大图 加上边框,宽和高度 内边距*/

img#largeImg{

bordersolid 1px #ccc;

width550px;

height400px;

padding5px;

}

 

/* 给 img 加上边框,宽和高度 内边距*/

p.show img {

bordersolid 1px #ccc;

width100px;

height100px;

padding4px;

}

 

</style>

③ js代码

当然同样同样需要引入jquery.js 库。

具体的js代码如下:

 

 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script>

 

$(document).ready(function(){

$("p.show a").click(function(){

var largeImage = ($(this).attr("href"));//获得当前对象href属性的值

$("img#largeImg").attr({src:largeImage});

return false;// 这句代码一定要加上,不然点击超链接就会进行跳转了。

});

});

 

</script>

说明:

》在这个例子用了 jquery 获取属性的值:

($(this).attr("href"));//获得当前对象href属性的值

和 绑定属性的值:

$("img#largeImg").attr({src:largeImage});

 

》代码解说:

return false;// 这句代码一定要加上,不然点击超链接就会进行跳转了。

为什么这个程序需要加上这个语句呢,主要是为了防止 超链接进行跳转。什么意思呢?别着急,请听我慢慢说来。

假设有代码:

<a href="images/img6-lg.jpg" title="Image 6"><img src="images/img6-thumb.jpg" /></a>

这是一个带有图片的超链接,当点击超链接时,会触发onClick()事件,也就是我们写的那个代码里。当程序得到onclick()方法的返回值为false的时候,就不能进行跳转了。所以一般我们不进行设置返回值得话都是默认返回true的,也就能够进行跳转了。

》所有源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>轮换图片展览</title>

 

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script>

 

$(document).ready(function(){

$("p.show a").click(function(){

var largeImage = ($(this).attr("href"));//获得当前对象href属性的值

$("img#largeImg").attr({src:largeImage});

return false;// 这句代码一定要加上,不然点击超链接就会进行跳转了。

});

});

 

</script>

 

<style>

body{

text-align:center;/*居中内容*/

}

 

/* 给 大图 加上边框,宽和高度 内边距*/

img#largeImg{

bordersolid 1px #ccc;

width550px;

height400px;

padding5px;

}

 

/* 给 img 加上边框,宽和高度 内边距*/

p.show img {

bordersolid 1px #ccc;

width100px;

height100px;

padding4px;

}

 

</style>

 

 

 

</head>

 

<body>

 

<!-- **********显示大图的位置************-->

<p><img id="largeImg" src="images/img2-lg.jpg" /></p>

 

 

<!--** 所有的缩略图****-->

<p class="show">

<a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a>

<a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a>

<a href="images/img4-lg.jpg" title="Image 4"><img src="images/img4-thumb.jpg" /></a>

<a href="images/img5-lg.jpg" title="Image 5"><img src="images/img5-thumb.jpg" /></a>

<a href="images/img6-lg.jpg" title="Image 6"><img src="images/img6-thumb.jpg" /></a>

</p>   

 

</body>

</html>

 

回家吃饭,跟老婆聊聊天去了。你们在学习中也别忘了享受呀。

得得达达,我闪了.

<!--EndFragment-->

分享到:
评论

相关推荐

    docker-io-1.7.1-2.el6.x86_64.rpm及依赖包

    docker-io-1.7.1-2.el6.x86_64.rpm及依赖包 redhat6 和centos6下使用

    mqttfx-1.7.1-windows-x64.rar

    标题中的“mqttfx-1.7.1-windows-x64.rar”表明这是MQTTFX的1.7.1版本,专为64位Windows操作系统设计的压缩包文件。这个版本可能包含了一些新特性、性能优化或者修复了前一版本的已知问题。在下载并解压此文件后,...

    docker-engine-1.7.1-1.el6.x86-64.rpm【CentOS6能用的docker完整安装包】

    查了很多资料都说不支持Centos6,需要升级内核,后来终于找到不升级内核的办法,成功安装上docker,必须要用到这个版本的docker安装包,CentOS6能用的docker完整安装包,已在生产环境稳定使用。

    jquery-1.7.1-vsdoc.js CSDN 首发

    最新版jquery-1.7.1-vsdoc.js jQuery的VS智能提示插件 建议下载该资源的朋友收藏我的csdn下载地址...2、切记:两个文件的文件名不能修改,并且只要引用jquery-1.7.1.js而不要引用jquery-1.7.1-vsdoc.js。

    mqttfx-1.7.1-windows-x64.zip

    在"mqttfx-1.7.1-windows-x64.zip"压缩包中,主要包含了一个名为"mqttfx-1.7.1-windows-x64.exe"的可执行文件。这个文件是MQTTFX的安装程序,用户可以通过双击运行来安装这款MQTT客户端。以下是MQTTFX的一些关键特性...

    mqttfx-1.7.1-windows-x64.exe

    mqttfx-1.7.1-windows-x64.exe

    jquery-1.7.1-vsdoc.js

    我们将主要关注以下三个方面:jQuery核心库(jquery-1.7.1.js)、压缩版库(jquery-1.7.1.min.js)以及开发者文档支持文件(jquery-1.7.1-vsdoc.js)。 首先,我们来看看`jquery-1.7.1.js`。这是jQuery的核心库,...

    docker-engine-1.7.1-1.el6.x86_64.rpm

    很多朋友想要找的 Centos6 Docker RPM 最新安装包 docker-engine-1.7.1-1.el6.x86_64.rpm ,安装方法 rpm -ivh docker-engine-1.7.1-1.el6.x86_64.rpm 或 yum -y install docker-engine-1.7.1-1.el6.x86_64.rpm

    icedtea-web-1.7.1-2.el7_6.x86_64.rpm

    官方离线安装包,测试可用。使用rpm -ivh [rpm完整包名] 进行安装

    icedtea-web-1.7.1-1.el7.x86_64.rpm

    离线安装包,亲测可用

    mqtt客户端windows测试工具:mqttfx-1.7.1-windows-x64.zip

    7. **跨平台**:尽管这里提供的是mqttfx-1.7.1-windows-x64.exe,但MQTTFX实际上是跨平台的,还有适用于Linux和Mac OS的版本,满足不同用户需求。 使用MQTTFX,无论是开发人员还是测试工程师,都能有效地测试和验证...

    mqttfx-1.7.1-windows-x64

    MQTTfx的压缩包内包含的是`mqttfx-1.7.1-windows-x64.exe`文件,这是一个可执行程序,用户只需双击即可在Windows 64位系统上安装和运行MQTTfx。安装过程中,通常会提示用户接受许可协议、选择安装目录和创建桌面快捷...

    centos6 安装docker docker-io-1.7.1.rpm docker-engine-1.7.1-1.el6.x86_64.rpm

    centos6 不再支持直接使用yum安装, 可使用rpm包的安装低版本docker方式, docker 1.7.1

    xampp-win32-1.7.1-installer-beta4.exe

    xampp-win32-1.7.1-installer-beta4.exexampp-win32-1.7.1-installer-beta4.exe

    ant-apache-log4j-1.7.1-13.el6.i686.rpm

    ant-apache-log4j-1.7.1-13.el6.i686.rpm是centos依赖包。

    mqtt.fx-1.7.1-windows-x64位安装包

    总结来说,mqtt.fx-1.7.1-windows-x64位安装包是适用于Windows 64位系统的MQTT客户端工具,旨在提供简单易用的界面,便于开发者和用户进行MQTT协议的测试和应用。通过这个软件,用户可以轻松地与各种MQTT服务器交互...

    mqttfx-1.7.1-windows.rar

    下载并运行`mqttfx-1.7.1-windows.exe`安装程序,按照向导完成安装过程,然后就可以启动MQTTFX并开始调试和测试MQTT服务了。 总结来说,MQTTFX是一个强大且易用的工具,对于物联网开发者和系统集成者来说,它是测试...

    jquery 1.7.1----4. Jquery之Ajax

    **jQuery 1.7.1 与 AJAX** jQuery是一个强大的JavaScript库,它的出现极大地简化了JavaScript的DOM操作、事件处理以及Ajax交互。在jQuery 1.7.1版本中,AJAX功能得到了进一步的优化和增强,使得网页的异步数据通信...

    JQuery-1.7.1(含vsdoc)

    2. **jQuery 1.7.1-vsdoc.js** 主要是为了配合Visual Studio等IDE进行智能提示和代码补全而设计的。当在VS中引用这个文件时,IDE能读取其中的特殊注释,提供对jQuery函数和方法的详细描述,提升开发效率。这对于使用...

Global site tag (gtag.js) - Google Analytics