<!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="./js/jquery-1.8.3.min.js" ></script>

 <style type="text/css">

 .main{

     width:500px;

    }

.left{

    width:200px;

    float:left;

}

.right{

    width:300px;

    float:left;

}

 </style>

<script type="text/javascript">

    $(document).ready(function(){

        $('dt').click(function(){

            $('strong').css("color","#FF0099");

        });

        $(".dy").click(function(){

            $('.dy+span').css("font-weight","bold");

        });

        $('#bq').click(function(){

            $("#bq+span>a:even").css("background-color", "#E0F8EA").css("color", "#10A14B").css("padding", "2px");

        });

        $("img[alt='收藏本片']").click(function(){

            alert("您已收藏成功！");

        });

    });

</script>

</head>

<body>

      <div class='main' >

         <div class='left'>

            <img src="data:images/pic.gif" />

            <br/><br/><br/><br/>

            <img src="data:images/col.gif" alt="收藏本片"/>

        </div>

        <div class='right'>

            <dl>

                <dt><b>非缘勿扰</b></dt>

                <dd>

                <p>

                    <strong>主演：</strong><span>苏有朋/秦岚/傅艺伟等</span>

                </p>

                <p>

                    <strong class='dy'>导演：</strong><span>赖水清</span>

                </p>

                <p>

                    <strong id='bq'>标签：</strong><span><a>苏有朋</a> <a> 国产电视剧</a>  <a>2013</a> <a>连续剧</a></span>

                </p>

                <p>

                    <strong>剧情：</strong><span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多 </a></span>

                </p>

                </dd>

            </dl>

            <img src="data:images/btn.gif"/>

        </div>

     </div>

</body>

</html>

制作非缘勿扰页面特效.html

jQuery - 制作非缘勿扰页面特效的更多相关文章

  1. jQuery自定义Web页面鼠标右键菜单

    jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...

  2. jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效

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

  3. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  4. 页面头部带loading进度指示的jQuery滚动页面特效

    这是一款非常有用且效果非常酷的jQuery页面头部带loading进度指示的滚动页面特效. 该特效在页面滚动的时候页面头部有Loading进度条指示当前页面滚动的位置,这能够让用户知道当前阅读的地方距 ...

  5. 使用jQuery快速高效制作网页交互特效----jQuery中的事件与动画

    jQuery中的事件 和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现. 事件在元素对象与功能代码中起着重要的桥梁作用. 在JQuery中,事件 ...

  6. 使用jQuery快速高效制作网页交互特效---jQuery选择器

    一.什么是jQuery选择器 Query选择器继承了CSS与Path语言的部分语法,允许通过标签名.属性名或内容对DOM元素进行快速.准确的选择, 而不必担心浏览器的兼容性,通过jQuery选择器对页 ...

  7. JQuery制作网页——第五章 初识 jQuery

    1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...

  8. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  9. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

随机推荐

  1. 从"嘿,今晚..."谈消息安全传输中的技术点

    一.初级阶段:信息裸传 特点:在网络上传递明文 黑客定理一:网络上传递的数据是不安全的,属网络于黑客公共场所,能被截取 结果:传递明文无异于不穿衣服裸奔 改进方案:先加密,再在网络上传输 二.进阶阶段 ...

  2. Python--10、生产者消费者模型

    生产者消费者模型(★) 平衡生产线程和消费线程的工作能力来提高程序的整体处理数据的速度.程序中有两类角色:生产数据.消费数据实现方式:生产->队列->消费. 通过一个容器来解决生产者和消费 ...

  3. H5 标签属性、input属性

    高亮文字: 全部商品只要<mark>6.18</mark> 结果:     加拼音文字: <ruby>變<rt>bian</rt></ ...

  4. 探索java世界中的日志奥秘

                    java日志简单介绍 对于一个应用程序来说日志记录是必不可少的一部分.线上问题追踪,基于日志的业务逻辑统计分析等都离不日志.JAVA领域存在多种日志框架,目前常用的日志 ...

  5. 移动web——bootstrap模板

    基本概念 1.bootstrap就是在媒体查询技术出现以后才开始出现的 2.此技术使响应式开发变得十分轻松,最大特点就是栅格系统(什么设备上如何显示)以及响应式工具(是否可见) 基本模板 <!D ...

  6. JS——try catch throw

    本例检测输入变量的值.如果值是错误的,会抛出一个异常(错误).catch 会捕捉到这个错误,并显示一段自定义的错误消息: <script> function myFunction() { ...

  7. easyui 使用笔记

    http://www.easyui.info/archives/1435.html datagrid 服务端分页 服务端分页,高效,快捷!强力推荐! easyui的datagrid服务端分页,通过设置 ...

  8. xcode构建webdriverAgent时报错Messaging unqualified id的解决办法

    在使用xcode构建webdriverAgent时,提示build failed,报错信息为:semantic issue:Messaging unqualified id,可以参考以下解决方案 xc ...

  9. 【VIP视频网站项目】VIP视频网站项目v1.0.3版本发布啦（程序一键安装+电影后台自动抓取+代码结构调整）

    在线体验地址:http://vip.52tech.tech/ GIthub源码:https://github.com/xiugangzhang/vip.github.io 项目预览 主页面 登录页面 ...

  10. 关于img的一个小知识点

    这两天在撸代码的时候发现图片的最下面总是会留一条空白,刚开始不知道为什么,但是UI拿刀对我说去掉它,瑟瑟发抖的我找了下原因及解决方案. 原因:img 是一个inline-block标签,而这个标签的v ...