jquery实现华丽的可折角广告代码

2024-09-26 19:30:26

本文实例讲述了jquery实现可折角的广告代码。分享给大家供大家参考。具体如下：

这是一款可折角的广告代码，或许你已经看到过了，现在一些门户网站还可看到这种效果的身影，用鼠标滑过折角的边，即可出现下拉效果。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-zd-adv-stylee-codes/

具体代码如下：

<!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>
<title>jQuery页面顶部折角图片撕开效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#pageflip").hover(function(){
  $("#pageflip img , .msg_block").stop().animate({width: '307px', height: '319px'}, 500);
 },function(){
  $("#pageflip img").stop().animate({width: '50px', height: '52px'}, 220);
  $(".msg_block").stop().animate({width: '50px', height: '50px'}, 200);
 });
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
img{behavior:url(iepngfix.htc)}
/* pageflip */
#pageflip{right:0px;float:right;position:relative;top:0px}
#pageflip img{z-index:99;right:0px;width:50px;position:absolute;top:0px;height:52px;ms-interpolation-mode:bicubic}
#pageflip .msg_block{right:0px;background:url(images/subscribe.png) no-repeat right top;overflow:hidden;width:50px;position:absolute;top:0px;height:50px}
</style>
</head>
<body>
<div id="pageflip">
<a href="#" target="_blank"><img width="307" height="319" alt="sc.chinaz.com" src="images/page_flip.png"></a>
<div class="msg_block"></div>
</div>
<div style="text-align:center;clear:both;">
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

jQuery团购倒计时特效实现方法

本文实例讲述了jQuery团购倒计时特效实现方法.分享给大家供大家参考.具体实现方法如下: <!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"> &
jQuery实现倒计时跳转的例子

实现代码: 复制代码代码如下: <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>跳转页面</title> <script src="jquery.js"></script> <script la
基于jQuery+Cookie实现的防止刷新的在线考试倒计时

基于jQuery+Cookie实现的防止刷新的在线考试倒计时 $(function() { var _minute = parseInt("${exampaper.paperTime }"); var _expiresHours = _minute * 60 * 1000; if(!hasSetCookie()){ addCookie("${examinee.examineeId}", _expiresHours, _expiresHours); } settime
jquery实现滑屏大图定时收缩为小banner图片的广告代码

本文实例讲述了jquery实现滑屏大图定时收缩为小banner图片的广告代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的JS广告特效,滑屏大图广告定时收缩为小banner图片广告代码,这种广告在各大门户网站现在还能看得到,刚打开网页的时候可以看到滑下来的大图片广告,过一会,广告自动缩小变成了一个banner横幅广告,并带有关闭按钮,可以关闭广告,对于广告来说,这个代码挺实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/
jquery实现可关闭的倒计时广告特效代码

本文实例讲述了jquery实现可关闭的倒计时广告特效代码.分享给大家供大家参考.具体如下: 这是一款类似播放视频时候最开始的倒计时广告,广告时间结束才能看到视频内容,一个JS小贴片广告代码,右上角带关闭按钮,左上角显示倒计时剩余时间,运行jQuery代码综合实现,CSS和HTML共同结合的网页特效,兼容各主流浏览器,本效果是从门户网站上整理而来.希望大家喜欢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-close-time
jquery实现LED广告牌旋转系统图片切换效果代码分享

本文实例讲述了jquery实现LED广告牌旋转系统图片切换效果,分享给大家供大家参考.具体如下: js模拟路边巨大显示屏上广告切换效果,不得不相信js做到了,而且让你无话可说的逼真效果. LED广告显示器上图片切换效果,场景也类似,效果相当震撼看得我目瞪口呆,热爱特效的你可不要错过哈! 运行效果图: -------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现LED广告牌旋转
jquery右下角自动弹出可关闭的广告层

右下角弹出层后,会在一定时间后自动隐藏. html代码: <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>jquery右下角自动弹出关闭层</title><base target="_blank"/> <scrip
jquery插件jquery倒计时插件分享

复制代码代码如下: $(document).ready(function () { /* 延迟函数 */ jQuery.fn.delay = function (time, func) { return this.each(function () { setTimeout(func, time); }); };
JQuery仿小米手机抢购页面倒计时效果

1.效果及功能说明通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒. 2.实现原理首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的还有多少的时间就把还剩下的时间给显示出来就得出了离截止日期还有多久. 主要代码复制代码代码如下: var startTime = new Date(); //获得当前的时间 startTime.setFullYear(2016, 5, 27); //调用设置年份 startTime.setHou
jquery实现华丽的可折角广告代码

本文实例讲述了jquery实现可折角的广告代码.分享给大家供大家参考.具体如下: 这是一款可折角的广告代码,或许你已经看到过了,现在一些门户网站还可看到这种效果的身影,用鼠标滑过折角的边,即可出现下拉效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-zd-adv-stylee-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/
使用jQuery实现页面定时弹出广告效果

1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件第二步:书写页面加载函数第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show()) 第六步:清除显示广告图片的定时操作第七步:设置定时操作(隐藏广告图片的函数) 第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide()) 第九步:清除隐藏广告图片的定时操作 <script
jQuery实现页面顶部下拉广告

本广告可以是图片也可以是Flash,可以设置自动播放的时间,可以手动停止和重播. 效果展示 http://demo.jb51.net/js/2016/jQuery_xiala/ 源码下载:http://xiazai.jb51.net/201612/yuanma/jQuery(xiala)_jb51.rar 效果图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/
JQuery实现网页右侧随动广告特效

方法一: <script type="text/javascript">// <![CDATA[ $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(
BootStrap中jQuery插件Carousel实现轮播广告效果

轮播广告在网站中的应用实在是太常见了,下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果,下图为最终效果: 具体实现方法请看下面的代码: <div class="carousel slide" data-ride="carousel" id="carousel" data-interval="3000"> //data-interval设置轮播间隔为3秒钟 <!-- 广告序号指示器
jquery跟随屏幕滚动效果的实现代码

我们在很多网站看到,当我们滚动网页时,网页内的广告或某个小区域并不会消失,而是浮动在屏幕的某个地方,特别是一些局域广告.那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. var $catalogueOffsetTop = $('aside#catalogue').offset().top; var $archiveOffestTop = $('aside#arc
jQuery完成表单验证的实例代码(纯代码)

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css"
广告代码静态化js通用函数

/* JavaScript Document 广告代码静态化js通用函数原则上每个页面不应该出现域名的固定指向 */ /* Config */ var sSiteUrl = "http://www.spvjoy.com"; //var sSiteUrl = "http://192.168.1.30:82"; var sSendSite = "http://send.mmstoon.com"; var sMp3Url = "http:/

jquery实现华丽的可折角广告代码

相关推荐

随机推荐